UITableViewRowAction title as image icon instead of text

Question

I want put the icon (image) instead of text in swipe actions in tableviewCell in Swift.

But i dont how to put the image instead of title text?

My code is be

Answer 1

trailingSwipeActionsConfigurationForRowAtIndexPath works from iOS 11 only and is completely not customizable. You can change background color of a button, but you cannot add an image with you own colors even if you use UIImageRenderingModeAlwaysOriginal.

I ended up using MGSwipeTableCell.

Answer 2

Not Swift, but for anybody else who lands here looking for a solution... I've got good results with the following simple subclass:

@interface GSBTableViewRowAction : UITableViewRowAction
@property UIImage *icon;
@property UIFont *font;
+ (instancetype)rowActionWithStyle:(UITableViewRowActionStyle)style title:(NSString *)title icon:(UIImage*)icon handler:(void (^)(UITableViewRowAction *action, NSIndexPath *indexPath))handler;
@end

@implementation GSBTableViewRowAction
+ (instancetype)rowActionWithStyle:(UITableViewRowActionStyle)style title:(NSString *)title icon:(UIImage*)icon handler:(void (^)(UITableViewRowAction *action, NSIndexPath *indexPath))handler
{
    if (title.length) title = [@"\n" stringByAppendingString:title]; // move title under centerline; icon will go above
    GSBTableViewRowAction *action = [super rowActionWithStyle:style title:title handler:handler];
    action.icon = icon;
    return action;
}

- (void)_setButton:(UIButton*)button
{
    if (self.font) button.titleLabel.font = self.font;
    if (self.icon) {
        [button setImage:[self.icon imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forState:UIControlStateNormal];
        button.tintColor = button.titleLabel.textColor;
        CGSize titleSize = [button.titleLabel.text sizeWithAttributes:@{NSFontAttributeName:button.titleLabel.font}];
        button.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height/2 + 5), 0, 0, -titleSize.width); // +5px gap under icon
    }

The rowActionWithStyle:title:icon:handler is really just a convenience method - the 'secret sauce' is overriding the (private?) _setButton method [credit to Jayesh for this!].

This will give you an icon centered over the title, or just the icon alone if you leave the title nil. Unfortunately, you cant fiddle with the position of the title using button.titleEdgeInsets, like you can imageEdgeInsets, so best I can do is put the title immediately under the centerline (hence the '\n') with a small gap under the icon (5px above). Results look like

As a bonus, you can also change the title font, to say something smaller, by setting the new font property. eg the above 'Add' action was accomplished with

GSBTableViewRowAction *add = [GSBTableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal
                                                               title:@"Add"
                                                                icon:[UIImage imageNamed:@"Today-25"]
                                                             handler:^(UITableViewRowAction *action, NSIndexPath *indexPath){
                                                                 [self addToCalendar:self];
                                                                 [tableView setEditing:NO animated:YES];
                                                             }];
add.font = [UIFont preferredFontForTextStyle:UIFontTextStyleFootnote];
add.backgroundColor = UIColor.orangeColor;

Caveat: _setButton is private API, so YMMV... We're all hoping Apple will expose a public API to do what they apparantly do in their Mail.app [sic]