Creating a list

One of the most common UI elements in an iOS app is a list, or in UIKit terminology, a TableView. The TableView is a great example of a simple feature that’s an absolute pain to build and can require both code and a storyboard. Thankfully SwiftUI replaced this with a very simple view called List(). A list view can be a simple group that contains several items, or with some attributes the list can repeat a series of items from a predefined variable.

For example if I wanted to display a list of names in the typical iOS list style, the manual way is to have a group of Text() views with the names.

List {
    Text("Latte")
    Text("Flat White")
    Text("Cortado")
    Text("Gibraltar")
    Text("Espresso")
    Text("Ristretto")
    Text("Cappuccino")
    Text("Macchiato")
    Text("Café au Lait")
    Text("Affogato")
}

Adding any number of modifiers to any of those list items is possible. Of course while this is not practical for regular development, a manual list serves its purpose in a prototype. In a future course we’ll display lists, some pulled from regular data and some that can easily be written out manually, especially if you don’t want to avoid variables. An ecommerce app may have a category list which may simply be hardcoded for faster prototyping.

List {
    Text("Coffee")
    Text("Brewers")
    Text("Grinders")
    Text("Accessories")
    Text("Merch")
}

Let’s step into a little bit of Swift the simplify the example by making it dynamic. You can store all those names in a single variable called characters, a comma-separated list of strings, then use List to loop through the list in the variable. I am actually using the term variable loosely here—we are creating a container (called an array or object) that we’re putting data into.

There are two attributes that we define for the list—our characters variable and the part of the variable we want to identify as unique, which here is itself. In a more complicated scenario, each name in the characters variable might have more data points including an unique ID for each person which we might use for the id: attribute. Swift let’s us keep things simple though.

If you look at Apple’s own SwiftUI tutorial on the List, you will learn that lists need something unique to help identify one element from another. So we might define an ID field that’s unique, or in this case we know each name is different.

With each pass through the characters variable, the List will pick out one element which we’ve called character as it’s the singular form. Then to display the name, we pass that singular character into the Text() view. And the resulting layout is the same.

struct ContentView: View {

    var drinks = ["Latte", "Flat White", "Cortado", "Gibraltar", "Espresso", 
    "Ristretto", "Cappuccino", "Macchiato", "Café au Lait", "Affogato"]

    var body: some View {

        List(drinks, id: \.self) { drink in
            Text(drink)
        }
    }
}
                      

Lists are just one common building block you may use to achieve your design. Similar to other views, the List can be styled to match your design. Or you might find another way to make a repeating group of components. All things we’ll explore in future courses!