UITableViewCell自适应图片高度的一种思路

UITableViewCell自适应图片高度的一种思路

一、问题描述

最近在做公司项目的时候，遇到了前端上传多张图片到七牛服务器后，前端在列表展示图片适配的问题。一开始我设置的固定高度，因为图片尺寸不是固定的，会出现不同程度的拉伸情况，用户体验也很不好。通过设置图片视图contentMode这个属性，虽然能保证图片不被拉伸，但图片会出现显示不全的问题。

二、解决思路

1、后台返回每张图片的宽高，根据比例去计算图片的高度

2、获取到image，image有size这个属性，可以拿到宽高，根据比例去计算图片的高度

三、最终采用方案

第一种方案是可以实现图片的适配问题，我采用了第二种。图片都是网络加载的，要想拿到image，就必须要将图片下载下来，这样就可以获取到图片的尺寸。下面贴出我实现的关键步骤吧。

1、工程导入SDWebImage和Masonry,导入相关头文件。

2、SDWebImage下载图片，并计算出图片高度，将高度缓存到字典。自定义cell用Masonry设置好上下左右约束，也可以是xib。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    ImageViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kIdentifier forIndexPath:indexPath];

    cell.selectionStyle = UITableViewCellSelectionStyleNone;

    NSString *url = self.imageUrlArray[indexPath.row];

    [cell.autoImageView sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:nil options:SDWebImageRetryFailed completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {

        if(image.size.height) {

            /**  < 图片宽度 >  */

            CGFloat imageW = [UIScreen mainScreen].bounds.size.width - 2* 15;

            /**  <根据比例 计算图片高度 >  */

            CGFloat ratio = image.size.height / image.size.width;

             /**  < 图片高度 + 间距 >  */

            CGFloat imageH = ratio * imageW + 15;

            /**  < 缓存图片高度 没有缓存则缓存 刷新indexPath >  */

            if(![[self.heightDict allKeys] containsObject:@(indexPath.row)]) {

                [self.heightDict setObject:@(imageH) forKey:@(indexPath.row)];

                [self.tableView beginUpdates];

                [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];

                [self.tableView endUpdates];

            }

        }

    }];

    returncell;

}

注意

字典key也可以是图片地址url

因为图片下载是异步的，要在下载完成图片之后，如果字典没有缓存当前indexPath高度，需要手动去刷新一次indexPath(最开始的时候，我没有根据key去判断是否需要刷新，当cell滑动的时候，会不停的调用cellForRowAtIndexPath这个方法，会不停的刷新，这样也非常耗费性能)。

3、cell高度代理方法返回缓存的图片高度

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

    return[[self.heightDict objectForKey:@(indexPath.row)] floatValue];

}

到这里，就已经实现了图片自适应高度的需求了，具体详情，请看测试UITableViewCellAutoImageHeight。实现这个需求，自己也折腾了一段时间，上面的方法现在也能满足项目的需求，但是在UI效果上感觉还是有一些不完美之处。如果大神有更好的实现方案和优化方法，希望能多多交流学习。如果以后有更好的实现方案，我也会在这篇文章中记录下来。

作者：心的旅程

链接：https://juejin.im/post/5a45ec816fb9a0450c49bb17