How to add image in UITableViewRowAction?

Question

I'm trying to add image in UITableView Swipe style. I tried with Emoji text & its working fine

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
  let editAction = UITableViewRowAction(style: .normal, title: "🖋") { (rowAction, indexPath) in
      print("edit clicked")
  }

  return [editAction]
}

But I need image instead of Emoji, meanwhile I tried

editAction.backgroundColor = UIColor.init(patternImage: UIImage(named: "edit")!)

But it's getting duplicate image, I used images in many format like 20*20, 25*25, 50*50 but still duplicating.

How can I add image?

Answer 1

Finally in iOS 11, SWIFT 4 We can add add image in UITableView's swipe action with help of UISwipeActionsConfiguration

@available(iOS 11.0, *)
    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {

            let action =  UIContextualAction(style: .normal, title: "Files", handler: { (action,view,completionHandler ) in
                //do stuff
                completionHandler(true)
            })
        action.image = UIImage(named: "apple.png")
        action.backgroundColor = .red
        let configuration = UISwipeActionsConfiguration(actions: [action])

        return configuration
    }

WWDC video at 28.34

Apple Doc

Note: I have used 50*50 points apple.png image with 50 tableview row height

Answer 2

I had the same problem with my project, so I did a workaround for this. I think, this is helpful for you.

When I swipe table cell to the left only for image width, it is working fine.

But when I swipe table cell more than image width, table cell display like this:

This happen because to add image I use 'backgroundColor' property.

copyButton.backgroundColor = UIColor(patternImage: UIImage(named: "bfaCopyIcon.png")!)

So to fix this, I increase image width to the same as table width.

old image >>>>>>>>>>>> new image

>>>>

this is the new look:

This is my sample code:

func tableView(_ tableView: UITableView, editActionsForRowAt: IndexPath) -> [UITableViewRowAction]? {
    let copyButton = UITableViewRowAction(style: .normal, title: "") { action, index in

         print("copy button tapped")

    }
    copyButton.backgroundColor = UIColor(patternImage: UIImage(named: "bfaCopyIcon.png")!)


    let accessButton = UITableViewRowAction(style: .normal, title: "") { action, index in

       print("Access button tapped")

    }
    accessButton.backgroundColor = UIColor(patternImage: UIImage(named: "bfaAccess.png")!)


    return [accessButton, copyButton]
}