demo github https://github.com/1271284056/UIImageView-performance-optimize
图片拉伸或者有混合图层(有透明度)时候都会消耗性能,xcode有工具测试我们的项目质量.
主要我们看两种
运行程序,模拟器打开,点击debug后出来一些选项
解释:
Color Blended Layers: 这个是检测混合图层的,如果有view有透明度的话对这一项打钩会显示红色,正常显示绿色.
Color Misaligned Images: 打钩后这个检测图像是否变形,变形的话显示黄色.
优化
- Color Misaligned Images打钩后显示黄色的话,表明图片变形的话,我们写一个ImageView的分类,写一个方法传入图片和imageView的尺寸,返回一张这个尺寸的图片,imageView.image赋值时候用这个image:
- (UIImage *)rightSizeImage:(UIImage *)image andSize:(CGSize)imgeSize{
// 1. 根据 imageView 的大小，重新调整 image 的大小
// ` 重新生成一张和目标尺寸相同的图片
UIGraphicsBeginImageContextWithOptions(imgeSize, YES, 0);
// 绘制图像
[image drawInRect:CGRectMake(0, 0, imgeSize.width, imgeSize.height)];
// 取得结果
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
// 关闭上下文
UIGraphicsEndImageContext();
return result;
}
- Color Blended Layers:混合图层打钩后如果layer有透明度,会显示红色
如果检测到红色的话,找到透明度设置的地方,尽量不要设置透明度.
- 还有如果我们设置图片圆角时候如果用了 imageView.layer.cornerRadius 和imageView.layer.masksToBounds = YES,会造成混合图层.我们用异步绘制裁剪的方法解决.
在UIImage的分类里面建一个方法,传入图片尺寸,圆角半径,被裁后的背景颜色,返回一张处理后的图片,代码如下
/**
如何回调：block - iOS 开发中，block最多的用途就是在异步执行完成之后，通过参数回调通知调用方结果！
*/
- (void)cornerImageWithSize:(CGSize)size fillColor:(UIColor *)fillColor cornerRadius:(CGFloat)cornerRadius completion:(void (^)(UIImage *))completion{
dispatch_async(dispatch_get_global_queue(0, 0), ^{
NSTimeInterval start = CACurrentMediaTime();
// 1. 利用绘图，建立上下文
UIGraphicsBeginImageContextWithOptions(size, YES, 0);
CGRect rect = CGRectMake(0, 0, size.width, size.height);
// 2. 设置填充颜色
[fillColor setFill];
UIRectFill(rect);
// 3. 利用 贝赛尔路径 `裁切 效果
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:10];
[path addClip];
// 4. 绘制图像
[self drawInRect:rect];
// 5. 取得结果
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
// 6. 关闭上下文
UIGraphicsEndImageContext();
NSLog(@"%f", CACurrentMediaTime() - start);
// 7. 完成回调
dispatch_async(dispatch_get_main_queue(), ^{
if (completion != nil) {
completion(result);
}
});
});
}
处理后我们打开混合图层效果如下:
为SDWebImage增加两个方法,使网络请求回来的图片自动调整大小.demo里面写有
- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder size:(CGSize)picSize;
- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder size:(CGSize)picSize cornerRadius:(CGFloat)cornerRadius fillColor:(UIColor *)fillColor;
我们为imageView赋值时候用下面方法
UIImageView *imgeVi = [[UIImageView alloc] initWithFrame:CGRectMake(100, 200, 200, 300)];
//1. 本地裁剪
// UIImage *image = [UIImage imageNamed:@"003.jpg"];
// image = [image rightSizeImage:image andSize:imgeVI.bounds.size];
// imgeVi.image = image;
//2. 不带圆角 网络请求
// [imgeVi sd_setImageWithURL:[NSURL URLWithString:@"http://s6.mogujie.cn/b7/bao/130928/c7k0_kqyw6vckkfbgeq3wgfjeg5sckzsew_500x750.jpg_200x999.jpg"] placeholderImage:[UIImage imageNamed:@"loading.png"] size:CGSizeMake(img.bounds.size.width, img.bounds.size.height)];
//3. 带圆角 网络请求
[imgeVi sd_setImageWithURL:[NSURL URLWithString:@"http://s6.mogujie.cn/b7/bao/130928/c7k0_kqyw6vckkfbgeq3wgfjeg5sckzsew_500x750.jpg_200x999.jpg"] placeholderImage:[UIImage imageNamed:@"loading.png"] size:CGSizeMake(img.bounds.size.width, img.bounds.size.height) cornerRadius:10 fillColor:[UIColor whiteColor]];
[self.view addSubview:imgeVi];
