How to format a list in iOS 15 and macOS 12
Today, I have an article about new list formatting that Apple introduced in iOS 15 (and other operating systems unveiled during WWDC 2021). It's a small but useful new feature, so without further ado, let's get started:
let list = ["apple"].formatted(.list(type: .or))
// apple
let list = ["apple", "banana"].formatted(.list(type: .or))
// apple or banana
let list = ["apple", "banana", "peach"].formatted(.list(type: .or))
// apple, banana, or peach
The new list
style automatically adjusts formatting to the number of items in the list. If we have two items, they will be separated by a conjunction. If there are more items, they will be separated by commas, and the last item will also have the conjunction. We can specify the conjunction by setting the type
argument. At the moment, we have to conjunction types .or
and .and
:
let list = ["apple", "banana", "peach"].formatted(.list(type: .and))
// apple, banana, and peach
We can also specify the width
of the conjunction:
let list = ["apple", "banana", "peach"].formatted(.list(type: .or, width: .short))
// apple, banana, or peach
let list = ["apple", "banana", "peach"].formatted(.list(type: .and, width: .short))
// apple, banana, & peach
The width
parameter defines how the conjunction will be displayed. This parameter works together with the list type
. In the code above, for the .or
type even with .short
width, we still get the or conjunction. Where for the .and
type, we get the & instead of the full and.
Of course, the formatting will also depend on the user's Locale, but this is how it behaves for en_US
.
The table below shows how different width options work with the list types:
Type / Width | .standard | .short | .narrow |
---|---|---|---|
.or | apple, banana, or peach | apple, banana, or peach | apple, banana, or peach |
.and | apple, banana, and peach | apple, banana, & peach | apple, banana, peach |
Those are the basics of the list formatting, but that's not all we can do with it. There is one other parameter - .memberStyle
- which allows us to customize each individual value in the list:
let list2 = [25, 50, 75, 100].formatted(.list(memberStyle: .percent, type: .or))
// 25%, 50%, 75%, or 100%
For members, we can use all the format styles built into the SDK, like .dateTime
or .currency()
. If we need more customization, we can always create the custom style.
That's it. I hope this short article was helpful. If you liked it, please consider checking other articles related to formatting in iOS 15, like this one: