Lists And Navigation In SwiftUI

List

A container that presents rows of data arranged in a single column.

 

SwiftUI's List is similar to UITableView in which you can show static or dynamic TableView cells as per your app need. However, it is simple to use, we don't need to create prototype cells in storyboards, or register them in code. We don't need to tell how many rows in a cell are there and we don't need to dequeue and configure cells.

 

Instead, SwiftUIs are designed for composability - SwiftUI has us build small views that know how to configure themselves as list rows, then use those. 

 

Example 

 

Landmark.swift declares a landmarks structure that stores all of the landmark information that the app needs to display, and that imports an array of landmark data from landmarkData.json. 

 

Step 1 

[
    {
        "name": "Turtle Rock",
        "category": "Featured",
        "city": "Twentynine Palms",
        "state": "California",
        "id": 1001,
        "park": "Joshua Tree National Park",
        "coordinates": {
            "longitude": -116.166868,
            "latitude": 34.011286
        },
        "imageName": "turtlerock"
    },
    {
        "name": "Silver Salmon Creek",
        "category": "Lakes",
        "city": "Port Alsworth",
        "state": "Alaska",
        "id": 4,
        "park": "Lake Clark National Park and Preserve",
        "coordinates": {
            "longitude": -152.665167,
            "latitude": 59.980167
        },
        "imageName": "silversalmoncreek"
    }
]

Step 2 - Create a Landmark Row

 

Here, we created a list landmark custom row which contains an image and text.

import SwiftUI
struct LandmarkRow: View {
    var landmark: Landmark
    var body: some View {
        HStack {
            landmark.image
            .resizable()
            .frame(width: 50, height: 50)
            Text(verbatim: landmark.name)
            Spacer()
        }
    }
}
#if DEBUG
struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LandmarkRow(landmark: landmarkData[0])
        }
        .previewLayout(.fixed(width: 300, height: 70))
    }
}
#endif

In the above code of LandmarkRow_Previews, update the landmark parameter to be the second element in the landmarkData array.

 

Use the previewLayout(_: ) modifier to set a size that approximates a row in a list.

 

You can use a Group to return multiple previews from the preview provider.

  

Step 3 - Make the list Dynamic

import SwiftUI
import CoreLocation

struct Landmark: Hashable, Codable, Identifiable {
    var id: Int
    var name: String
    fileprivate var imageName: String
    fileprivate var coordinates: Coordinates
    var state: String
    var park: String
    var category: Category
    var locationCoordinate: CLLocationCoordinate2D {
        CLLocationCoordinate2D(
            latitude: coordinates.latitude,
            longitude: coordinates.longitude)
    }
}
extension Landmark {
    var image: Image {
        ImageStore.shared.image(name: imageName)
    }
}
struct Coordinates: Hashable, Codable {
    var latitude: Double
    var longitude: Double
}

Step 4 - Set Up Navigation between List and Detail

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView{
            List(landmarkData){ dataObj in
                NavigationLink(destination: LandmarkDetail(landmark: dataObj)) {
                    LandmarkRow(landmark: dataObj)
                }
            }
            .navigationBarTitle(Text("Landmarks"), displayMode: .large)
        }
    }
}
#if DEBUG
struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
            LandmarkList()
    }
}
#endif

Note

You need to set up a root view on sceneDelegate.

 

 

App screenshot