How to set image and label in trailing swipe action with custom font (iOS11)

Hello world!!! Today I will talk about trailing swipe action in UITableView. This feature will help user actions easily within list view.

The content in this blog includes

• What is trailing swipe action
• Custom font problem
• How to fix it

What is trailing swipe action

For each row in table view, user can swipe horizontal from the right of list view to show action menu and we can custom them.

Technically, we need to use tableView(_:trailingSwipeActionsConfigurationForRowAt:) in table view delegate

We can useUISwipeActionsConfiguration and UIContextualAction to return swipe actions

Custom font problem

At first, I have a requirement from product owner that they need to show trailing swipe action in our list view, I think “Oh it’s so easy, Apple has provided this action for us” but I was wrong. 😢😢😢

If you set title and image in UIContextualAction, you will get screen like below picture that it look so fine, right?

But I got the problem which is I can’t customize font in UIContextualAction.

I try to find the solution and finally I found the way to solved this problem.

How to fix it

1. I created a label with custom font and image
2. I combined label and image to one image and set the image to UIContextualAction

let’s see the code

• The part of UITableViewDelegate

• The part of combination between label and image

The result

Let’s try it yourself!

I hope this blog will give the benefit for you guys. If you have any question, feel free to comment below. 🤗