SECRET OF CSS

Handling Cell Interactions When Using UIHostingConfiguration in iOS 16 | by Lee Kah Seng


A brief guide to selection state changes and swipe actions

Handling Cell Interactions When Using UIHostingConfiguration in iOS 16
image by author

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 UITableView or UICollectionView.

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:

1*qT O48pZsdrZZcCmmPmaOQ

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 UserInteractionCell.

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.

Disabling the UICollectionViewListCell default selection style

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 swipeActions modifier.

Here’s how to add a “trash” button at the trailing edge of UserInteractionCell:

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 tint modifier.

Except for 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.





News Credit

%d bloggers like this: