SSET Contact List App (Part 1) Step by Step Guide

Step 1.5: Add the App Icon

Instruction: In your Assets.xcassets, find the AppIcon set. Drag your prepared 1024x1024 pixel app icon into the slots. Xcode will automatically generate the other required sizes.

Explanation: The App Icon is a critical part of your app's identity. You must provide a high-resolution 1024x1024 pixel version for the App Store listing. For best results, use a tool like appicon.co to generate all the necessary sizes from your main image.

Preparing for iOS 18+ Dark and Tinted Modes

With iOS 18, users can customize app icons with Dark Mode and color tints. To ensure your app looks great, it's highly recommended to provide three variants of your icon in the AppIcon set:

• Light (Default): Your standard, primary app icon.
• Dark: A version adapted for Dark Mode. It should match the style of dark system icons. You can often achieve this by using your icon's main color in the foreground and either omitting the background (letting the system add a dark one) or providing a custom dark background.
• Tinted: A fully opaque, grayscale version of your icon. The system will apply user-selected color tints to this variant. If you don't provide a specific tinted version, the system will apply the tint over your original icon, which can produce unpredictable and undesirable results.

Providing these variants ensures your app icon remains clear, recognizable, and consistent across all appearance modes.

Step 2.1: Create the Contact Struct

Instruction: Inside the "Model" folder, create a new Swift file named Contact.swift. This struct will define the properties for each contact. It must conform to Identifiable for use in SwiftUI Lists.

Explanation: A struct is a value type in Swift, perfect for modeling data like a contact. By conforming to the Identifiable protocol, we tell SwiftUI that each Contact instance has a unique id, which is required for List views to efficiently track and update rows. The image property is a computed property. Instead of storing a value, it computes and returns an Image view based on the imageName string, making it convenient to use directly in our views.

// Model/Contact.swift
import Foundation
import SwiftUI
import CoreLocation

struct Contact : Identifiable {
    var id: UUID = UUID()
    var name: String
    var email: String
    var phone: String
    var imageName: String
    
    var image: Image {
        Image(imageName)
    }
    
    var locationCoordinate: CLLocationCoordinate2D
}

Step 2.2: Create ModelData

Instruction: Create another Swift file in the "Model" folder called ModelData.swift. This file will hold the array of sample contact data that your app will display.

Explanation: In a real app, this data might come from a database or a network request. For this tutorial, we are "hardcoding" the data into a global array. This makes it easy to access the sample data from any view in the app for prototyping and building the UI.

// Model/ModelData.swift
import Foundation
import MapKit

var contacts: [Contact] = [
    Contact(name: "Tom Huynh", email: "tom.huynh@rmit.edu.vn", phone: "0912325232", imageName: "tom-huynh", locationCoordinate: CLLocationCoordinate2D(latitude: 10.729410965174186, longitude: 106.69522548892152)),
    // ... add all other contacts here
    Contact(name: "Ushik Shrestha", email: "ushik.shrestha@rmit.edu.vn", phone: "0922345123", imageName: "ushik-shrestha", locationCoordinate: CLLocationCoordinate2D(latitude: 11.940952669293084, longitude: 108.45964507946036))
]

Step 3.1: Create CircleView

Instruction: In the "Views" folder, create a new SwiftUI View file named CircleView.swift. This view takes an image and displays it as a styled circle.

Explanation: Creating small, reusable views like CircleView is a core principle of SwiftUI. It keeps your code clean and allows you to reuse the same styled component in multiple places. Here, we use modifiers: .clipShape(Circle()) to make the image circular, .overlay() to add a border, and .shadow() to give it depth.

// Views/CircleView.swift
import SwiftUI

struct CircleView: View {
    var image: Image
    var body: some View {
        image
            .clipShape(Circle())
            .overlay(Circle()
                .stroke(Color("rmit-red"), lineWidth: 3))
            .shadow(color:Color("rmit-blue"), radius: 10)
    }
}

#Preview {
    CircleView(image: contacts[0].image)
}

Step 3.2: Create InfoView

Instruction: Create InfoView.swift in the "Views" folder. This component is a reusable bar for displaying information like a phone number or email address.

Explanation: InfoView is another example of a reusable component. It uses a RoundedRectangle as a background and an HStack to place an icon and text side-by-side. The overlay modifier is used here to place the HStack on top of the rectangle shape.

// Views/InfoView.swift
import SwiftUI

struct InfoView: View {
    var text: String
    var imageName: String
    
    var body: some View {
        RoundedRectangle(cornerRadius: 25)
            .fill(Color.white)
            .frame(height: 50)
            .overlay(
                HStack{
                    Image(systemName: imageName)
                        .foregroundStyle(.rmitRed)
                    Text(text)
                        .foregroundStyle(.rmitBlue)
                }
            )
    }
}

