UICollectionView 性能优化

iOS UICollectionView列表性能优化-标哥的笔记

< 返回首页

标哥的笔记，是记录在日常学习技术和日常开发中那些年遇到过的坑！本站为新站，原”标哥的技术博客”中的文章会慢慢移到本站，欢迎收藏本站！
在使用本站过程中，有任何建议请联系标哥! 另，承接App开发、网站开发和微信小程序开发！欢迎联系我们

---

iOS UICollectionView列表性能优化

 作者：标哥    发布日期：2017-01-13 14:16    阅读量：155次

 

概述

本篇一起来学习如何优化UICollectionView实现的网格布局，这里只是展示图片和文字，但是图片比较大，而且比较多。在优化之前，很明显的一卡一卡的。

在优化之后，FPS达到了平稳的58~60，快速滚动时，基本都是60，而且在优化后通过Core Animations检测已经没有离屏渲染、图层混合等。

优化后的FPS

效果图

这是在前一篇讲如何实现网格布局的文章中的效果图，也是本篇文章要优化的内容。

优化图片

优化第一步：直接使用UIView，而不是UIImageView，这样更轻量：

@property (nonatomic, strong) UIView *imageView;

优化第二步：裁剪图片大小至控件的大小

裁剪前的效果图。裁剪前，很明显被压缩得很厉害，已经变形了，效果很差：

裁剪后的效果图。裁剪后，图片大小按照一定的比例裁剪，且图片的大小与控件的大小正好一致，也就没有了color mismatch images的问题了：

因为这里的背景的黑色，所以使用不透明。裁剪图片的代码：

- (UIImage *)clipImage:(UIImage *)image toSize:(CGSize)size {
  UIGraphicsBeginImageContextWithOptions(size, YES, [UIScreen mainScreen].scale);
  
  CGSize imgSize = image.size;
  CGFloat x = MAX(size.width / imgSize.width, size.height / imgSize.height);
  CGSize resultSize = CGSizeMake(x * imgSize.width, x * imgSize.height);
  
  [image drawInRect:CGRectMake(0, 0, resultSize.width, resultSize.height)];
  
  UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  
  return finalImage;
}

异步去剪裁图片，在剪裁完成后再更新：

dispatch_async(dispatch_get_global_queue(0, 0), ^{
  UIImage *image = [UIImage imageNamed:model.imageName];
  image = [self clipImage:image toSize:self.imageView.frame.size];
  dispatch_async(dispatch_get_main_queue(), ^{
    model.clipedImage = image;
    self.imageView.layer.contents = (__bridge id _Nullable)(model.clipedImage.CGImage);
  });
});

优化第三步：缓存剪裁的图片

在实际开发中，我们如果要优化，可以将剪裁后的图片缓存到本地。不过这里为了简单，只是将裁剪后的图片缓存到内存中，避免重复裁剪。我们给model增加一个字段，记录剪裁后的图片，然后在加载图片的地方，判断一下：

if (model.clipedImage) {
    self.imageView.layer.contents = (__bridge id _Nullable)(model.clipedImage.CGImage);
}

这里使用的是UIView来呈现图片，这样就更轻量一些。

到这里，已经优化得很不错了。

优化UILabel

我们知道UILabel的图层混合问题，在中文情况下会出现图层混合。而非中文情况下，如果背景色与父视图的背景色不同或者设置为透明，都会引起图层混合，下面我们来优化一下。

优化第一步：设置背景色与父视图相同，对于非中文就可以解决图片混合问题

self.titleLabel.backgroundColor = [UIColor blackColor];

优化第二步：处理中文图层混合问题

self.titleLabel.layer.masksToBounds = YES;

结尾

优化完之后，大家可以下载demo来运行看看，通过Instruments工具的Core Animations来检测一下，没有出现图层混合了，没有出现像素不对齐了，也没有离屏渲染。

源代码

CollectionViewDemos

提示：本篇文章的demo对应于工程中的Demo1-GridCollectionView分组。

承接：ThinkPHP项目开发、网站项目开发、微信项目开发、微信小程序项目开发、App开发，欢迎联系标哥QQ632840804

最新文章

1. 1. ThinkPHP数据库多字段相同条件快捷查询写法
2. 2. ThinkPHP分组汇总统计如何实现
3. 3. ThinkPHP5+ajaxfileupload无刷新上传
4. 4. ThinkPHP5中URL带参数时分页参数处理办法
5. 5. 树形菜单插件
6. 6. ThinkPHP使用LaneWechat验证微信公众号配置
7. 7. composer命令安装LaneWechat
8. 8. LaneWeChat框架简介
9. 9. iOS10权限配置问题及上传Itunes审核注意事项
10. 10. Xcode代码快速缩进快捷键

阅读排名

1. 1. 教新手们如何一步步创建iOS工程
2. 2. iOS性能优化工具Instruments如何使用
3. 3. CALayer精讲
4. 4. 今天聊聊iOS动态化的故事
5. 5. WebViewJavascriptBridge的详细使用
6. 6. iOS UICollectionView列表性能优化
7. 7. 微信小程序Page route错误及页面传参数接收不到
8. 8. iOS LLDB调试技巧
9. 9. Xcode代码快速缩进快捷键
10. 10. 微信小程序一步步实现分享功能及效果验证

$(document).ready(function() { ajax("http://tech.yunyingxbs.com/article/read/id/332.html", { }, function(data) { // alert(data['error']); }); }); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();

网站简介

本站隶属于深圳市运营帮网络科技有限公司。

标哥的技术博客空间到期不再续费，

原标哥的技术博客里的文章，将搬到本站


站在巨人的肩膀上，探索无止境的技术

本站开发者：黄仪标


记住本站：https://tech.yunyingxbs.com

项目合作

承接iOS App开发、安卓App开发、网站WEB开发、微信小程序开发，期待我们的合作！

合作联系

合作QQ：2057717055

合作电话：400-991-7621

让我们站在巨人的肩膀上

联系标哥

QQ：632840804

github：CoderJackyHuang

微信：huangyibiao520

努力提升自己，轻松应对市场形势的变化

CopyRight ©2017-2030 标哥的笔记 粤ICP备16094383号 All Right Reserved.

标哥的笔记 隶属于深圳市运营帮网络科技有限公司，官方网站： 运营小帮手