ios开发UITableViewCell图片加载优化详解
目录
- 前言
- 图片自适应比例
- XHWebImageAutoSize
- 仅加载当前屏幕的内容
- 预加载
前言
我们平时用UITableView
用的很多,所以对列表的优化也是很关注的。很多时候,我们设置UIImageView
,都是比例固定好宽高的,然后通过 scaleAspectFill
和 clipsToBounds
保持图片不变形,这样子做开发的效率是很高的,毕竟图片宽高我们都是固定好的了。
那如果产品要求图片按真正的比例展示出来呢?如果服务器有返回宽和高,那就好办了,那如果没有呢,我们应该怎么去做呢?
下面就让我们一起来探索吧。
图片自适应比例
一般我们的做法都是用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
里面对model
的isLoad
进行判断。
- (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开发 TableView 网络请求/展示预加载
以上就是ios开发UITableViewCell图片加载优化详解的详细内容,更多关于ios UITableViewCell图片加载的资料请关注我们其它相关文章!