Setting UIImage dimensions on UITableViewCell image

Question

I've got a standard UITableViewCell where I'm using the text and image properties to display a favicon.ico and a label. For the most part, this works really well since UIImage supports the ICO format. However, some sites (like Amazon.com say) have favicon.icos that make use of the ICO format's ability to store multiple sizes in the same file. Amazon stores four different sizes, all the way up to 48x48.

This results in most images being 16x16 except for a few that come in at 32x32 or 48x48 and make everything look terrible. I have searched here, the official forum, the documentation, and elsewhere without success. I have tried everything that I could think of to constrain the image size. The only thing that worked was an undocumented method, which I'm not about to use. This is my first app and my first experience with Cocoa (came from C#).

In case I wasn't clear in what I'm looking for, ideally the advice would center around setting the dimensions of the UIImage so that the 48x48 version would scale down to 16x16 or a method to tell UIImage to use the 16x16 version present in the ICO file. I don't necessarily need code: just a suggestion of an approach would do me fine.

Does anyone have any suggestions? (I asked in the official forum as well because I've sunk more than a day into this already. If a solution is posted there, I'll put it here as well.)

Answer 1

Here's what user "bcd" over at the official forums posted that ended up solving the problem (with a slight modification by myself to make it static for inclusion into a set of utility methods):

+ (UIImage *)scale:(UIImage *)image toSize:(CGSize)size
{
    UIGraphicsBeginImageContext(size);
    [image drawInRect:CGRectMake(0, 0, size.width, size.height)];
    UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return scaledImage;
}

Answer 2

I'm doing something similar in my app.

    UIImage* resizedImage(UIImage *inImage, CGRect thumbRect)
{
    CGImageRef          imageRef = [inImage CGImage];
    CGImageAlphaInfo    alphaInfo = CGImageGetAlphaInfo(imageRef);

    if (alphaInfo == kCGImageAlphaNone)
        alphaInfo = kCGImageAlphaNoneSkipLast;

    CGContextRef bitmap = CGBitmapContextCreate (NULL, thumbRect.size.width, thumbRect.size.height, 8, thumbRect.size.width*3, 
                                                                                 CGColorSpaceCreateDeviceRGB(), alphaInfo);

    CGContextDrawImage(bitmap, thumbRect, imageRef);

    CGImageRef  ref = CGBitmapContextCreateImage(bitmap);
    UIImage*    result = [UIImage imageWithCGImage:ref];

    CGContextRelease(bitmap);
    CGImageRelease(ref);

    return result;
}

Then create a new image constraining the proportions. Replacing "image" with the ICO file you get from Amazon.

CGRect sz = CGRectMake(0.0f, 0.0f, 16, 16);
UIImage *resized = resizedImage(image, sz);

Answer 3

Don't have enough karma yet to comment on answers, but I had good success with bbrandons code above.

I did get a fair number of warnings on the console though regarding bytes per row setting not being high enough - after reading answers to this post I ended up setting it to 0, which lets the system determine the right value.

eg:

CGContextRef bitmap = CGBitmapContextCreate(NULL, size.width, size.height, 8, 0, CGColorSpaceCreateDeviceRGB(), alphaInfo);

Answer 4

Here's how i did it. This technique takes care of moving the text and detail text labels appropriately to the left:

@interface SizableImageCell : UITableViewCell {}
@end
@implementation SizableImageCell
- (void)layoutSubviews {
    [super layoutSubviews];

    float desiredWidth = 80;
    float w=self.imageView.frame.size.width;
    if (w>desiredWidth) {
        float widthSub = w - desiredWidth;
        self.imageView.frame = CGRectMake(self.imageView.frame.origin.x,self.imageView.frame.origin.y,desiredWidth,self.imageView.frame.size.height);
        self.textLabel.frame = CGRectMake(self.textLabel.frame.origin.x-widthSub,self.textLabel.frame.origin.y,self.textLabel.frame.size.width+widthSub,self.textLabel.frame.size.height);
        self.detailTextLabel.frame = CGRectMake(self.detailTextLabel.frame.origin.x-widthSub,self.detailTextLabel.frame.origin.y,self.detailTextLabel.frame.size.width+widthSub,self.detailTextLabel.frame.size.height);
        self.imageView.contentMode = UIViewContentModeScaleAspectFit;
    }
}
@end

...

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[SizableImageCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    }

    cell.textLabel.text = ...
    cell.detailTextLabel.text = ...
    cell.imageView.image = ...
    return cell;
}

Answer 5

I don't know anything about how ico files work, so maybe it's possible to handily extract the 16x16 image and use that, but I have no idea how.

As far as I'm aware, it's not possible to set any useful properties on the image in a generic UITableViewCell. The simplest way (still messy, especially if you're new to it) to scale everything down to 16x16 would be to subclass UITableViewCell, give it a UIImageView, always size the image view to 16x16, and set its contentMode to UIViewContentModeAspectFit.

Answer 6

I have modified others' people category, in order to make all images occupy the same width(visible width), WITHOUT SCALING:

-(UIImage*) centerImage:(UIImage *)inImage inRect:(CGRect) thumbRect
{

    CGSize size= thumbRect.size;
    UIGraphicsBeginImageContext(size);  
    //calculation
    [inImage drawInRect:CGRectMake((size.width-inImage.size.width)/2, (size.height-inImage.size.height)/2, inImage.size.width, inImage.size.height)];
    UIImage *newThumbnail = UIGraphicsGetImageFromCurrentImageContext();        
    // pop the context
    UIGraphicsEndImageContext();
    return newThumbnail;
}