动态TableViewCell高度以适合下载的图像 [英] Dynamic TableViewCell height to fit downloaded image

问题描述

我正在回答这个问题：在UITableView中使用自动布局进行动态单元布局&变量行高度但缺少2件事使我无法完成它：

I was following this answer: Using Auto Layout in UITableView for dynamic cell layouts & variable row heights but it lacks 2 things that made me unable to complete it:

1. 我在Storyboard原型中设置了约束单元格，而不是以编程方式


2. 图像下载完成异步。

基本上我正在下载使用 SDWebImage 的图像，并调整 UIImageView 的高度，以便显示整个图像（按比例缩小，课程）。我遇到的问题在下面的代码中被注释：

Basically I'm downloading an image using SDWebImage, and resizing the UIImageView's height so that it displays the entire image (scaled down, of course). The problems I'm having are commented 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's width maitaining
       // its aspect ratio, and also will resize the UIImageView's to match the scaled-down UIImage's 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's height.

  }];


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    static int defaultHeight = 230;

    // Get's 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;
}

推荐答案

故事板：

• 在表格视图中添加新单元格


• 添加新图像视图到单元格


• 可选择为图像视图设置占位符图像


• 使单元格的约束明确描述其高度

• Add a new cell to your table view
• Add a new image view to the cell
• Optionally set a placeholder image for the image view
• Make cell's constraints describe its height unambiguously

确保将单元格的行高保留为默认

Be sure to leave Row Height of the cell set to Default

代码：

使表格视图自我调整单元格：

Make the table view to self-size cells:

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

在运行时，尽快开始异步加载图像。

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

下载后，将图像加载到图像视图并执行：

When downloaded, load the image to the image view and execute:

tableView.beginUpdates()
tableView.endUpdates()

这篇关于动态TableViewCell高度以适合下载的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！