Homework 8: Lists with SwiftUI

Lists are the SwiftUI equivalent of UIKit’s tableviews. This lesson focuses on how to build a simple list that includes text and images, and leads to a new view with additional information when a row is clicked.

Part 1: Create a List

  1. Create a new SwiftUI project named formula1 or Homework8. Whichever is fine as long as you change the folder name for submission.
  2. Download this list of Formula 1 drivers that have raced so far in 2024, unzip the file, and open the f1 folder that appears.
  3. Drag all of the images from the pics folder and the flags folder into assets.xcassets in your project.
  4. Open drivers.js and copy all of the arrays. Then navigate back to Xcode and paste them into ContentView, just underneath struct ContentView : View {
  5. Down below, in the body view, right-click on the Text element (“Hello, world!”) and select Embed in List.
  6. If you are successful, your code should look like this:
List(0 ..< 5) { item in
            Text("Hello, World!")
        }
  1. Set the length of the list to the number of items in an array by replacing the 5 in List(0 ..<5) with:
self.driverNames.count

as in…

List(0 ..< self.driverNames.count) { item in

This changes the amount of list items from 5 to the amount of items you have in your driverNames array. 

  1. Change Text(“Hello World”) to:
Text(driverNames[item])

Using the item value, the preview should now show a list with all of the driver names.

  1. Above the List, add in a Title for your app. You should add Text and change the Image.

Part 2: Design the List

  1. Embed the Text in an HStack and add the images from driverPics to the list as shown below. 
List(0 ..< self.driverNames.count) { item in
            HStack {
                Text(driverNames[item])
                Image(driverPics[item])
            }
        }
  1. Style the text, resize the image, and add a spacer(Spacer()) in between so it looks more like the example below. You should also add a title above the list.

Hint: This example text uses .headline and the image is resizable and scaled to fit. The image also has a frame with a width and height value of 60.0 and has the clip shape circle.

Part 3: Add Navigation to the List

Now that you have a well-designed list, let’s make it clickable. The first step is to embed our list in a NavigationView.

  1. Add the NavigationView just below the title and above the List. Don’t forget to add the closing bracket after the closing List bracket.

  2. The next step is to add a NavigationLink as shown below. For now, the destination is Text, which will appear in a separate view once the item is clicked. Fun fact: In previous lessons and exercises, you’ve linked to other view files. However, in this exercise we are building out a view directly in our navigation link. Pretty neat! The world of app dev is full of possibilities!
List(0 ..< self.driverNames.count) { item in
                NavigationLink(destination: 
                    VStack{Text(driverNames[item])}){
                    HStack {
                        ...
                     }}

Part 4: Design the View

The final step is to use the remaining arrays and flag images as well everything you’ve learned to this point to build out information about each driver on the second view. Try to get yours to look as close to the example as possible, but feel free to make it your own by making design decisions or by choosing what additional data you pass to the view.

Hint: This view uses layered Stacks and various font style types. The flag was styled with:

.frame(width: 60.0, height: 40.0)
.clipShape(Rectangle())