How to resize a cell.imageView in a TableView and apply tintColor in Swift

Question

I have a tableView with a cell created in cellForRowAtIndexPath and add some dummy text:

cell = UITableViewCell(style: UITableViewCellStyle.Subtitle,
            reuseIdentifier: "cell")
cell.textLabel?.text = "Test Title"
cell.detailTextLabel?.text = "Test detail label"

Then I add a test image to the cell's imageView:

var image = UIImage(named: "cd.png")
cell.imageView!.image = image

Result:

To adjust the color, I use the following code:

cell.imageView?.tintColor = UIColor.redColor()

Result:

The image is too big in the cell, so I adjust the size using the following code:

var itemSize:CGSize = CGSizeMake(20, 20)
UIGraphicsBeginImageContextWithOptions(itemSize, false, UIScreen.mainScreen().scale)
var imageRect : CGRect = CGRectMake(0, 0, itemSize.width, itemSize.height)
cell.imageView!.image?.drawInRect(imageRect)
cell.imageView!.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

Whilst the image does resize, the tintColor is lost:

Any ideas please?

score 31 · Answer 1 · edited Jul 21 '20 at 17:20

31

Solution Without custom cell

func imageWithImage(image: UIImage, scaledToSize newSize: CGSize) -> UIImage {
    
    UIGraphicsBeginImageContext(newSize)
    image.draw(in: CGRect(x: 0 ,y: 0 ,width: newSize.width ,height: newSize.height))
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return newImage!.withRenderingMode(.alwaysOriginal) 
}



override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! UITableViewCell

    cell.imageView?.tintColor = UIColor.green
    cell.imageView?.image = imageWithImage(UIImage(named: "imageName")!, scaledToSize: CGSize(width: 20, height: 20))
    
    // Configure the cell...
    
    return cell
  }

edited Jul 21 '20 at 17:20

Makwan Barzan

353
1
6
12

answered Jul 25 '15 at 12:16

Hamza Ansari

3,009
1
23
25

1

This help me a lot, but there is an image quality lost, any idea how keep the image quality? – Asinox Nov 01 '15 at 18:53
3

I found the answer here : http://stackoverflow.com/questions/31451798/new-generated-image-quality-is-low-ios-swift – f1rstsurf Nov 25 '15 at 08:32
1

For me this only worked with the rendering mode `.alwaysOriginal` – Archie Gertsman Aug 13 '17 at 19:46

score 17 · Accepted Answer · answered Jul 25 '15 at 09:06

17

You can do it by another way :

1) Create custom cell with your own UIImageView size and 2 separate labels

2) Add UIImageView as Subview of Cell

var cellImg : UIImageView = UIImageView(frame: CGRectMake(5, 5, 50, 50))
cellImg.image = UIImage(named: "yourimage.png")
cell.addSubview(cellImg)

answered Jul 25 '15 at 09:06

Ashish Kakkad

23,586
12
103
136

2

Perfect. I made one which, which was to make the frame as 0, 0, 20, 20 and then added the subview to the actual image view: cell.imageView?.addSubview(cellImg) This centers the image in there right spot rather than manually adjusting the frame settings. Thank you. – Anthony Jul 25 '15 at 12:07

score 8 · Answer 3 · answered Sep 04 '18 at 07:31

in swift 4 :

func image( _ image:UIImage, withSize newSize:CGSize) -> UIImage {

    UIGraphicsBeginImageContext(newSize)
    image.draw(in: CGRect(x: 0,y: 0,width: newSize.width,height: newSize.height))
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return newImage!.withRenderingMode(.automatic)
}

cell.imageView?.image = image(UIImage(named: "yourImage.png")!, withSize: CGSize(width: 30, height: 30))

score 6 · Answer 4 · answered Aug 09 '17 at 05:06

For Swift 3

func imageWithImage(image:UIImage,scaledToSize newSize:CGSize)->UIImage{

        UIGraphicsBeginImageContext( newSize )
        image.draw(in: CGRect(x: 0,y: 0,width: newSize.width,height: newSize.height))
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage!.withRenderingMode(.alwaysTemplate)
    }

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! UITableViewCell

    cell.imageView?.tintColor = UIColor.greenColor()
    cell.imageView?.image = imageWithImage(image: UIImage(named: "imageName")!,scaledToSize: CGSize(width: 20, height: 20))

    // Configure the cell...

    return cell
  }

score 3 · Answer 5 · answered Oct 25 '17 at 14:11

For OBJECTIVE C without Custom tableViewCell

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

 {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"abc" forIndexPath:indexPath];

    // Configure the cell...

    if (cell==nil) {

        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"abc"];

    }


    cell.textLabel.text = [menuItemsArray objectAtIndex:indexPath.row];

    cell.imageView.image = [UIImage imageNamed:[menuItemsImagesArray objectAtIndex:indexPath.row]];


    CGSize  itemSize = CGSizeMake(20, 20);

    UIGraphicsBeginImageContextWithOptions(itemSize, false, self.view.contentScaleFactor);

    CGRect  imageRect = CGRectMake(0, 0, itemSize.width, itemSize.height);

    [cell.imageView.image drawInRect:imageRect];

    cell.imageView.image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();






    return cell; }

score 1 · Answer 6 · answered Jan 22 '20 at 03:17

I came here because I was trying to find the answer to same question.

There are several answers that manipulate the image. I was having the same issue. but didn't want to manipulate the image.

What I did find that my images were 200x200 and dropped them as 1x. I moved them to the 3x section and iOS would automatically resize them more to icon size. For everyone's reference I have added 1x vs 3x comparison

I thought to post as it did solve my issue. It might be helpful to anyone with the same intention as mine.

happy coding.

score 0 · Answer 7 · answered Jul 21 '20 at 13:04

0

SwiftUI solution

Image("YourImage")
    .resizable()
    .scaledToFit()
    .frame(width: 40, height: 40)

answered Jul 21 '20 at 13:04

Makwan Barzan

353
1
6
12

what did you post? – famfamfam Jan 08 '22 at 05:57

score 0 · Answer 8 · answered Nov 06 '20 at 15:20

In case anyone is working with Xamarin, here is the snippet

    private static UIImage ImageWithImage(UIImage image, CGSize newSize)
    {
        UIGraphics.BeginImageContext(newSize);
        image.Draw(new CGRect(x: 0, y: 0, width: newSize.Width, height: newSize.Height));
        var newImage = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();

        return newImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
    }

score 0 · Answer 9 · answered May 12 '23 at 02:17

0

This works:

    let cell = UITableViewCell()
    let config = UIImage.SymbolConfiguration(pointSize: 32, weight: .thin, scale: .small)
    cell.imageView?.image = UIImage(systemName: "circle.righthalf.filled", withConfiguration: config)

answered May 12 '23 at 02:17

mark

181
6

This only works if the image is an SF Symbol and not some arbitrary image. – HangarRash May 12 '23 at 03:44

How to resize a cell.imageView in a TableView and apply tintColor in Swift

9 Answers9

Linked