UIContextualAction icon and text alignment

Question

While testing our app we came across an interesting bug. We have some swipe actions in our table configured like so:

let retryAction = UIContextualAction(style: .destructive, title: "Remove")
retryAction.image = UIImage(named: "iconUploadRemove")

let retryAction = UIContextualAction(style: .normal, title: "Retry")
retryAction.image = UIImage(named: "iconUploadRetry")

Since we set an image, users would normally see icons when they swipe on the table row:Swipe Action with Icons

But if a user increases their text size

Then the action titles show up along with the icons

Having both text and icon isn't necessarily a problem except for the alignment/spacing of the text between the two actions. It appears to be the length of the string that is causing this. If I set the text to the same string, both actions are aligned equally. I know I can set the title to nil, which would prevent the text from appearing when large text is enabled.

But why does the text show up in this mode? And is it possible to have both the text and the icon display correctly aligned on each action button?

Hi, Can you please tell me the size of the icon you set in the UIContextualAction. i am stuck to set image in the UIContextualAction..Please see my question post ..https://stackoverflow.com/questions/50677458/how-can-add-image-in-uicontextualaction-in-uitableview-datasource-method?noredirect=1#comment88364890_50677458 — Niraj Paul, Jun 04 '18 at 10:27

score 2 · Answer 1 · answered Jul 20 '18 at 12:35

I ran into the exact same issue today. The root cause is that UIKit is allowing the UILabel to go on 2 lines even if it's not needed:

This would be the proper use case:

So the only solutions I see are ugly. Overriding, swizzling, drilling through the subviews until we find the label subclass, etc... And I am not clear what (if not all) solution would get you rejected from the store.

Or simply not use this new iOS 11 API and stick with the old one UITableViewRowAction.

score 2 · Answer 2 · answered Feb 22 '19 at 14:23

2

You can make those text aligned without method swizzling.

To achieve it, you have to set all of your action images with same height. You can do this at runtime:

    var actionImages = ["TrashCan", "Folder"].map { UIImage(named: $0)! }
    let maxHeight = actionImages.map { $0.size.height }.max()!

    for (index, image) in actionImages.enumerated() where image.size.height < maxHeight {
        let size = CGSize(width: image.size.width, height: maxHeight)
        actionImages[index] = UIGraphicsImageRenderer(size: size).image { context in
            var centralizedRect = CGRect(origin: .zero, size: image.size)
            centralizedRect.origin.y = (maxHeight - image.size.height) / 2
            image.draw(in: centralizedRect)
        }
    }

    // set images to your UIContextualAction…

The result is something like this:

Still not perfect (too much space below the text), but bearable.

answered Feb 22 '19 at 14:23

Jonny

1,969
18
25

can you please show how to add both image and text in a contextual action. – Ambrose Jesuraj Sep 04 '20 at 03:28
1

@AmbroseJesuraj you just set both `title` and `image` of `UIContextualAction`. `title` might not shown if vertical space is limited. – Jonny Sep 07 '20 at 13:31
Yes I set both, but in UI it shows the icons only. so that I am asking this to you. how to get more vertical space. – Ambrose Jesuraj Sep 07 '20 at 14:16
1

@AmbroseJesuraj make your table view cell taller. – Jonny Sep 08 '20 at 04:35
I made my table's cell taller but still the icon only shown – Ambrose Jesuraj Sep 08 '20 at 06:39
1

@AmbroseJesuraj Not tall enough I guess. Otherwise file a bug report to Apple. – Jonny Sep 08 '20 at 06:57
@Johnny I make my cell taller, now it works fine. – Ambrose Jesuraj Feb 24 '21 at 09:23

score 1 · Accepted Answer · answered Feb 13 '18 at 13:40

1

It doesn't appear there is an answer to why the text appears, and appears mis-aligned.

For anyone who comes across this question, we ended up setting the titles to nil for these buttons to keep them "icon only".

answered Feb 13 '18 at 13:40

TodayMorning

201
2
8

score 1 · Answer 4 · answered Jul 12 '18 at 17:43

1

you need to play with image PNG. make its canvas size increased / adjusted (white space around) until you get result

In my case I set

Cell height : 92 Icon image width : 32 Icon image height : 40

and all is perfectly aligned finally.

answered Jul 12 '18 at 17:43

Mani

101
10

Yes you are correct, I am also setting the height > 95 – Ambrose Jesuraj Feb 24 '21 at 09:24

UIContextualAction icon and text alignment

4 Answers4