UITableViewRowAction header as image icon instead of text

Question

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

But I do not put the image instead of the title text?

My code is below:

func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [AnyObject]? { var shareAction = UITableViewRowAction(style: UITableViewRowActionStyle.Default, title: "Share" , handler: { (action:UITableViewRowAction!, indexPath:NSIndexPath!) -> Void in // 2 let shareMenu = UIAlertController(title: nil, message: "Share using", preferredStyle: .ActionSheet) let twitterAction = UIAlertAction(title: "Twitter", style: UIAlertActionStyle.Default, handler: nil) let cancelAction = UIAlertAction(title: "Cancel", style: UIAlertActionStyle.Cancel, handler: nil) shareMenu.addAction(twitterAction) shareMenu.addAction(cancelAction) self.presentViewController(shareMenu, animated: true, completion: nil) }) // 3 var rateAction = (style: UITableViewRowActionStyle.Default, title: "rate",im , handler: { (action:UITableViewRowAction!, indexPath:NSIndexPath!) -> Void in // 4 let rateMenu = UIAlertController(title: nil, message: "Rate this App", preferredStyle: .ActionSheet) let appRateAction = UIAlertAction(title: "Rate", style: UIAlertActionStyle.Default, handler: nil) let cancelAction = UIAlertAction(title: "Cancel", style: UIAlertActionStyle.Cancel, handler: nil) rateMenu.addAction(appRateAction) rateMenu.addAction(cancelAction) self.presentViewController(rateMenu, animated: true, completion: nil) }) // 5 return [shareAction,rateAction] } 

Can you help someone with this?

Thank you in advance

Answer 1

There are two ways to achieve this.

• Use Unicode characters in the text if it serves your purpose. However, Unicode characters are limited.
• Use emojis provided that it serves your purpose.

This is how you do it in code

  override func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]? { let delete = UITableViewRowAction(style: .Default, title: "\u{267A}\n Delete") { action, index in print("more button tapped") self.tableView(tableView, commitEditingStyle: UITableViewCellEditingStyle.Delete, forRowAtIndexPath: indexPath) } delete.backgroundColor = UIColor(rgba: "#ef3340") let apply = UITableViewRowAction(style: .Default, title: "\u{2606}\n Like") { action, index in print("favorite button tapped") self.tableView(tableView, commitEditingStyle: UITableViewCellEditingStyle.Insert, forRowAtIndexPath: indexPath) } apply.backgroundColor = UIColor.orangeColor() let take = UITableViewRowAction(style: .Normal, title: "\u{2605}\n Rate") { action, index in print("share button tapped") self.tableView(tableView, commitEditingStyle: UITableViewCellEditingStyle.None, forRowAtIndexPath: indexPath) } take.backgroundColor = UIColor(rgba: "#00ab84") return [take, apply, delete] } 

This is what I could achieve in the above ways -

Answer 2

In iOS 11, Apple provides us with a way to help us with this. There are two functions that you need to implement to scroll the cell left or right.

 public func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? public func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? 

For example:

 func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? { let deleteAction = UIContextualAction(style: .normal, title: "", handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in // Call edit action // Reset state success(true) }) deleteAction.image = UIImage(named: "ic_delete") deleteAction.backgroundColor = .red return UISwipeActionsConfiguration(actions: [deleteAction]) } 

If you want to apply it for iOS <11.0 , you can do it with a complicated path

 func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]? { let deleteAction = UITableViewRowAction(style: .default, title: "") { action, indexPath in // Handle delete action } (UIButton.appearance(whenContainedInInstancesOf: [UIView.self])).setImage(UIImage(named: "ic_delete"), for: .normal) return [deleteAction] } 

Answer 3

Not Swift, but for anyone who lands here, looking for a solution ... I have 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 } 

rowActionWithStyle:title:icon:handler is actually just a convenience method - the "secret sauce" overrides the (private?) method _setButton [credit for Jayesh for that!].

This will give you a badge centered by name or just a badge alone if you leave the heading null. Unfortunately, you cannot play with the title position using button.titleEdgeInsets , as you can with imageEdgeInsets , so I can best place the title below the center line (hence "\ n") with a small gap under the icon (5px above). The results look like

As a bonus, you can also change the font of the title to say something less by setting a new font property. for example, the above “add” action was performed using

 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 a private API, so YMMV ... We all hope that Apple will publish an open API to do what they apparantly do in their Mail.app [sic]

Answer 4

try it

 func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]? { let remove = UITableViewRowAction(style: .Default, title: " ") { action, indexPath in print("delete button tapped") } remove.backgroundColor = UIColor(patternImage: UIImage(named: "Delete")!) return [remove] } 

Answer 5

I was looking to do the same and found the answer here . This is a bit of a workaround.

Also, as seen from the beta version of iOS 9, I think it will be possible, but I haven't looked at the API yet.

Answer 6

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

I ended up using MGSwipeTableCell .

Answer 7

If you use the answer "Apps Wise" ( https://tutorialzine.com/2014/12/you-dont-need- ), you can use this table for common Unicode characters. icons-here-are-100-unicode-symbols-that-you-can-use

Or this one for ALL Unicode characters: https://unicode-table.com/en/#control-character