Resize tableview's cell image in cellForRowAtIndexPath method

Question

I have a tableview, each cell with a image, title, and subtitle. Each cell has a different image and I can't figure out how to make the right side of them all line up with each other. In other words, some are wider than others and stick further out to the right of the cell, pushing the title and subtitle over as well. I don't care if there are black bars on the right and left, or top and bottom, I just want them to all take up the same amount of space. I tried this is my viewforrowatindexpath method:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [[UITableViewCell alloc]
                             initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
    cell.textLabel.text = [[mainDelegate.mapAnnotations objectAtIndex:indexPath.row] title];
    cell.detailTextLabel.text = (NSString *)[[mainDelegate.mapAnnotations objectAtIndex:indexPath.row] location];
    NSData *imageData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:[[mainDelegate.mapAnnotations objectAtIndex:indexPath.row] imageURL]]];
    UIImage *theImage = [[UIImage alloc] initWithData:imageData];

    cell.imageView.frame = CGRectMake(0, 0, 20, 20);
    cell.imageView.image = theImage;
    cell.imageView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:1.0];
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

    // return it
    return cell;
    [imageData release];
    [theImage release]; 
}

I thought that by setting the frame of the cell's imageview, the image would fit in it but adding that line makes no change when I run the app? Is there a way to accomplish this within the viewforrowatindexpath method?

score 1 · Answer 1 · answered May 26 '11 at 22:57

I understand that you can't control the images sizes.

I didn't try that but can you try:

cell.imageView.clipsToBounds;

Any way if that simple step doesn't work you can try to set the image size before you add it to the cell.imageview.

First Add this function to your file

- (UIImage *)resetImage:(UIImage*)originalImage {

    CGSize newSize = CGSizeMake(20, 20)
    CGRect imageRect = CGRectMake(0,0, newSize.width,newSize.height);

    UIGraphicsBeginImageContext(newSize);
    [originalImage drawInRect:SymbolRectangle];
    UIImage *theImage=UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();


    return theImage;
}

Second Set the cell image

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [[UITableViewCell alloc]
                             initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
    cell.textLabel.text = [[mainDelegate.mapAnnotations objectAtIndex:indexPath.row] title];
    cell.detailTextLabel.text = (NSString *)[[mainDelegate.mapAnnotations objectAtIndex:indexPath.row] location];
    NSData *imageData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:[[mainDelegate.mapAnnotations objectAtIndex:indexPath.row] imageURL]]];
    UIImage *theImage = [[UIImage alloc] initWithData:imageData];


    cell.imageView.image = [self resetImage:theImage];
    cell.imageView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:1.0];
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

    // return it
    return cell;
    [imageData release];
    [theImage release]; 
}

Now i have to admit i am not near xcode to check it but i believe this is the direction to the solution.

Good luck

Thank you, that was very helpful, as they are all the same size now and line up well, but the only problem is that they are stretched to be made into that square. Is there a way to make them stretch proportionally? I don't mind if there have to be blank or black bars on the top and bottom or left and right to make it happen. — Ryan, May 27 '11 at 14:46

score 0 · Accepted Answer · edited May 23 '17 at 11:47

O.K - I think that is what you are looking for.

- (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize {

UIImage *sourceImage = self;
UIImage *newImage = nil;

CGSize imageSize = sourceImage.size;
CGFloat width = imageSize.width;
CGFloat height = imageSize.height;

CGFloat targetWidth = targetSize.width;
CGFloat targetHeight = targetSize.height;

CGFloat scaleFactor = 0.0;
CGFloat scaledWidth = targetWidth;
CGFloat scaledHeight = targetHeight;

CGPoint thumbnailPoint = CGPointMake(0.0,0.0);

if (CGSizeEqualToSize(imageSize, targetSize) == NO) {

        CGFloat widthFactor = targetWidth / width;
        CGFloat heightFactor = targetHeight / height;

        if (widthFactor < heightFactor) 
                scaleFactor = widthFactor;
        else
                scaleFactor = heightFactor;

        scaledWidth  = width * scaleFactor;
        scaledHeight = height * scaleFactor;

        // center the image

        if (widthFactor < heightFactor) {
                thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5; 
        } else if (widthFactor > heightFactor) {
                thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;
        }
}


// this is actually the interesting part:

UIGraphicsBeginImageContext(targetSize);

CGRect thumbnailRect = CGRectZero;
thumbnailRect.origin = thumbnailPoint;
thumbnailRect.size.width  = scaledWidth;
thumbnailRect.size.height = scaledHeight;

[sourceImage drawInRect:thumbnailRect];

newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

if(newImage == nil) NSLog(@"could not scale image");


return newImage ;
}

I found it here - how to scale a uiimageview proportionally

Thanks, I think this would work, but I think it would probably make for glitchy scrolling through a tableview if that has to be called for each cell:( Unfortunately it may be the only option. — Ryan, May 31 '11 at 19:57

Resize tableview's cell image in cellForRowAtIndexPath method

2 Answers2