现金开户 >iOS开发

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

2018-01-09 16:38 编辑: yyuuzhu 分类:iOS开发 来源:心的旅程

一、问题描述

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

二、解决思路

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

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

三、最终采用方案

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

1、工程导入SDWebImageMasonry,导入相关头文件。

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];
            }
        }
    }];
    return cell;
}

注意

  • 字典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效果上感觉还是有一些不完美之处。如果大神有更好的实现方案和优化方法,希望能多多交流学习。如果以后有更好的实现方案,我也会在这篇文章中记录下来。

作者:心的旅程

链接:http://www.4nic-bj.com/xjkh/post/5a45ec816fb9a0450c49bb17

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:单选以及多选的实现 iOS
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部
合作: 澳门葡京娱乐场 赌博网开户 现金开户