UICollectionView 性能优化
来源:互联网 发布:淘宝长款女坎肩 编辑:程序博客网 时间:2024/06/06 00:29
标哥的笔记,是记录在日常学习技术和日常开发中那些年遇到过的坑!本站为新站,原”标哥的技术博客”中的文章会慢慢移到本站,欢迎收藏本站!
在使用本站过程中,有任何建议请联系标哥! 另,承接App开发、网站开发和微信小程序开发!欢迎联系我们
iOS UICollectionView列表性能优化
概述
本篇一起来学习如何优化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
- UICollectionView 性能优化
- iOS 10 UICollectionView 性能优化
- iOS 10 UICollectionView 性能优化
- UITableViewCell添加UICollectionView,能够左右滚动用于展示不同图片。利用UICollectionView的优点,从而性能上有很大优化
- iOS 浅谈UICollectionView的优化
- UICollectionView
- UICollectionView
- UICollectionView
- UICollectionView
- UICollectionView
- UICollectionView
- UICollectionView
- UICollectionView
- UICollectionView
- UICollectionView
- UICollectionView
- UICollectionView
- UICollectionView
- Android线程与线程池
- 为什么浏览器会使用多进程架构。
- Mysql全量数据同步Oracle步骤详解
- C++之模板
- 习题 4-8 特别困的学生 uva12108
- UICollectionView 性能优化
- 廖雪峰python教程之python基础
- Linux下ll命令与ls -l
- 剑指offer_9
- 遍历HashMap的四种方法
- file_get_contens 与curl的区别(你是不是从没有注意过)
- AutoLayout全新Android适配方式
- POJ 2763 Housewife Wind [树链剖分(边权)+树状数组]【数据结构】
- 谷歌背后的数学(PageRank)