DEV Community

Avelyn Hyunjeong Choi
Avelyn Hyunjeong Choi

Posted on • Edited on

2

Implement SwiftUI

In this blog, I will be implementing an app using SwiftUI.

1.create a new project with SwiftUI interface

Image description

2.create a new file called 'ListView' using SwiftUI View under User Interface

Image description

Image description

3.Edit the main app to use the 'ListView' created earlier

import SwiftUI

// main entry point of your app UI
@main
struct w12c2_SwiftUIApp: App {
    var body: some Scene {
        WindowGroup {
            ListView() // call ListView.swift
        }
    }
}

Enter fullscreen mode Exit fullscreen mode

4.create a 'Employee' class

import Foundation

// To ways to uniquely identify data
// Hashable: hash the listview in particular hasher to prodive unique hash value which can be used as an id
// used when you can't provide id
// **1.Keypath** - has to conform to `Hashable` protocol, so that the list view can hash it in a `Hasher` to produce an integer hash value that can uniquely identify each element.

struct Employee: Hashable {
    var name: String
    var isPresent: Bool
}

// **2.`Identifiable`** protocol by providing an `id` variable
struct Team: Identifiable {
    var id = UUID() // need id for Identifiable
    var name: String
    var employee: [Employee]
}
Enter fullscreen mode Exit fullscreen mode

5.create another file, 'EmployeeRow'

import SwiftUI

struct EmployeeRow: View {
    let employee: Employee

    var body: some View {
        HStack {
            Text(employee.name)
            Spacer() //takes entire space of the element. take the mid space between name and image
            Image(systemName: "person.circle.fill")
            // modifier
                .foregroundColor(employee.isPresent ? .green: .red)
        }
    }
}

struct EmployeeRow_Previews: PreviewProvider {
    static var previews: some View {
        // need to give initiaize value for the preview screen
        EmployeeRow(employee: Employee(name: "Test name", isPresent: true))
    }
}
Enter fullscreen mode Exit fullscreen mode

6.create another file, 'EmployeeView'

import SwiftUI

struct EmployeeView: View {
    let employee: Employee

    var body: some View {
        VStack {
            HStack {
                Text("Employee:")
                Spacer()
                Text(employee.name)
                // modifier
                    .bold()
            }

            HStack {
                Text("Status:")
                Spacer()
                Text(employee.isPresent ? "Present" : "Absent")
                    .bold()
            }
        }
        .padding()
    }
}

struct EmployeeView_Previews: PreviewProvider {
    static var previews: some View {
        EmployeeView(employee: Employee(name: "Test name", isPresent: true))
    }
}
Enter fullscreen mode Exit fullscreen mode

7.NavigationStack and NavigationLink are used to move from one View to another
// ListView

import SwiftUI

struct ListView: View {
    let teams: [Team] = [
        Team(name: "Frontend", employee: [Employee(name: "James", isPresent: false),
                                          Employee(name: "Jane", isPresent: true)]),
        Team(name: "Backend", employee: [Employee(name: "Avelyn", isPresent: true)]),
        Team(name: "Product", employee: [Employee(name: "Mike", isPresent: false)]),
        Team(name: "Design", employee: [Employee(name: "Jane", isPresent: true),
                                        Employee(name: "Ravi", isPresent: false)]),
        Team(name: "Testing", employee: [Employee(name: "Lyndon", isPresent: true)]),
    ]

    // when use hashable in a struct
    var body: some View {        
        // how to create a tableview and section
        // option 1 - use foreach
        NavigationStack {
            List {
                ForEach(teams) { team in
                    Section(team.name) {
                        // we use id here as Employee struct uses 'Hashable'
                        ForEach(team.employee, id: \.self) { employee in
                            // when you click the row -> navigate users to different screen
                            NavigationLink {
                                // Destination
                                EmployeeView(employee: employee)
                            } label: {
                                // Link
                                EmployeeRow(employee: employee)
                            }
                        }
                    }
                }
                .navigationTitle("Employees")
                // modifiers: modify and provide a new View
                .listStyle(.grouped)
            }
        }

        // option 2 - Use List to handle for loop
//        List(teams) { team in
//            Section(team.name) {
//                ForEach(team.employee, id: \.self) { employee in
//                    Text(employee.name)
//                }
//            }
//        }
    }
}

struct ListView_Previews: PreviewProvider {
    static var previews: some View {
        ListView()
    }
}
Enter fullscreen mode Exit fullscreen mode

8.demo

Image description

Image description

Sentry mobile image

Improving mobile performance, from slow screens to app start time

Based on our experience working with thousands of mobile developer teams, we developed a mobile monitoring maturity curve.

Read more

Top comments (0)

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools