Sizing a Custom UITableViewCell and included UIImageView based on Image Size

Question

I am trying to customize the UITableViewCell below for an iPhone app in a grouped table view. What I would like to do is have the image width take up the whole cell minus padding (280) and the height variable based on the image size.

Currently I am using SDWebImage to asynchronously download remote images. This may not be the correct thing to do in this case. I am also having trouble figuring out how to give the custom cell the image on initialization. The image URL is stored in self.beerPhoto in the DetailViewController.

I have searched for this a number of ways and have not found exactly what I am looking for. The closest was this: How to scale a UIImageView proportionally , but this method seems to require the cell to have the image at initialization, as I tried to make this code work but setting the image after initialization left a blank cell.

The current code includes constants I set to approximate an image in portrait orientation. In reality some of the images are portrait and some are landscape orientation.

Please let me know if there's anything additional you need to know.

Header for custom UITableViewCell:

#import <UIKit/UIKit.h>


@interface BeerDetailHead : UITableViewCell {
    UILabel *beerName;
    UIImageView *beerImage;
}

@property(nonatomic, retain)UILabel *beerName;
@property(nonatomic, retain)UIImageView *beerImage;

@end

Relevant portion of implementation for custom UITableViewCell

#import "BeerDetailHead.h"


@implementation BeerDetailHead

@synthesize beerName, beerImage;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
        //beerName = [[UILabel alloc]init];
        //beerName.textAlignment = UITextAlignmentLeft;
        //beerName.font = [UIFont systemFontOfSize:14];
        beerImage = [[UIImageView alloc]init];
        //[self.contentView addSubview:beerName];
        [self.contentView addSubview:beerImage];
    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    CGRect contentRect = self.contentView.bounds;
    CGFloat boundsX = contentRect.origin.x;
    CGRect frame;
    frame= CGRectMake(boundsX+10 ,10, 280, 375);
    beerImage.frame = frame;
}

DetailViewController's cellForRowAtIndexPath

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

    NSArray *listData =[self.tableContents objectForKey:
                        [self.sortedKeys objectAtIndex:[indexPath section]]];

    NSLog(@"listData = %@", listData);

    NSUInteger row = [indexPath row];

    if ([self.sortedKeys objectAtIndex:[indexPath section]] == @"header"){
        static NSString *headerTableIdentifier = @"HeaderTableIdentifier";
        BeerDetailHead * headerCell = (BeerDetailHead*)[tableView
                                                        dequeueReusableCellWithIdentifier: headerTableIdentifier];

        if(headerCell == nil) {

            headerCell = [[[BeerDetailHead alloc] initWithFrame:CGRectZero reuseIdentifier:headerTableIdentifier] autorelease];                 
        }

        headerCell.beerName.text = [listData objectAtIndex:row];
        [headerCell.beerImage setImageWithURL:[NSURL URLWithString:self.beerPhoto]
                       placeholderImage:[UIImage imageNamed:@"placeholder.png"]];
        //NSLog(@"frame = %@", headerCell.beerImage.frame);

        return headerCell;
    }
    else{
        //use standard UITableViewCell
    }
}

Answer 1

Implement tableView:heightForRowAtIndexPath: delegate method and return calculated height for each row from this method.
After loading each image call reloadData on your tableView OR if you want to animate changes call:

[self.tableView beginUpdates];
[self.tableView endUpdates];

Also, you might want to combine several sequence height updates into one. I would use I little delay to perform this:

// triggerUpdates calls the above code
[NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(triggerUpdates) object:nil];
[self performSelector:@selector(triggerUpdates) withObject:nil afterDelay:0.1];