How to add and customize List row separators in SwiftUI

Customizing how a list is displayed has never been easier than with SwiftUI. Two new modifiers have been introduced to customize the list row separator's color and its visibility. Let's see how to use them!

 Customize list row separators.

Only on iOS 15 and higher

The new modifiers discussed in this tutorial are only supported in applications running on iOS 15.0 and higher. You'll need Xcode 13 and need to set your Xcode project's iOS target version to iOS 15.0 or higher, or wrap the code presented in this section in an if #available(iOS 15.0, *).

Create a list

Before learning how to use the new modifiers, we'll need to create an array we can iterate through first. We'll create a simple Author model with an id and a name, and right below, we'll create an array containing four authors.

struct Author: Identifiable {
    var id = UUID()
    var name: String
}

var authors = [Author(name: "Pranzo"), Author(name: "John Snow"), Author(name: "Emmi"), Author(name: "Selena")]

..

Let's call the authors array in our view and use it in our List. For each author, we'll display the name.

List(authors) {
		Text($0.name)
}

..

List row separator tint

• By default, the list row separator is grey. Starting iOS 15, we can now change its tint color with the new listRowSeparatorTint(_:edges:) modifier. 
• The first argument is the color you wish to apply to the row separator. 
• There's also an optional second argument: the edges on which the row separator tint color should be applied. By default, it's applied to all edges.

Text($0.name)
		.listRowSeparatorTint(.cyan)

..

List row separator visibility

We can also add the listRowSeparator(_:edges:) modifier to each label in our List, to change the row separator's visibility. To hide the row separator, pass in the hidden argument. Hiding the row separator on some specific edges is also possible by passing a second argument. By default, the modifier is applied on all edges.

Text($0.name)
		.listRowSeparator(.hidden)

..

Demo

To add and customize row separators in a List view in SwiftUI:

struct MyListView: View {
    let items = ["Item 1", "Item 2", "Item 3", "Item 4"]

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
            .listRowSeparator(.hidden)
            .listRowBackground(Color.clear)
        }
        .onAppear {
            UITableView.appearance().separatorStyle = .singleLine
            UITableView.appearance().separatorColor = .red
        }
    }
}

In this example, we have a List view that shows a list of items. We use a ForEach loop to iterate through the items and display each item as a Text view.

To add row separators, we use the listRowSeparator and listRowBackground modifiers on the ForEach loop. The listRowSeparator modifier takes a parameter of type ListRowSeparator, which determines the style of the row separator. In this case, we set it to .hidden, which hides the row separator.

The listRowBackground modifier takes a parameter of type View, which is used as the background for the row. In this case, we set it to Color.clear, which makes the row background transparent.

To customize the separator style, we use the onAppear modifier on the List view to set the appearance of the underlying UITableView. We set the separator style to .singleLine and the separator color to .red. This will make the row separators visible and colored red.

This is just one example of how to customize row separators in SwiftUI. There are many other ways to do it, depending on your specific needs and use case.

..