ios开发UITableViewCell图片加载优化详解
前言
我们平时用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图片加载的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了iOS按钮暴力点击的便捷解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-12-12
这篇文章主要教大家如何运用iOS轻松制作音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
iOS利用NSMutableAttributedString实现富文本的方法小结
这篇文章主要给大家介绍了关于iOS利用NSMutableAttributedString如何实现富文本的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-05-05
这篇文章主要介绍了iOS 12+ 中检测网络访问的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了iOS开发中对于摄像头的一些基本使用方法分享,包括判断摄像头是否可用的方法,需要的朋友可以参考下2015-10-10
从iOS8开始,就引入了新的浏览器控件WKWebView,用于取代UIWebView,下面这篇文章主要给大家介绍了关于iOS WKWebView秒开方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
现在的绝大多数应用中都存在着清楚缓存的功能，形形色色，各有千秋，所以小编现为大家介绍一种最基础的清除缓存的方法，有需要的可以参考借鉴。下面来一起看看吧。2016-09-09
IOS开发Objective-C Runtime使用示例详解
这篇文章主要为大家介绍了IOS开发Objective-C Runtime使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要为大家详细介绍了iOS实现单元格折叠，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了讲解Java中如何构造内部类对象以及访问对象,是Java入门学习中的基础知识,需要的朋友可以参考下2015-09-09
最新评论