The code in this chapter is based on Xcode 13 and iOS 15.

You can find the code for this book in this book's GitHub repository: https://github.com/PacktPublishing/SwiftUI-Cookbook-2nd-Edition/tree/main/Chapter02-Lists-and-ScrollViews.

You can use SwiftUI scroll views when the content to be displayed cannot fit in its container. Scroll views create scrolling content where users can use gestures to bring new content into the section of the screen where it can be viewed. Scroll views are vertical by default but can be made to scroll horizontally or vertically.

In this recipe, we will learn how to use horizontal and vertical scroll views.

Getting ready

Let's start by creating a SwiftUI project called WeScroll.

Optional: If you don't have it yet, download the San Francisco Symbols (SF Symbols) app here: https://developer.apple.com/sf-symbols/.

As we mentioned in Chapter 1, Using the Basic SwiftUI Views and Controls, SF Symbols is a set of over 3,200 symbols provided by Apple.

How to do it…

Let's learn how scroll views work by implementing horizontal and vertical scroll views that display SF symbols for alphabet characters A - P. Here are the steps:

1. Add an array variable to our ContentView struct that contains the letters a to p:

       let letters =
       ["a","b","c","d","e","f","g","h",
        "i","j","k","l","m","n","o","p"]

2. Replace the original text view with a VStack, a ScrollView, and a ForEach struct:

       var body: some View {
           VStack{
               ScrollView {
                   ForEach(self.letters, id: \.self){
                           letter in
                           Image(systemName: letter)
                           .font(.largeTitle)
                           .foregroundColor(Color.yellow)
                           .frame(width: 50, height: 50)
                           .background(Color.blue)
                           .symbolVariant(.circle.fill)
                       }
               }
               .frame(width:50, height:200)
               
               ScrollView(.horizontal, showsIndicators:
                  false) {
                   HStack{
                       ForEach(self.letters, id: \.self){
                          name in
                          Image(systemName: name)
                           .font(.largeTitle)
                           .foregroundColor(Color.yellow)
                           .frame(width: 50, height: 50)
                           .background(Color.blue)
                           .symbolVariant(.circle.fill)
                       }
                   }
               }
           }
       }

3. Run/resume the Xcode preview from the canvas window. It should look as follows:

Figure 2.1 – The WeScroll app with horizontal and vertical scroll views

How it works…

By default, scroll views display items vertically. Therefore, our first scroll view displays its content along the vertical axis without requiring us to specify the axis.

In this recipe, we also introduce the ForEach structure, which computes views on-demand based on an underlying collection of identified data. In this case, the ForEach structure iterates over a static array of alphabet characters and displays the SF Symbols of the said characters.

We provided two arguments to the ForEach structure: the collection we want to iterate over and an id. This id helps us distinguish between the items in the collection and should be unique. Using \.self as id, we indicated that the alphabet characters we are using are unique and will not be repeated in this List. We used unique items because SwiftUI expects each row to be uniquely identifiable and will not run as expected otherwise.

You can use the ForEach structure without specifying the id argument if your collection conforms to the Identifiable protocol.

Moving on to the second scroll view, it uses two arguments: axis and showIndicators. The .horizontal axis's enum indicates we want the content to scroll horizontally, while the .showIdicators: false argument prevents the scrollbar indicator from appearing in the view.

See also

Apple's documentation on scroll views: https://developer.apple.com/documentation/swiftui/scrollview

List views are like scroll views in that they are used to display a collection of items. However, List views are better for dealing with larger datasets because they do not load the entirety of the datasets in memory.

In this recipe, we will create an app the uses static lists to display sample weather data for various cities.

Getting ready

Let's start by creating a new SwiftUI app called StaticList.

How to do it…

We'll create a struct to hold weather information and an array of several cities' weather data. We'll then use a List view to display all the content. The steps are as follows:

1. Open the ContentView.swift file and add the WeatherInfo struct right above the ContentView struct:

   struct WeatherInfo: Identifiable {
       var id = UUID()
       var image: String
       var temp: Int
       var city: String
   }

