UITableViewCell 性能优化之切圆角

UITableViewCell 性能优化之切圆角

圆角头像，在很多 App 中都很常见。
无非就是现实一张圆形的图片。
做方便的做法是使用 cornerRadius 属性来切圆角。

UIImageView *iv = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
iv.center = self.view.center;
iv.layer.cornerRadius = iv.bounds.size.width * 0.5;
iv.layer.masksToBounds = YES;
[self.view addSubview:iv];

iv.image = [UIImage imageNamed:@"lzy.jpg"];

界面：

使用 cornerRadius "切"出来的圆角

perfect！！一张圆角图片就切出来了。
这有什么难的？so easy 啊。
我也没做什么特别大的努力啊。圆角和性能优化有啥关系，不就是一个属性吗？

---

使用 cornerRadius 会产生什么问题？为什么谈到切圆角性能优化的时候，必须说道这个属性？

我们打开这个 UI 界面的层次结构的观察。

image.png

发现，切了圆角的图片，外围仍然有个矩形。
感觉像是并没有把矩形切了个原形，而是把四个角的内容变成透明的了？

红色 = 混合图层 = 透明处理 = 更多的 GPU 消耗

打开模拟器的 Color Blended Layers(混合图层),发现UIImageView 的这一片是红色。

模拟器只要出现了红色，就表明这一片做了透明处理。

如果是单单一张图片，且位置从始至终不发生变化，OK 啦。没什么大问题。
但是如果，是一张在 UITableViewCell 上的图片，且 Cell 在快速滑动的时候。
那么 GPU 就无时不刻的都要计算这个透明度。因为要显示和两个图层的综合信息。
这无疑会消耗一部分 GPU 的性能。如果这种混合的情况太多的话，一定会造成 Cell 滑动时候的卡顿了。

---

现在问题：

1. 我们需要一个圆角的图片，但是使用 cornerRadius 切了个假圆角，实际上是把四周透明了。
2. 有透明就有混合图层。
3. 有混合图层，GPU 计算量就会变大。
4. 图层固定还好，如果图层一直在移动(cell 滚动)，那么对 GPU 来说是一个性能考验。

要解决的：

1. 我要一张圆形的图片。
2. 不要使用 cornerRadius。
3. 真真正正的把四个角给切了。
4. 不使用混合图层，减少 GPU 的压力 提高性能。

---

解决思路

目标：

既然，使用 cornerRadius，做的是假切割，造成了透明&混合图层。
我们就需要一种真切割的方式。
真真正正的把图片的四个角给切了。
不再是 cornerRadius 会造成透明。

解决方案：

使用核心绘图 + 贝塞尔圆形切割 产生一张新真正切割过四个角的图图片就好了。

贴代码

- (void)rl_cornerImageWithSize:(CGSize)size fillColor:(UIColor *)fillColor complectionBlock:(void(^)(UIImage *))complectionBlock {
    // 耗时操作放在异步线程
    dispatch_async(dispatch_get_global_queue(0, 0), ^{
        // 1. 获取图片画板
        UIGraphicsBeginImageContextWithOptions(size, YES, 0);

        // 2. 填充画板的底色
        [fillColor setFill];
        CGRect rect = CGRectMake(0, 0, size.width, size.height);
        UIRectFill(rect);

        // 3. 开始裁切。矩形圆形路径
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];
        [path addClip];

        // 4. 在底色上画图
        [self drawInRect:rect];

        // 5. 从画板获取图片
        UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();

        // 6. 关闭上下文
        UIGraphicsEndImageContext();

        // 7. 回到主线程，返回图片。
        dispatch_async(dispatch_get_main_queue(), ^{
            if (complectionBlock) {
                complectionBlock(resultImage);
            }
        });
    });
}

UIImageView *iv = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
iv.center = self.view.center;
[self.view addSubview:iv];
[[UIImage imageNamed:@"lzy.jpg"] rl_cornerImageWithSize:iv.bounds.size fillColor:[UIColor whiteColor] complectionBlock:^(UIImage *resultImage) {
   iv.image = resultImage;
}];

运行看效果：

最终效果

达成目标：

1. 需要一个切了圆角的图片 。[√ ]
2. 不要产生混合图层。[√ ]