经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » iOS » 查看文章
ios开发UITableViewCell图片加载优化详解
来源：jb51　　时间：2022/7/19 17:04:11　　对本文有异议

前言

我们平时用UITableView用的很多，所以对列表的优化也是很关注的。很多时候，我们设置UIImageView，都是比例固定好宽高的，然后通过 scaleAspectFill 和 clipsToBounds 保持图片不变形，这样子做开发的效率是很高的，毕竟图片宽高我们都是固定好的了。

那如果产品要求图片按真正的比例展示出来呢？如果服务器有返回宽和高，那就好办了，那如果没有呢，我们应该怎么去做呢？

下面就让我们一起来探索吧。

图片自适应比例

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

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

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

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

大概做法如下：

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

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

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

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

  1. [cell setHeightBlock:^(CGFloat imageHeight){
  2.     [tableView beginUpdates];
  3.     [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
  4.     [tableView endUpdates];
  5. }];

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

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

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

所以我再次进行优化

  1. // 是否有缓存
  2. BOOL hasCache = [[SDImageCache sharedImageCache] diskImageDataExistsWithKey:model.urlStr];
  3. [_ImageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
  4.     if (image) {
  5.         CGSize imageSize = image.size;
  6.         CGFloat maxWidth = kSCREEN_WIDTH - 32;
  7.         CGFloat height = imageSize.height * maxWidth / imageSize.width;
  8.         [self.imageView mas_updateConstraints:^(MASConstraintMaker *make) {
  9.             make.height.mas_equalTo(height);
  10.         }];
  11.          // 有缓存就不去reloadRowsAtIndexPaths
  12.          if (!hasCache && self.heightBlock) {
  13.              self.heightBlock(height);
  14.          }
  15.     }
  16. }];

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

XHWebImageAutoSize

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

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

  1. [_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
  2.     if (image) {
  3.         /** 缓存image size */
  4.         [XHWebImageAutoSize storeImageSize:image forURL:imageURL completed:^(BOOL result) {
  5.             /** reload  */
  6.             if(result && self.heightBlock) {
  7.                 self.heightBlock(0)
  8.             }
  9.         ];
  10.     }
  11. }];

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

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

然后就是重新加载高度。

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

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

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

仅加载当前屏幕的内容

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

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

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

  1. -(void)loadCurrentCells{
  2.     NSArray * array = [self.tableView indexPathsForVisibleRows];
  3.     for (NSIndexPath *indexPath in array) {
  4.         JJTableViewCell * cell = (JJTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
  5.         ImageModel *model = _dataArray[indexPath.row];
  6.         //设置为可以加载
  7.         model.isLoad = YES;
  8.        //配置cell
  9.         [cell configCellWithImageModel:model];
  10.     }
  11. }

cell里面对model的isLoad进行判断。

  1. - (void)configCellWithImageModel:(ImageModel *)model
  2. {
  3.     if (model.isLoad) {
  4.         [_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr]];
  5.     }else {
  6.         _imageView.image = [UIImage imageNamed:@"default_images_icon"];
  7.     }
  8. }

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

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

  1. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
  2. {
  3.     if (!decelerate) {
  4.         [self loadCurrentCells];
  5.     }
  6. }
  7. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
  8. {
  9.     [self loadCurrentCells];
  10. }

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

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

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

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

预加载

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

总体思路是：当滑动距离占比到了总滑动距离的时候的%90（不固定），就触发预加载。

这里我就不写了，直接把大佬的链接搞过来：iOS开发 TableView 网络请求/展示预加载 

以上就是ios开发UITableViewCell图片加载优化详解的详细内容，更多关于ios UITableViewCell图片加载的资料请关注w3xue其它相关文章！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

iOS热门文章

  • snapkit更新约束崩溃的问题
  • iOS 14 UDP收不到广播处理
  • iOS开发用如何用类"SKStoreProductViewController"跳转AppStore点赞评分？
  • Charles抓包iPhone注意点以及SSL Proxying enabled for this host
  • 笔记：long、longlong、int、float、NSString相互转换
  • ios开发UI篇—UITextfield
  • 自定义相机碰到的问题，比如常见的拍照录制视频方向，镜像左右颠倒等问题
  • C 和 Object-C中的 #ifdef #ifndef
  • 使用Hbuilder将自己app发布到App Store（一）
  • iOS开发 - 超级签名实现之描述文件

    • iOS推荐文章

  • iOS开发基础135-Core Data
  • uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
  • 苹果支付有哪些坑，为什么苹果支付比支付宝和微信容易丢单？
  • 带你走进灵动岛
  • vue3+ts Axios封装—重复请求拦截
  • axios详解以及完整封装方法
  • 关于 axios 是什么？以及怎么用？
  • iOS气泡提示工具BubblePopup的使用
  • 一篇文章带你详细了解axios的封装 - 公众号-web前端进阶
  • [MAUI]模仿iOS多任务切换卡片滑动的交互实现

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号