A brief guide to selection state changes and swipe actions
UIHostingConfiguration is one of the tools introduced in iOS 16 to help developers add SwiftUI views into their UIKit apps. By using
UIHostingConfiguration, developers can easily create a custom cell using SwiftUI and render it in a
In my previous article, I discussed in depth how to use
UIHostingConfiguration to define the layout and content of a custom cell. In this article, let’s take things one step further and examine its user interaction aspect. Here’s what you will learn:
- Handling cell’s selection state change
- Handling cell’s swipe actions
So, without wasting much time, let’s dive into the details.
As usual, I will use a sample app to showcase the topics I will cover. Here’s what we are going to build:
To get things started, I have pre-built the list above (without any of the user interactions handling) using
UIHostingConfiguration. Feel free to use the code below to help you get started and follow along with this tutorial:
If you are having difficulties understanding the code above, I highly encourage you to first read my previous blog post, “How To Create Custom UICollectionViewListCell Using SwiftUI.”
Before getting into state change handling, we must first give
UserInteractionCell a variable representing its state. After that, we can set the cell’s styling based on the state variable we just defined. Here’s the code:
To get notified when the cell’s state changes, we can use the cell’s
configurationUpdateHandler introduced in iOS 15. The idea is to update the cell’s content configuration with a new
UIHostingConfiguration instance every time the cell’s state changes.
Notice that I have updated the
createHostingConfiguration(for:) method to be able to accept the
state variable so that we can use it to initialize the
Do keep in mind that the
configurationUpdateHandler is mainly used for updating the cell’s UI and layout when its state changes. Cell interactions such as tap handling will still be handled by the collection view or table view. In other words, use the usual
collectionView(_:didSelectItemAt:) delegate method to handle user tap actions.
Disabling the cell’s default selection style
If you go ahead and tap on one of the cells, you will notice that the selected cell is highlighted in gray.
This is the default behavior that comes along with
UICollectionViewListCell. For the sake of demonstration, let’s try to disable this behavior.
The idea is pretty simple. All we need to do is to set the cell’s background color to
.systemBackground regardless of the state of the cell. For that, we can leverage the
UIBackgroundConfiguration introduced in iOS 15.
That’s it for handling selection state change. Let’s move on!
The way to handle swipe actions on a cell created using
UIHostingConfiguration is the same as handling swipe actions on a SwiftUI list row — by using the
Here’s how to add a “trash” button at the trailing edge of
The code above is pretty self-explanatory. However, do notice that we need to manually disable the cell’s full swipe ability as it is enabled by default. Also notice that by setting the button’s role to
.destructive will result in a red color action button.
Next, let’s try adding multiple buttons at the cell’s leading edge. As you might have guessed, all we need to do is to wrap two buttons within the
swipeActions’s content closure.
For the sample code above, two things are noteworthy.
First, we can display text (instead of an icon) on an action button. This can be easily done by giving the button a title. The second is that the action button’s background color can be easily changed by using the
UIHostingConfiguration, most of the things presented in this article are not new in iOS 16. If you have used SwiftUI for quite some time, they should look fairly familiar to you.
On the other hand, if you are still using UIKit in your day-to-day development work but would like to start adopting SwiftUI into your development routine,
UIHostingConfiguration will be a great starting point.
You can get the full sample code here.
I hope you enjoyed reading this article. Thanks for reading.
Want to Connect?Feel free to follow me on Twitter and Medium so you won’t miss out on any of my upcoming iOS development-related articles.