Implement SwiftUI

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

1.create a new project with SwiftUI interface

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

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
        }
    }
}

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]
}

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))
    }
}

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))
    }
}

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()
    }
}

8.demo

Blog

Avelyn Hyunjeong Choi

Join Our Newsletter. No Spam, Only the good stuff.

Related