温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ios开发UITableViewCell图片加载优化的方法

发布时间:2022-07-20 09:43:35 来源:亿速云 阅读:201 作者:iii 栏目:开发技术

这篇“ios开发UITableViewCell图片加载优化的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ios开发UITableViewCell图片加载优化的方法”文章吧。

图片自适应比例

一般我们的做法都是用UITableViewAutomaticDimension来实现的。

以往的做法,我们都是直接 sd_setImageWithURL 来实现添加图片,那现在也一样,我们也是通过这个来获取图片宽和高。

- (void)sd_setImageWithURL:(nullable NSURL *)url           placeholderImage:(nullable UIImage *)placeholder                  completed:(nullable SDExternalCompletionBlock)completedBlock

完成后,我们可以拿到UIImage,从而知道图片的 size 。然后我们就可以按比例来获取图片的高度,再通过更新约束来改变图片高度。

大概做法如下:

[_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL _Nullable imageURL) {             if (image) {                 // 获取图片宽高                 CGSize imageSize = image.size;                 CGFloat maxWidth = kSCREEN_WIDTH - 32;                 // 按比例获取当前的高度                 CGFloat height = imageSize.height * maxWidth / imageSize.width;                 [self.imageView mas_updateConstraints:^(MASConstraintMaker *make) {                     make.height.mas_equalTo(height);                 }];             }         }];

然后我们一运行代码,发现图片的高度并没有展示我们想要的高度,可以说是连高度都没有。

很明显是图片的高度没有生效。想想也是,我们是异步调用加载图片的,这时候等异步结果回来调用mas_updateConstraints,并不会触发代理 heightForRowAtIndexPath,那怎么会更新高度呢。

既然是这样,那我们就重新加载该列表吧。

[cell setHeightBlock:^(CGFloat imageHeight){     [tableView beginUpdates];     [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];     [tableView endUpdates]; }];

我们更新完mas_updateConstraints后,这时候,直接刷新该列表,就可以解决问题了。

这时候我们重新运行,效果还可以,但在来回滚动的时候,发现有点卡。很明显,我们滚动的时候每次都要重新刷新cell

如果我们有缓存了,那就知道了图片的高度,那我们是不是就不需要reloadRowsAtIndexPaths

所以我再次进行优化

// 是否有缓存 BOOL hasCache = [[SDImageCache sharedImageCache] diskImageDataExistsWithKey:model.urlStr]; [_ImageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {     if (image) {         CGSize imageSize = image.size;         CGFloat maxWidth = kSCREEN_WIDTH - 32;         CGFloat height = imageSize.height * maxWidth / imageSize.width;         [self.imageView mas_updateConstraints:^(MASConstraintMaker *make) {             make.height.mas_equalTo(height);         }];          // 有缓存就不去reloadRowsAtIndexPaths          if (!hasCache && self.heightBlock) {              self.heightBlock(height);          }     } }];

如果发现是有缓存图片了,我们就不刷新列表了。sd_setImageWithURL这时候也是从缓存里面读取图片,就不是异步加载了,所以不用再次刷新了当前cell了。

XHWebImageAutoSize

有的人说,这么写好像挺麻烦的,有没有封装好的写法,的确有的。

那就是第三方库 XHWebImageAutoSize,它的写法其实也是用了 SDWebImage 来进行优化操作的。

[_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {     if (image) {         /** 缓存image size */         [XHWebImageAutoSize storeImageSize:image forURL:imageURL completed:^(BOOL result) {             /** reload  */             if(result && self.heightBlock) {                 self.heightBlock(0)             }         ];     } }];

缓存图片后,一样是去刷新cell。

[cell setHeightBlock:^(CGFloat imageHeight) {     [tableView xh_reloadDataForURL:[NSURL URLWithString:model.urlStr]];  }];

然后就是重新加载高度。

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {     ImageModel *model = _dataArray[indexPath.row];     return [XHWebImageAutoSize imageHeightForURL:[NSURL URLWithString:model.urlStr] layoutWidth:[UIScreen mainScreen].bounds.size.width-32 estimateHeight:200] + 50; }

后面加的 50是其他的高度,例如cell里面还有title,就是图片+其他高度。

这样也能实现图片自适应高度。

仅加载当前屏幕的内容

图片列表实在太多了,一直滑滑滑,图片加载速度跟不上手速啊,感觉有点卡,我们可以仅加载当前屏幕的内容。滑动的时候,我们不加载,等列表停后,我们再次加载当前屏幕的内容。

这时候我们在模型model里面,添加一个isLoad的参数,如果是true,我们才加载。

先添加一个当前屏幕加载cell的方法。

-(void)loadCurrentCells{     NSArray * array = [self.tableView indexPathsForVisibleRows];     for (NSIndexPath *indexPath in array) {         JJTableViewCell * cell = (JJTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];         ImageModel *model = _dataArray[indexPath.row];         //设置为可以加载         model.isLoad = YES;        //配置cell         [cell configCellWithImageModel:model];     } }

cell里面对modelisLoad进行判断。

- (void)configCellWithImageModel:(ImageModel *)model {     if (model.isLoad) {         [_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr]];     }else {         _imageView.image = [UIImage imageNamed:@"default_images_icon"];     } }

如果暂不加载,我们可以先设置占用图片。

这样一来,我们只要监听停止滑动的时候,我们就设置加载当前页面的内容即可。

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {     if (!decelerate) {         [self loadCurrentCells];     } } - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {     [self loadCurrentCells]; }

当然一开始我们reloaData的时候,所有isload都为false,所以我们需要加载一次当前cell内容。

[self.tableView reloadData]; [self loadCurrentCells];

这样,我们就可以做到一直滑动的时候,不异步加载图片,等滑动停止再加载当前屏幕的图片。

当然除了这种写法,我们还可以通过RunLoop来实现。

预加载

所谓预加载,就是一直滑动,我们翻页的时候,提前加载数据出来,让用户的感觉就是一直有数据。就没有出现上拉加载更多这种情况。

总体思路是:当滑动距离占比到了总滑动距离的时候的%90(不固定),就触发预加载。

以上就是关于“ios开发UITableViewCell图片加载优化的方法”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI