Custom edit view in UITableViewCell while swipe left. Objective-C or Swift Custom edit view in UITableViewCell while swipe left. Objective-C or Swift ios ios

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.

enter image description here

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])}