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. ThinkPHP数据库多字段相同条件快捷查询写法2. ThinkPHP分组汇总统计如何实现3. ThinkPHP5+ajaxfileupload无刷新上传4. ThinkPHP5中URL带参数时分页参数处理办法5. 树形菜单插件6. ThinkPHP使用LaneWechat验证微信公众号配置7. composer命令安装LaneWechat8. LaneWeChat框架简介9. iOS10权限配置问题及上传Itunes审核注意事项10. Xcode代码快速缩进快捷键 阅读排名 1. 教新手们如何一步步创建iOS工程2. iOS性能优化工具Instruments如何使用3. CALayer精讲4. 今天聊聊iOS动态化的故事5. WebViewJavascriptBridge的详细使用6. iOS UICollectionView列表性能优化7. 微信小程序Page route错误及页面传参数接收不到8. iOS LLDB调试技巧9. Xcode代码快速缩进快捷键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. 标哥的笔记 隶属于深圳市运营帮网络科技有限公司，官方网站： 运营小帮手