Image in TableViewCell swipe action

Question

I have a swipe action to 'complete' a task in my to-do list app. This is the image I have set:

However when the cell is swiped, the image looks like this:

Is there a way to make the background transparent/white and the image to have the green circle like the image above?

If there is not, is there a way to make the green background 'wrap' to the purple of the cell so there is no whitespace? Thanks!

Answer 1

In the second image, the green is the UIContextualAction's backgroundColor and the white is the tintColor.

The image is treated as a template image — that is, its colors are ignored, and instead it is drawn transparent where your image is transparent, and drawn opaque with the tintColor where your image is opaque.

So, basically you would need to reverse your settings: set the background color to white and change the tint color to the darker green shown in your image. Setting the tint color is not easy, but you could do it, for example, in your app delegate didFinishLaunching using the appearance proxy, as suggested here (though this may have other unwanted side effects):

UIImageView.appearance(
    whenContainedInInstancesOf: [UITableView.self])
        .tintColor = // whatever that green is

Answer 2

In came up with this extension for UIImage:

    extension UIImage {
        func colored(in color: UIColor) -> UIImage {
            let renderer = UIGraphicsImageRenderer(size: size)
            return renderer.image { context in
                color.set()
                self.withRenderingMode(.alwaysTemplate).draw(in: CGRect(origin: .zero, size: size))
            }
        }
    }

It returns a new icon in the new color when used like this:

        swipAction.image = UIImage(named: "myImage")?.colored(in: .white)

Maybe this helps someone.