Do not use the cornerradius set with rounded corners

工具集,iOS开发,Demo 归纳笔记

Posted by oragekk on December 26, 2016

此子必成大器

本文介绍内容主要是tableView的性能优化之不使用cornerRadius设置图片圆角

有人问我为什么tableView滑动不流畅,甚至闪退,其实和cell中的圆角头像使用了cornerRadius有关

优化点

  • 行高一定要缓存
  • 不要动态创建子视图
  • 所有子视图都要预先创建
  • 如果不需要显示可以设置hidden
  • 所有的子视图都应该添加到 contentView
  • 所有的子视图都必须要指定颜色
  • 不要动态的修改cornerRadius之类的图层渲染相关属性
  • 使用颜色不要带透明度,此处我们可以使用模拟器中的混合模式去检测,如果如下图所示出现红色,除了UILabel之外,其他的我们都应该尽量去处理
  • cell栅格化

    ``cell.layer.shouldRasterize = YES;``
      
    ``cell.layer.rasterizationScale = [UIScreen mainScreen].scale;``
    
  • 异步绘制 // 异步绘制 layer.drawsAsynchronously = YES;

Color Blended Layers模式下

下图是使用了CornerRadius设置圆角之后Color Misaligned Images检测效果 Color Misaligned Images模式下

此处使用了一张800** 800的图片设置在一个200200的ImageView上,没有做任何特殊处理


优化步骤

  1. 新建一个UIImage分类
  2. 定义方法

     - (void)oa_cornerImageWithSize:(CGSize)size fillColor: (UIColor *)fillColor
        
     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 bezierPathWithOvalInRect:rect];
     	[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);
     			}
     		});
     	});
     }
    

3.控制器中代码如下

  UIImageView *iv = [[UIImageView alloc]  initWithFrame:CGRectMake(0, 0, 200, 200)];
  iv.center = self.view.center;
  [self.view addSubview:iv];
  // 设置图像
  UIImage *image = [UIImage imageNamed:@"avatar.jpg"];
  [image oa_cornerImageWithSize:iv.bounds.size fillColor:[UIColor whiteColor] completion:^(UIImage *image) {
  iv.image = image;
  }]; 4.模拟器``Color Blended Layers``  和``Color Misaligned Images``检测结果如下图

优化之后

5.Color Misaligned Images 如果是黄色说明图像做过拉伸处理,如果在tableView快速滚动中,附加操作越多,性能越差 使用如上方法不仅可以裁切圆角头像,同时解决了800**800设置在200200的ImageView上会拉伸的问题 此举可以帮助tableView提升一部分性能