Is there a recommended image size for UIContextualAction icons?

Question

New in iOS 11, UIContextualAction provides a convenient way to implement swipe actions on UITableView cells, with a title and/or image icon.

I haven't found any mention in the Human Interface Guidelines of the image used by UIContextualAction. Does any information exist that defines a standard size or other design guidance for this icon image?

I tried to figure this out by testing a few image sizes to see if iOS would scale it to a consistent size, but it seems to just display whatever you give it with no scaling or cropping, so that didn't provide any clues.

Why not use the images in the Mail app as a guide? Also the appropriate size for the icon will vary based on the size of your table's rows. — nathangitter, Nov 27 '17 at 01:46
Maybe you are able to use destructive style and measure size by debug view hierarchy. — Lumialxk, Nov 27 '17 at 01:59
@Lumialxk good idea, but I haven't found a way to get a UIContextualAction with destructive style to show a default icon. — Mike Mertsock, Nov 28 '17 at 17:33
@nathan I think that's the best we can do. Fwiw, Mail.app is using icons with 28pt height. Fixed height, too: the title label disappears if you reduce the cell height (e.g. by setting message preview lines to zero), but the icon is always visible and fixed size regardless of cell height. — Mike Mertsock, Nov 28 '17 at 17:35

score 21 · Accepted Answer · edited Feb 27 '19 at 13:18

21

I use 30 by 30. You can render your image down to that size in code easily enough.

    let d = UIContextualAction(style: .destructive, title: nil) {
        action, view, completion in
        // ... whatever ...
        completion(true)
    }
    d.image = UIGraphicsImageRenderer(size: CGSize(width: 30, height: 30)).image { _ in
        UIImage(named: "trash")?.draw(in: CGRect(x: 0, y: 0, width: 30, height: 30))
    }

edited Feb 27 '19 at 13:18

Jonas Franz

555
1
8
18

answered Nov 27 '17 at 01:59

matt

515,959
87
875
1,141

But perhaps what Apple really wants you to do nowadays is supply a vector-based image, which will be resized automatically – matt Nov 28 '17 at 02:57
Agreed that vector images are easier when possible. – Mike Mertsock Nov 28 '17 at 17:29
1

I couldn't get a vector image to resize in the UIContextualAction. I experimented with a 100x100 vector image (PDF), added it to my xcassets with Resizing checked to "Preserve Vector Data" and set Scales to "Single Scale" and it displayed as 100x100. Maybe I missed a setting? – Mark Moeykens Feb 16 '18 at 04:27

score 2 · Answer 2 · answered Mar 30 '18 at 09:49

There is no recommendation here, since a standard size does not make much sense given the variety of UITableViewCell sizes – it's depending on the concrete app and device it's running on. I recommend you resize the icon on runtime – don't forget to leave a bit of room to breath (vertical margin = 8px or so).

score 1 · Answer 3 · answered Jun 05 '18 at 06:04

we can take size 30 by 30 , is the standard size , we can take more than 30 pixel , depending on the size of the screen.

Type of image that is support

func tableView(_ tableView: UITableView,
                   trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?
    {
        // Write action code for the trash
        let TrashAction = UIContextualAction(style: .normal, title:  "Delete", handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
            print("Update action ...")
                    success(true)
        })
       TrashAction.backgroundColor = .white
       TrashAction.image =  UIImage(imagename: “dustbin”)           
       return UISwipeActionsConfiguration(actions: [TrashAction])
    }

Variables should start with a lower case letter. `TrashAction` implies it's a class / struct as is instantiable. — user1898712, Nov 16 '22 at 16:12

Is there a recommended image size for UIContextualAction icons?

3 Answers3

Linked