5 SwiftUI List Tricks for iOS 14+
Navigation, grouped styling, bulk deletion, expandable lists, and sections
List is a great SwiftUI component to create a list view that contains multiple row views. It’s quite similar to UITableView, but it has a totally different implementation (no more delegate and data source methods).
List in SwiftUI uses declarative code, which means that it will observe the data changes and efficiently update the rendered result solely based on what has changed.
In this article, we will discuss five basic features provided in the List:
- Multiple sections
- Grouped and inset
- Deleting row item (single and bulk mode)
- Expandable List
- Navigation
Know the Basics
Before we go through all those five features, let’s take a look at the basic syntax and implementation of the List.
First, create a new SwiftUI project to play around with examples.
Static List
A list where all the items are statically defined in the List closure. Add the below code to the project:
Dynamic List With Custom Row View
First, we need to create the CustomRowView struct and define simple content. Then, make it dynamic by passing an argument in List(). See the code below to show the list from bookTitles array:
Using ForEach
Take note that dynamic content can also be done using ForEach closure. Here’s an example:
Cool, I guess we are fine with the how the basic List works. Now, let’s proceed with the five List features.
1. Multiple Sections
In the below code, we will create two sections (foods and drinks) that contain dynamic items. All we need is to do the following:
2. Grouped and Inset
For grouping and inset, SwiftUI provides few options, including InsetGroupedListStyle(), GroupedListStyle(), InsetListStyle(). I personally love the InsetGroupedList Style. Its default padding is already good and clean. Here’s the code:
3. Deleting Row Item (Single and Bulk Mode)
For iOS13 and above, onDelete() is supported by default, which allows users to swipe and tap on the default “Delete” button. However, in iOS15, an update is added to List to call the new swipeActions() function as discussed in detail in this article.
Great, let’s add the onDelete() function for now. Take note that we will add the property wrapper @State to bookTitles to make it mutable within the View struct. Also, the List will automatically refresh once we updated the variable such as adding or removing items. Here’s the code to do that:
Bulk Delete
In addition, SwiftUI provides the EditButton feature which enables edit mode within the specified scope. So, we will update a bit with navigation and adding EditButton to the right top to enable the delete option for all in the list. See the below code and output:
4. Expandable List
List has a feature where it can pass the sub-items or children with the same type. Let’s take a look at the below example:
First, we will create a basic struct to be used with the mock data.
Then, add a List and pass the subItem field as the children argument. As we can see, the most important part is the data, which determines whether or not the List has its children.
5. Navigation
In this section, let’s revisit our basic dynamic list and make it clickable using NavigationLink closure.
First, we will create a simple DetailView, as shown below:
Then, update the BasicDynamicView with the following code:
Project Completed
Congratulations! Now, we have completed all the basic five features. The complete source code can be downloaded from my GitHub repository. Hopefully, it will help you learn SwiftUI and improve your iOS development skills.
Thanks for reading. Happy coding!
References
- SwiftUI List Documentation
- EditButton documentation
- List tutorial by AppCoda
- List tutorial by HackingWithSwift
- GitHub Repo
