Custom edit view in UITableViewCell while swipe left. Objective-C or Swift
Just copy paste the code below!
-(NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewRowAction *editAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"Clona" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath){ //insert your editAction here }]; editAction.backgroundColor = [UIColor blueColor]; UITableViewRowAction *deleteAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"Delete" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath){ //insert your deleteAction here }]; deleteAction.backgroundColor = [UIColor redColor]; return @[deleteAction,editAction];}
Swift 3
func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? { let editAction = UITableViewRowAction(style: .normal, title: "Edit") { (rowAction, indexPath) in //TODO: edit the row at indexPath here } editAction.backgroundColor = .blue let deleteAction = UITableViewRowAction(style: .normal, title: "Delete") { (rowAction, indexPath) in //TODO: Delete the row at indexPath here } deleteAction.backgroundColor = .red return [editAction,deleteAction]}
Swift 2.1
func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]? { let editAction = UITableViewRowAction(style: .Normal, title: "Edit") { (rowAction:UITableViewRowAction, indexPath:NSIndexPath) -> Void in //TODO: edit the row at indexPath here } editAction.backgroundColor = UIColor.blueColor() let deleteAction = UITableViewRowAction(style: .Normal, title: "Delete") { (rowAction:UITableViewRowAction, indexPath:NSIndexPath) -> Void in //TODO: Delete the row at indexPath here } deleteAction.backgroundColor = UIColor.redColor() return [editAction,deleteAction]}
Note: for iOS 8 onwards
You can use UITableViewRowAction
's backgroundColor
to set custom image or view. The trick is using UIColor(patternImage:)
.
Basically the width of UITableViewRowAction
area is decided by its title, so you can find a exact length of title(or whitespace) and set the exact size of image with patternImage
.
To implement this, I made a UIView
's extension method.
func image() -> UIImage { UIGraphicsBeginImageContextWithOptions(bounds.size, isOpaque, 0) guard let context = UIGraphicsGetCurrentContext() else { return UIImage() } layer.render(in: context) let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image!}
and to make a string with whitespace and exact length,
fileprivate func whitespaceString(font: UIFont = UIFont.systemFont(ofSize: 15), width: CGFloat) -> String { let kPadding: CGFloat = 20 let mutable = NSMutableString(string: "") let attribute = [NSFontAttributeName: font] while mutable.size(attributes: attribute).width < width - (2 * kPadding) { mutable.append(" ") } return mutable as String}
and now, you can create UITableViewRowAction
.
func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? { let whitespace = whitespaceString(width: kCellActionWidth) let deleteAction = UITableViewRowAction(style: .`default`, title: whitespace) { (action, indexPath) in // do whatever you want } // create a color from patter image and set the color as a background color of action let kActionImageSize: CGFloat = 34 let view = UIView(frame: CGRect(x: 0, y: 0, width: kCellActionWidth, height: kCellHeight)) view.backgroundColor = UIColor.white let imageView = UIImageView(frame: CGRect(x: (kCellActionWidth - kActionImageSize) / 2, y: (kCellHeight - kActionImageSize) / 2, width: 34, height: 34)) imageView.image = UIImage(named: "x") view.addSubview(imageView) let image = view.image() deleteAction.backgroundColor = UIColor(patternImage: image) return [deleteAction]}
The result will look like this.
Another way to do this is to import custom font which has the image you want to use as a font and use UIButton.appearance
. However this will affect other buttons unless you manually set other button's font.
From iOS 11, it will show this message [TableView] Setting a pattern color as backgroundColor of UITableViewRowAction is no longer supported.
. Currently it is still working, but it wouldn't work in the future update.
==========================================
For iOS 11+, you can use:
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? { let deleteAction = UIContextualAction(style: .normal, title: "Delete") { (action, view, completion) in // Perform your action here completion(true) } let muteAction = UIContextualAction(style: .normal, title: "Mute") { (action, view, completion) in // Perform your action here completion(true) } deleteAction.image = UIImage(named: "icon.png") deleteAction.backgroundColor = UIColor.red return UISwipeActionsConfiguration(actions: [deleteAction, muteAction])}