How to add image to row action in Table View?

Question

How to add custom image to delete button when swiping cell from right on UITableview as shown in the below image?

 func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]? {

    let remove = UITableViewRowAction(style: .Default, title: "\nRemove") { action, indexPath in }
    remove.backgroundColor = UIColor(patternImage: UIImage(named: "remove")!) }

From the above code, Image is showing but, it is showing as a group of images stacked together. I mean, I am unable to set the "ContentMode" to ".ScaleToAspectFit" for the "UIImage"

What is the best way for this approach?

sample code could be appreciable.

Answer 1

Essentially, you are drawing in a context, then retrieve the new image from the context.

let label = UILabel(frame: CGRect(x: 0, y: 0, width: 80, height: 100))
label.text = "ADD"
label.textAlignment = .Center
label.textColor = UIColor.whiteColor()

let img: UIImage = UIImage(named: "delete")

UIGraphicsBeginImageContextWithOptions(imgSize, false, UIScreen.mainScreen().scale)
let context = UIGraphicsGetCurrentContext()

// Set background color
CGContextSetFillColorWithColor(context, UIColor.raangeRed().CGColor)
CGContextFillRect(context, CGRect(x: 0, y: 0, width: 80, height: 80))

// Draw image
img.drawInRect(CGRectMake(30, 15, 20, 20))

// Draw View
label.layer.renderInContext(context!)

// Retrieve new UIImage
let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

let deleteRowAction = UITableViewRowAction(style: .Normal, title: "           ") { (rowAction, indexPath) in
     // Do stuff   
    }
deleteRowAction.backgroundColor = UIColor(patternImage: newImage)

You can also create a custom view (with an UIImageView and UILabel) and render it inside the context.

Answer 2

Inspired with Denny's answer. Here is objective-c version of his code.

- (NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath {

    UITableViewRowAction *deleteAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"           " handler:^(UITableViewRowAction *action, NSIndexPath *indexPath)
    {
        UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Do you really want to delete this comment?" message:@"" delegate:self cancelButtonTitle:@"NO" otherButtonTitles:@"YES", nil];

        [alertView setTag:101];
        [alertView show];
    }];

    UITableViewCell *commentCell = (UITableViewCell *)[tableView cellForRowAtIndexPath:indexPath];

    CGFloat height = commentCell.frame.size.height;

    UIImage *backgroundImage = [self deleteImageForHeight:height];

    deleteAction.backgroundColor = [UIColor colorWithPatternImage:backgroundImage];

    return @[deleteAction];
}

And below is the image drawing method:

- (UIImage*)deleteImageForHeight:(CGFloat)height{

    CGRect frame = CGRectMake(0, 0, 62, height);

    UIGraphicsBeginImageContextWithOptions(CGSizeMake(62, height), NO, [UIScreen mainScreen].scale);

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    CGContextFillRect(context, frame);

    UIImage *image = [UIImage imageNamed:@"icon-delete"];

    [image drawInRect:CGRectMake(frame.size.width/2.0, frame.size.height/2.0 - 10, 18, 20)];

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return newImage;
}

And the result is:

Answer 3

try this

let backImage = UIImageView(image: UIImage(named: "remove"))
backImage.contentMode = .scaleAspectFit
remove.backgroundColor = UIColor(patternImage:backImage.image!)

Choice-2

var img: UIImage = UIImage(named: "remove")
var imgSize: CGSize = tableView.frame.size
UIGraphicsBeginImageContext(imgSize)
img.drawInRect(CGRectMake(20, 0, 20, 20))
var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
remove.backgroundColor = UIColor(patternImage: newImage)