TableViewCell dynamic height for loading uploaded image

Question

I followed this answer: Using automatic layout in a UITableView for dynamic layouts of cells and variable row heights , but it lacks two things that prevented me from completing it:

• I set limits in the Storyboard prototype cell, not programmatically
• Image loading is performed by async.

I basically upload the image using SDWebImage and UIImageView so that it displays the whole image (of course, reduced). The problems that I have are commented out in the code below:

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // dequeue cell using identifier [cell.pictureView sd_setImageWithUrl:myUrl completed:^( ... block ...) { // This code will scale down the UIImage to the UIImageView width maitaining // its aspect ratio, and also will resize the UIImageView to match the scaled-down UIImage height if(image != nil) { CGSize imageSize = [image size]; CGSize imageViewSize = CGSizeMake(280.0, 100.0); CGFloat correctHeight = (imageViewSize.width / imageSize.width) * imageSize.height; [[cell pictureView] setFrame:CGRectMake([[cell pictureView] frame].origin.x, [[cell pictureView] frame].origin.y, CGRectGetWidth([[cell pictureView] bounds]), correctHeight)]; // At this point, the subviews are all set. Since this happens async, what method do I call to re-calculate this row height. }]; - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { static int defaultHeight = 230; // Get the offscreen cell used only for calculation purposes WKZEventsCell *cell = [[self offscreenCells] objectForKey:CellIdentifier]; if(!cell) { // HOW DO I GET A REFERENCE TO A PROTOTYPED CELL INSIDE THE STORYBOARD??? // note that calling dequeueReusableCellWithIdentifier:CellIdentifier will cause a memory leak cell = ?????? [[self offscreenCells] setObject:cell forKey:CellIdentifier]; } WKZEvent *event = [[self eventList] objectAtIndex:[indexPath row]]; [[cell titleLabel] setText:[event title]]; [[cell placeLabel] setText:[event title]]; [[cell pictureView] setImage:image]; // Even tho this should be in memory cache right now, I'm pretty sure this call is still asynchronous, so this might make the whole thing wont work. [cell.pictureView sd_setImageWithUrl:myUrl // THIS METHODS ARE COMMENTED BECAUSE MY CONSTRAINTS ARE SET IN STORYBOARD, BUT NOT SURE IF I'M RIGHT AT THIS ONE //[cell setNeedsUpdateConstraints]; //[cell updateConstraintsIfNeeded]; // I DONT HAVE A MULTILINE LABEL SO I DONT CALL THIS. NOT SURE ABOUT THIS ONE EITHER //cell.bounds = CGRectMake(0.0f, 0.0f, CGRectGetWidth(tableView.bounds), CGRectGetHeight(cell.bounds)); [cell setNeedsLayout]; [cell layoutIfNeeded]; CGFloat height = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height; height += 1; NSLog(@"%f", height); return height; } 

Answer 1

Storyboard:

• Add new cell to table view
• Add a new image view to the cell
• It is not necessary to set a placeholder image for the image.
• Make cell restrictions describe its height explicitly

Do not forget to leave the cell height set to the default value.

Code:

Make the table view in cells with size values:

 var tableview: UITableView { didSet { tableView.rowHeight = UITableViewAutomaticDimension tableView.estimatedRowHeight = 44 } } 

At runtime, start downloading the image asynchronously as soon as possible.

When downloading, load the image into image view mode and do:

 tableView.beginUpdates() tableView.endUpdates()