如何提高ios界面流畅度相信这是每个开发者都在孜孜不倦攻克的问题,因为笔者也是小白所以难得也就不写了,来说点简单实在的。
今天的主题是列表中的圆角处理。
记得最初开发时设置圆角直接使用
self.imageView.layer.cornerRadius = 5.0f;
self.imageView.layer.masksToBounds = YES;
当然了效果不是一般的好,书写简单方便呗。
可是后来当列表中圆角设置多时明显会感觉到页面在颤抖,查阅网上资料后接触到了离屏渲染这个词汇,才明白过来这才是造成页面颤抖的最终元凶。
再后来网上资料都说通过采用CAShapeLayer
和UIBezierPath
相结合的方式来设置圆角是比较好的解决方案滑动帧数基本能保持在60帧左右,于是便尝试了一下,效果也挺明显的,流畅了许多。
然而好景不长,最近开发的界面相当的复杂界面圆角元素非常多,使用上述方法设置圆角后界面又在颤抖,于是下定决心再一次踏上了圆角优化的不归路。
以前优化的思路一直是对显示图片的控件做的操作,可是如果转变一下,如果是加载一个带圆角的图片呢?按照这样的设想岂不是能完美的解决离屏渲染造成的页面卡顿。但是用户传图不可能提前做成带圆角的吧,所以只能是在图片下载出来后显示出来前做处理了。
下面就上核心代码逻辑(因笔者网络图片加载用的是SDWebImage
所以下面以sd
加载图片为例)
//普通的加载网络图片方式(已不能满足需求,需要改进)
[self sd_setImageWithURL:url placeholderImage:[UIImage imageNamed:placeholderImage]];
//设置圆角图片的加载方法
[self sd_setImageWithURL:url placeholderImage:[UIImage imageNamed:placeholderImage] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
if (!error) {
//图片需要手动缓存处理成圆角的图片(该方法用的是YYImage里面的处理方式)
UIImage *radiusImage = [image imageByRoundCornerRadius:image.size.width * (radius / self.size.width) corners:corners borderWidth:borderWidth borderColor:borderColor borderLineJoin:borderLineJoin];
self.image = radiusImage;
//将带圆角的图片缓存到SD的缓存中
[[SDImageCache sharedImageCache] storeImage:radiusImage forKey:cacheUrlStr completion:nil];
//清除原有非圆角图片缓存
[[SDImageCache sharedImageCache] removeImageForKey:url.absoluteString withCompletion:nil];
}
}];
到此为止就已经结束了,回过头来想想其实巨简单。
附上demo的地址:demo传送门