How add custom image to uitableview cell swipe to delete

Question

Could you tell me, how to add custom image to delete button when swipe cell on UITableview?

Solution 1

search you need function "editActionsForRowAtIndexPath", where you create scope of actions. You need to set UIImage to backgroundColor of UITableViewRowAction.

let someAction = UITableViewRowAction(style: .Default, title: "") { value in 
    println("button did tapped!")
}
someAction.backgroundColor = UIColor(patternImage: UIImage(named: "myImage")!)

Solution 2

There's this UITableView delegate function you can make use of:

@available(iOS 11.0, *)
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    let deleteAction = UIContextualAction(style: .normal, title: "", handler: {a,b,c in
        // example of your delete function
        self.YourArray.remove(at: indexPath.row)
        tableView.deleteRows(at: [indexPath], with: .automatic)
    })

    deleteAction.image = UIImage(named: "trash.png")
    deleteAction.backgroundColor = .red
    return UISwipeActionsConfiguration(actions: [deleteAction])
}

PS: Personally, I think icon size 32 is the best

Solution 3

100 % working Swipable cell with custom image and size of image with background color ios swift #ios #swift #ios13 #ios14

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

        let action =  UIContextualAction(style: .normal, title: "", handler: { (action,view,completionHandler ) in
            self.selectedIndex  = indexPath.row
            self.deleteNotification()
            completionHandler(true)

        })
        
        if #available(iOS 13.0, *) {
            action.image = UIGraphicsImageRenderer(size: CGSize(width: 30, height: 30)).image { _ in
                UIImage(named: "delete-1")?.draw(in: CGRect(x: 0, y: 0, width: 30, height: 30))
            }
            action.backgroundColor = UIColor.init(red: 0/255.0, green: 0/255.0, blue: 0/255.0, alpha: 0.0)
            let confrigation = UISwipeActionsConfiguration(actions: [action])
            return confrigation
        } else {
            // Fallback on earlier versions
            let cgImageX =  UIImage(named: "delete-1")?.cgImage
            action.image = OriginalImageRender(cgImage: cgImageX!)
            action.backgroundColor = UIColor.init(hex: "F7F7F7")
            let confrigation = UISwipeActionsConfiguration(actions: [action])

            return confrigation
        }
}

Comments

[Duyen-Hoa]

Pay attention that UITableViewRowAction is only available for iOS >= 8.0

[SKYnine]

this code doesn't work for me. It doesn't trigger any error but the instead of having the icon or the title, I have a little red rectangle. I have multiple actions set if that change anything.

[dimpiax]

@SKYnine did you set empty string of width your icon?

[AugustoQ]

When I use this, what I get is my icon repeated side-by-side on the background. Is there anyway to make it appear only once, truly as an icon?

[AugustoQ]

@dimpiax it was exactly as shown above. The only difference was that I had two actions. They both had their icons displaced to the top (so I can actually see it start to repeat on the bottom), and the first that was passed had the icon repeating also horizontally (so it was laid over the second's icon)