Styling List Views
The Ultimate Guide to SwiftUI List Views - Part 3
Lists offer a wide range of styling options, and with SwiftUI 3, it is now possible to configure almost all aspects of list views:
- the overall appearance of the list itself (i.e. the list style)
- the look of the list cells
- the dividers (finally!)
- … and much more
In this part of the series, we’re going to look at what’s possible.
The overall look and feel of list views can be controlled with the
.listStyle view modifier. SwiftUI supports five different looks:
If you don’t provide a style, SwiftUI will assume
.automatic. On iOS,
.insetGrouped have the same look.
Instead of trying to describe in words how each of the styles look like, here is an image that shows each of the styles.
Headers and footers
All of the
List view styles support headers and footers. To specify a header and / or footer for a section, use one of the constructors that take a
It seems like my favourite way of creating headers and footers has been marked for deprecation:
Here is my preferred way of setting up header and footer for a section:
And here is the new way of doing the same:
I’ll leave it up to you to decide which one looks cleaner - when executed, they do exactly the same.
Designing custom cells used to be a pretty complicated affair in the early days of
UITableViewController, and thankfully, things have gotten a lot easier since then.
In SwiftUI, designing custom
List rows is easy to get started (just use a plain
Text view to represent the current item), but the possibilities are endless, as you can make use of SwiftUI’s flexible stack-based layout system. For a general introduction to building custom
List rows, check out the first part of this series, which covers some basic techniques.
In addition, SwiftUI supports a number of ways for styling common aspects of
List rows, such as their background, their inset, accent color, tint, and badges.
Here is a code snippet that shows how you can configure a list row:
As any designer will be able to tell you, the space between items is as important as the items themselves. With SwiftUI 3, it is now possible to influence the style of row separators and section separators: both the tint color and the visibility can be controlled. SwiftUI’s flexible DSL makes it easy to control this for an entire
List view or for individual rows and sections.
To control the appearance of row separators, you can use
.listRowSeparatorTint(). You can specify which edges (
.bottom) you want to configure. If you don’t provide any value for the
edges parameter, both top and bottom will be modified.
To control the appearance of section separators, use
.listSectionSeparatorTint(). Just like the view modifiers for list rows, both of these view modifiers support specifying the edges you’d like to modify.
If you’ve worked with SwiftUI since its early days, you will appreciate that it now supports styling all aspects of
List views, from the overall look and feel down to the tint color and visibility of the list item separators.
In the next episode, we will look at a feature that puts a lot of power into your user’s hands (or rather fingertips): swipe actions! Implementing swipe actions used to be notoriously difficult in the past, and it doesn’t come at any surprise that SwiftUI is making this easier than ever before.
Thanks for reading, and until next time!