UITableViewCell - Set background as gradient to Delete (Swipeable Action) - Swift 4.2

Question

I have customized my trailing swipe action for UITableViewCell. It has an image along with title and background color. It has been done like this :

    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    let deleteAction = UIContextualAction(style: .normal, title: ActionTitle.delete) { (deleteAction, view, handler) in
        self.deleteAction(indexPath: indexPath)
        return handler(true)
    }
    deleteAction.image = Common.getImageAndTitleForTableRowAction(title: ActionTitle.delete, actionImage: #imageLiteral(resourceName: "delete"))
    deleteAction.backgroundColor = Color.orangeColor
    let editAction = UIContextualAction(style: .normal, title: ActionTitle.edit) { (editAction, view, handler) in
        self.selectedIndexPath = indexPath
        self.editLoanRecord()
        return handler(true)
    }
    editAction.image = Common.getImageAndTitleForTableRowAction(title: ActionTitle.edit, actionImage: #imageLiteral(resourceName: "edit"))
    editAction.backgroundColor = Color.blueColor
    return UISwipeActionsConfiguration(actions: [deleteAction, editAction])
}

Now I need to set the backgroundColor to a gradient.

Checked lots of questions on stackoverflow but unable to do so. Any help will be appreciated.

score 1 · Answer 1 · answered Mar 15 '19 at 15:42

You could try to create a color from a gradient image like so :

func linearGradientColor(from colors: [UIColor], locations: [CGFloat], size: CGSize) -> UIColor {
    let image = UIGraphicsImageRenderer(bounds: CGRect(x: 0, y: 0, width: size.width, height: size.height)).image { context in
        let cgColors = colors.map { $0.cgColor } as CFArray
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let gradient = CGGradient(
            colorsSpace: colorSpace,
            colors: cgColors,
            locations: locations
        )!
        context.cgContext.drawLinearGradient(
            gradient,
            start: CGPoint(x: 0, y: 0),
            end: CGPoint(x: size.width, y:0),
            options:[]
        )
    }
    return UIColor(patternImage: image)
}

...

deleteAction.backgroundColor = linearGradientColor(
    from: [.red, .blue],
    locations: [0, 1],
    size: CGSize(width: 100, height: 44)
)

But this code has some limitations. You can not guess the size of the action view. So depending on your needs, you can either repeat the color, stretch it or use a large image. Using a third party lib is also a good option.

score 0 · Answer 2 · answered Mar 15 '19 at 15:16

In many cases, Apple's default implementations will only take you so far and any further customization requires re-implementing the feature.

This seems like one of those cases, since the contextual action is not a view, so you can't modify it to add a gradient like you would with other views, and its properties are limited.

Your options are: implement your own swiping cell, use a third party library (like this one), or simply use a solid color.

UITableViewCell - Set background as gradient to Delete (Swipeable Action) - Swift 4.2

2 Answers2