UITableViewRowAction image for title UITableViewRowAction image for title ios ios

UITableViewRowAction image for title

iOS 11.0


Apple introduced flexible way to declare row actions with great benefits.

extension ViewController: UITableViewDelegate {  func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {    let askAction = UIContextualAction(style: .normal, title: nil) { action, view, complete in      print("Ask!")      complete(true)    }    // here set your image and background color    askAction.image = IMAGE    askAction.backgroundColor = .darkGray    let blockAction = UIContextualAction(style: .destructive, title: "Block") { action, view, complete in      print("Block")      complete(true)    }    return UISwipeActionsConfiguration(actions: [blockAction, askAction])  }  func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {    cell.textLabel?.text = "row: \(indexPath.row)"  }}


enter image description here

iOS 8.0

You need to set UIImage to backgroundColor of row action, concretely by:


UIColor(patternImage: UIImage(named: "IMAGE_NAME"))


[UIColor colorWithPatternImage:[UIImage imageNamed:@"IMAGE_NAME"]];

Swift 4 (iOS 11+):

iOS 11 now supports images (only) to display in action buttons. You simply have to initialize a UISwipeActionsConfiguration object in your table view delegate object:

extension MyTableViewController:UITableViewDelegate {    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {        let deleteAction = UIContextualAction(style: .normal, title:  nil, handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in                debugPrint("Delete tapped")                success(true)            })        deleteAction.image = UIImage(named: "icon_delete.png")        deleteAction.backgroundColor = UIColor.red        return UISwipeActionsConfiguration(actions: [deleteAction])    }


I made this simple UITableViewRowAction category, in order to set the icon for my actions.You can set the image, the background color, the cell height (to manage dynamic cells) and the icon size in percentage.

extension UITableViewRowAction {  func setIcon(iconImage: UIImage, backColor: UIColor, cellHeight: CGFloat, iconSizePercentage: CGFloat)  {    let iconHeight = cellHeight * iconSizePercentage    let margin = (cellHeight - iconHeight) / 2 as CGFloat    UIGraphicsBeginImageContextWithOptions(CGSize(width: cellHeight, height: cellHeight), false, 0)    let context = UIGraphicsGetCurrentContext()    backColor.setFill()    context!.fill(CGRect(x:0, y:0, width:cellHeight, height:cellHeight))    iconImage.draw(in: CGRect(x: margin, y: margin, width: iconHeight, height: iconHeight))    let actionImage = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    self.backgroundColor = UIColor.init(patternImage: actionImage!)  }}