#Preview {
    ZStack {
        Color("rmit-blue")
            .ignoresSafeArea()
        VStack {
            InfoView(text: "0123456789", imageName: "phone.fill")
            InfoView(text: "tom.huynh@rmit.edu.vn", imageName: "envelope.fill")
        }
    }
}

Step 3.3: Create MapView

Instruction: Create MapView.swift in the "Views" folder. This view uses MapKit to display a location based on coordinates.

Explanation: SwiftUI integrates seamlessly with MapKit. The Map view displays an interactive map. We use the initialPosition modifier to set the map's starting region, centered on the provided coordinates with a specific zoom level (span). A Marker is added to the map to indicate the exact location.

// Views/MapView.swift
import SwiftUI
import MapKit

struct MapView: View {
    let myLocation: CLLocationCoordinate2D
    
    var body: some View {
        Map(initialPosition: .region(MKCoordinateRegion(
            center: myLocation,
            span: MKCoordinateSpan(latitudeDelta: 0.004, longitudeDelta: 0.004)
        ))) {
            Marker("My House", coordinate: myLocation)
        }
    }
}

#Preview {
    MapView(myLocation: CLLocationCoordinate2D(latitude: 10.729227879505439, longitude: 106.69579948556701))
}

Step 4.1: Create ContactRow

Instruction: Create ContactRow.swift. This view defines the layout for a single contact in the list.

Explanation: This view defines the appearance of each row in our contact list. It takes a Contact object as input and uses an HStack to arrange the contact's image and name horizontally. This view will be used by the ContactList to build the scrollable list.

// Views/ContactRow.swift
import SwiftUI

struct ContactRow: View {
    var contact: Contact
    
    var body: some View {
        HStack {
            contact.image
                .resizable()
                .scaledToFit()
                .frame(width: 50)
            Text(contact.name)
        }
    }
}

#Preview {
    VStack {
        ContactRow(contact: contacts[0])
        ContactRow(contact: contacts[1])
        ContactRow(contact: contacts[2])
        ContactRow(contact: contacts[3])
        ContactRow(contact: contacts[4])
    }
}

Step 4.2: Create ContactList

Instruction: Create ContactList.swift. This view uses a NavigationView and List to display all contacts from your ModelData. NavigationLink handles tapping on a row.

Explanation: NavigationView provides the navigation bar at the top and allows for pushing new views onto the screen. The List view takes our contacts array and creates a ContactRow for each item. The NavigationLink wraps each row, making it tappable and specifying that tapping it should navigate to the ContactCard for that specific contact.

// Views/ContactList.swift
import SwiftUI

struct ContactList: View {
    var body: some View {
        NavigationView {
            List (contacts)  { contact in
                NavigationLink{
                    ContactCard(contact: contact)
                } label: {
                    ContactRow(contact: contact)
                }
            }
            .navigationTitle("SSET Contact List 📒")
        }
    }
}

#Preview {
    ContactList()
}

Step 4.3: Create ContactCard (Detail View)

Instruction: Create ContactCard.swift. This is the detail view for a contact, combining the MapView, CircleView, and InfoView components.

Explanation: This is where we assemble our reusable components. A ZStack is used to layer the background color. A VStack arranges the MapView, CircleView, text, and InfoViews vertically. The .offset() modifier is used to pull the CircleView up so it overlaps the MapView, creating a more dynamic layout.

// Views/ContactCard.swift
import SwiftUI

struct ContactCard: View {
    var contact: Contact
    var body: some View {
        ZStack {
            Color("rmit-blue")
                .ignoresSafeArea()
            VStack{
                MapView(myLocation: contact.locationCoordinate)
                    .frame(height: 250)
                CircleView(image: contact.image)
                    .offset(y:-100)
                    .padding(.bottom, -100)
                Text(contact.name)
                    .font(.system(size: 40, weight: .bold, design: .serif))
                    .foregroundStyle(.white)
                
                Image("rmit-logo-white")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 225)
                
                Group {
                    InfoView(text: contact.phone, imageName: "phone.fill")
       
                    InfoView(text: contact.email, imageName: "envelope.fill")
                }
                .padding()      
            }
        }
        .toolbarBackground(
            Color("rmit-blue"),
            for: .navigationBar)
        .toolbarBackground(.visible, for: .navigationBar)
        .toolbarColorScheme(.dark, for: .navigationBar) // This makes the back button white
    }
}

#Preview {
    ContactCard(contact: contacts[0])
}

Step 4.4: Update the App Entry Point

Instruction: Finally, ensure your SSETContactListApp.swift file is pointing to ContactList as the main view.

Explanation: The file marked with @main is the entry point of the app. The WindowGroup is the scene that contains your app's view hierarchy. We set its content to be an instance of ContactList, so that's the first screen the user will see when they launch the app.

// SSETContactListApp.swift
import SwiftUI

@main
struct SSETContactListApp: App {
    var body: some Scene {
        WindowGroup {
            ContactList()
        }
    }
}