2. Add the weatherData property to the ContentView struct. weatherData contains an array of WeatherInfo items:

       let weatherData: [WeatherInfo] = [
       WeatherInfo(image: "snow", temp: 5, city:"New
         York"),
       WeatherInfo(image: "cloud", temp:5, city:"Kansas
         City"),
       WeatherInfo(image: "sun.max", temp: 80, city:"San
         Francisco"),
       WeatherInfo(image: "snow", temp: 5,
         city:"Chicago"),
       WeatherInfo(image: "cloud.rain", temp: 49,
         city:"Washington DC"),
       WeatherInfo(image: "cloud.heavyrain", temp: 60,
         city:"Seattle"),
       WeatherInfo(image: "sun.min", temp: 75,
         city:"Baltimore"),
       WeatherInfo(image: "sun.dust", temp: 65,
        city:"Austin"),
       WeatherInfo(image: "sunset", temp: 78,
        city:"Houston"),
       WeatherInfo(image: "moon", temp: 80,
        city:"Boston"),
       WeatherInfo(image: "moon.circle", temp: 45,
        city:"denver"),
       WeatherInfo(image: "cloud.snow", temp: 8,
        city:"Philadelphia"),
       WeatherInfo(image: "cloud.hail", temp: 5,
        city:"Memphis"),
       WeatherInfo(image: "cloud.sleet", temp:5,
        city:"Nashville"),
       WeatherInfo(image: "sun.max", temp: 80, city:"San
        Francisco"),
       WeatherInfo(image: "cloud.sun", temp: 5,
        city:"Atlanta"),
       WeatherInfo(image: "wind", temp: 88, city:"Las
        Vegas"),
       WeatherInfo(image: "cloud.rain", temp: 60,
        city:"Phoenix"),
       ]

3. Add the List view to the ContentView body and use the ForEach structure to iterate over our weatherData collection. Add some font and padding modifiers to improve the styling too:

           List {
               ForEach(self.weatherData){ weather in
                   HStack {
                       Image(systemName: weather.image)
                        .frame(width: 50, alignment:
                          .leading)
                       Text("\(weather.temp)°F")
                        .frame(width: 80, alignment:
                          .leading)
                       Text(weather.city)
                   }
                   .font(.system(size: 25))
                   .padding()
               }
           }

   The resulting preview should look as follows:

Figure 2.2 – Implementing static lists

How it works…

First, we created the WeatherInfo struct, which contains properties we'd like to use, such as images, temperature (temperate), and city. Notice that the WeatherInfo struct implements the Identifiable protocol. Making the struct conform to the Identifiable protocol allows us to use the data in a ForEach structure without specifying an id parameter. To conform to the Identifiable protocol, we added a unique property to our struct called id, a property whose value is generated by the UUID() function.

The basic form of a static list is composed of a List view and some other views, as shown here:

List {
 Text("Element one")
 Text("Element two")
}

In this recipe, we went a step further and used the ForEach struct to iterate through an array of identifiable elements stored in the weatherData variable. We wanted to display the data in each list item horizontally, so we displayed the contents in an HStack. Our image, temperature, and city are displayed using image and text views.

The weather image names are SF Symbol variants, so using them with an Image view systemName parameter displays the corresponding SF Symbol. You can read more about SF Symbols in Chapter 1, Using the Basic SwiftUI Views and Controls.

The number of lines of code required to display items in a List view row could vary from one to several lines of code. Repeating the code several times or in several places increases the chance of an error occurring and potentially becomes very cumbersome to maintain. One change would require updating the code in several different locations or files.

A custom list row can be used to solve this problem. This custom row can be written once and used in several places, thereby improving maintainability and encouraging reuse.

Let's find out how to create custom list rows.

Getting ready

Let's start by creating a new SwiftUI app named CustomRows.

How to do it…

We will reorganize the code in our static lists to make it more modular. We'll create a separate file to hold the WeatherInfo struct, a separate SwiftUI file for the custom view, WeatherRow, and finally, we'll implement the components in the ContentView.swift file. The steps are as follows:

1. Create a new Swift file called WeatherInfo by going to File | New | File | Swift File (or by using the Command () + N keys).
2. Create a WeatherInfo struct within the newly created file:

   struct WeatherInfo: Identifiable {
       var id = UUID()
       var image: String
       var temp: Int
       var city: String
   }

3. Also, add a weatherData variable that holds an array of WeatherInfo:

   let weatherData: [WeatherInfo] = [
        WeatherInfo(image: "snow", temp: 5, city:"New
          York"),
        WeatherInfo(image: "cloud", temp:5, city:"Kansas
          City"),
        WeatherInfo(image: "sun.max", temp: 80, city:"San
          Francisco"),
        WeatherInfo(image: "snow", temp: 5,
          city:"Chicago"),
        WeatherInfo(image: "cloud.rain", temp: 49,
          city:"Washington DC"),
        WeatherInfo(image: "cloud.heavyrain", temp: 60,
          city:"Seattle"),
        WeatherInfo(image: "sun.min", temp: 75,
          city:"Baltimore"),
        WeatherInfo(image: "sun.dust", temp: 65,
          city:"Austin"),
        WeatherInfo(image: "sunset", temp: 78,
          city:"Houston"),
        WeatherInfo(image: "moon", temp: 80,
          city:"Boston"),
        WeatherInfo(image: "moon.circle", temp: 45,
          city:"denver"),
        WeatherInfo(image: "cloud.snow", temp: 8,
          city:"Philadelphia"),
        WeatherInfo(image: "cloud.hail", temp: 5,
          city:"Memphis"),
        WeatherInfo(image: "cloud.sleet", temp:5,
          city:"Nashville"),
        WeatherInfo(image: "sun.max", temp: 80, city:"San
          Francisco"),
        WeatherInfo(image: "cloud.sun", temp: 5,
          city:"Atlanta"),
        WeatherInfo(image: "wind", temp: 88, city:"Las
           Vegas"),
        WeatherInfo(image: "cloud.rain", temp: 60,
           city:"Phoenix"),
        ]

4. Create a new SwiftUI file by selecting File | New | File | SwiftUI View from the Xcode menu or by using the Command () + N key combination. Name the file WeatherRow.
5. Add the following weather row design to our new SwiftUI view:

   struct WeatherRow: View {
       var weather: WeatherInfo
       var body: some View {
           HStack {
               Image(systemName: weather.image)
                   .frame(width: 50, alignment: .leading)
               Text("\(weather.temp)°F")
                   .frame(width: 80, alignment: .leading)
               Text(weather.city)
           }
           .font(.system(size: 25))
           .padding()
       }
   }

6. To preview or update the row design, add a sample WeatherInfo instance to the WeatherRow_Previews function:

   struct WeatherRow_Previews: PreviewProvider {
       static var previews: some View {
           WeatherRow(weather: WeatherInfo(image: "snow",
           temp: 5, city:"New York"))
       }
   }

   The resulting WeatherRow.swift canvas preview should look as follows:

   

   Figure 2.3 – WeatherRow row preview

7. Open the ContentView.swift file and create a list to display data using the WeatherRow component:

   struct ContentView: View {
       var body: some View {
           List{
               ForEach(weatherData){weather in
                   WeatherRow(weather: weather)
               }
           }
       }
   }

   The resulting canvas preview should look as follows:

Figure 2.4 – CustomRow App preview

Run the app on a device or run a live preview to scroll through and test the app's functionality.

How it works…

WeatherInfo.swift is the model file containing a blueprint of what we want each instance of our weatherInfo struct to contain. We also instantiated an array of the WeatherInfo struct, weatherData, that can be used in other parts of the project previewing and testing areas as we build.

The WeatherRow SwiftUI file is our focus for this recipe. By using this file, we can extract the design of a list row into a separate file and reuse the design in other sections of our project. We added a weather property to our WeatherRow that will hold the WeatherInfo arguments that are passed to our WeatherRow view.

As in the previous recipe, we want the content of each row to be displayed horizontally next to each other, so we enclosed the components related to our weather variable in an HStack.

Important Note

The weatherData array is only necessary during development and should be removed before deployment if such data is obtained at runtime through API calls.

The most common actions users might want to be able to perform on a list include adding, editing, or deleting items.

In this recipe, we'll go over the process of implementing those actions on a SwiftUI list.

Getting ready

Create a new SwiftUI project and call it ListRowAdd.

How to do it…

Let's create a list with a button at the top that can be used to add new rows to the list. The steps are as follows:

1. Create a state variable in the ContentView struct that holds an array of numbers:

    @State var numbers = [1,2,3,4]

2. Add a NavigationView struct and a List view to the ContentView struct's body:

           NavigationView{
               List{
                   ForEach(self.numbers, id:\.self){
                       number in
                       Text("\(number)")
                   }
               }
           }

3. Add a .navigationBarTitle modifier to the list with a title:

   .navigationBarTitle("Number List", displayMode:
     .inline)

4. Add a navigationBarItems modifier to the list with a function to trigger an element being added to the row:

      .navigationBarItems(trailing: Button("Add", action:
        addItemToRow))

5. Implement the addItemToRow function and place it immediately after the body view's closing brace:

       private func addItemToRow() {
           self.numbers.append(Int.random(in: 5 ..< 100))
       }

   The preview should look as follows:

Figure 2.5 – ListRowAdd preview

You can now run the preview and click the Add button to add new items to the list.

How it works…

Our state variable, numbers, holds an array of numbers. We made it a state variable so that the view that's created by our ForEach struct gets updated each time a new number is added to the array.

The .navigationBarTitle ("Number List," displayMode: .inline) modifier adds a title to the top of the list and within the standard bounds of the navigation bar. The display mode is optional, so you could remove it to display the title more prominently. Other display modes include automatic, to inherit from the previous navigation item, and large, to display the title within an expanded navigation bar.

The .navigationbartItems(…) modifier adds a button to the trailing end of the navigation section. The button calls the addItemToRow function when clicked.

Finally, the addItemToRow function generates a random number between 0-99 and appends it to the numbers array. The view gets automatically updated since the numbers variable is a state variable and a change in its state triggers a view refresh.

Important Note

In our list's ForEach struct, we used \.self as our id parameter. However, we may end up with duplicate numbers in our list as we generate more items. Identifiers should be unique, so using values that could be duplicated may lead to unexpected behaviors. Remember to ONLY use unique identifiers for apps meant to be deployed to users.

So far, we've learned how to add new rows to a list. Now, let's find out how to use a swipe motion to delete items one at a time.

Getting ready

Create a new SwiftUI app called ListRowDelete.

How to do it…

We will create a list of items and use the list view's onDelete modifier to delete rows. The steps are as follows:

1. Add a state variable to the ContentView struct called countries and initialize it with an array of country names:

       @State var countries = ["USA", "Canada",
        "England", "Cameroon", "South Africa", "Mexico" ,
        "Japan", "South Korea"]

2. Within the body variable, add a navigationView and a List view that displays our array of countries. Also, include the onDelete modifier at the end of the ForEach structure:

           NavigationView{
               List {
                   ForEach(countries, id: \.self) {
                       country in
                       Text(country)
                   }
                   .onDelete(perform: self.deleteItem)
               }
               .navigationBarTitle("Countries",
                 displayMode: .inline)
           }

3. Below the body variable's closing brace, add the deleteItem function:

       private func deleteItem(at indexSet: IndexSet){
           self.countries.remove(atOffsets: indexSet)
       }

   The resulting preview should look as follows:

Figure 2.6 – ListRowDelete in action

Run the canvas preview and swipe right to left on a list row. The Delete button will appear and can be clicked to delete an item from the list.

How it works…

In this recipe, we introduced the .onDelete modifier, whose perform parameter takes a function that will be executed when clicked. In this case, deleting an item triggers the execution of our deleteItem function.

The deleteItem function takes a single parameter, IndexSet, which is the index of the row to be deleted. The onDelete modifier automatically passes the index of the item to be deleted.

There's more…

Deleting an item from a List view can also be performed by embedding the list navigation view and adding an EditButton component.