In this blog, we will learn about how to build lists and navigation in SwiftUI.
This tutorial follows the Apple Developer demo app for creating and combining views in SwiftUI. Let’s play with SwiftUI. In the first part, we have learned about creating and combining views in SwiftUI. We will continue the same project and will modify it as per our requirements.
With the basic landmark detail view set up, you need to provide a way for users to see the full list of landmarks, and to view the details about each location.
You’ll create views that can show information about any landmark, and dynamically generate a scrolling list that a user can tap to see a detail view for a landmark. To fine-tune the UI, you’ll use Xcode’s canvas to render multiple previews at different device sizes.
Create a landmark JSON sample data
landmarkData.json file and put this under the
Resources folder of your project. This file represents each landmark data including the following information.
Rename ContentView.swift to LandmarkDetail.swift
ContentView.swift file and refactor its name to
Create Landmark Row view
The first view you’ll build in this tutorial is a row for displaying details about each landmark. This row view stores information in a property for the landmark it displays, so that one view can display any landmark. Later, you’ll combine multiple rows into a list of landmarks.
Create a new SwiftUI view, named
Customize the Row Preview
Xcode’s canvas automatically recognizes and displays any type in the current editor that conforms to the
PreviewProvider protocol. A preview provider returns one or more views, with options to configure the size and device.
You can customize the returned content from a preview provider to render exactly the previews that are most helpful to you.
Create the List of Landmarks
When you use SwiftUI’s
List type, you can display a platform-specific list of views. The elements of the list can be static, like the child views of the stacks you’ve created so far, or dynamically generated. You can even mix static and dynamically generated views.
Create a new SwiftUI view, named
Make the List Dynamic
Instead of specifying a list’s elements individually, you can generate rows directly from a collection.
You can create a list that displays the elements of collection by passing your collection of data and a closure that provides a view for each element in the collection. The list transforms each element in the collection into a child view by using the supplied closure.
Landmark.swift and declare conformance to the
Set Up Navigation Between List and Detail
The list renders properly, but you can’t tap an individual landmark to see that landmark’s detail page yet.
You add navigation capabilities to a list by embedding it in a
NavigationView, and then nesting each row in a
NavigationLink to set up a transtition to a destination view.
Pass Data into Child Views
LandmarkDetail view still uses hard-coded details to show its landmark. Just like
LandmarkDetail type and the views it comprises need to use a
landmark property as the source for their data.
Starting with the child views, you’ll convert
MapView, and then
LandmarkDetail to display data that’s passed in, rather than hard-coding each row.
CircleImage.swift, add a stored
This is a common pattern when building views using SwiftUI. Your custom views will often wrap and encapsulate a series of modifiers for a particular view.
MapView.swift, add a
MapView and convert the code to use that property instead of hard-coding the latitude and longitude.
LandmarkDetail.swift, add a
Landmark property to the
SceneDelegate.swift, switch the root view of the app to be