How to build lists and navigation in SwiftUI

How to build lists and navigation in SwiftUI

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

Copy this 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

Open ContentView.swift file and refactor its name to LandmarkDetail.swift.

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 LandmarkRow.swift.

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 LandmarkList.swift.

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.

Switch to Landmark.swift and declare conformance to the Identifiable protocol.

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

The LandmarkDetail view still uses hard-coded details to show its landmark. Just like LandmarkRow, the 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 CircleImageMapView, and then LandmarkDetail to display data that’s passed in, rather than hard-coding each row.

In CircleImage.swift, add a stored imageproperty to CircleImage.

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.

In MapView.swift, add a coordinateproperty to MapView and convert the code to use that property instead of hard-coding the latitude and longitude.

In LandmarkDetail.swift, add a Landmark property to the LandmarkDetailtype.

In SceneDelegate.swift, switch the root view of the app to be LandmarkList.

navigation list in swift
child view in swiftui

Reference

https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

Further Reading

How to create and combine views in SwiftUI

Adesh

Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

This Post Has 2 Comments

  1. how do you add another image to the LandmarkDetail..?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu
%d bloggers like this: