UIView设置不触发离屏渲染的圆角

当我们需要给一个 View 设置圆角的时候,一般代码是这个样子

_label.layer.cornerRadius = 10;
_label.layer.masksToBounds = YES;

cornerRadius 和 maskToBounds 独立作用的时候都不会有太大的性能问题,但是当他俩结合在一起,就触发了离屏渲染,
Instrument的 Core Animation 有一个叫做 Color Offscreen-Rendered Yellow 的选项。它会将已经被渲染到屏幕外缓冲区的区域标注为黄色,下图中黄色的部分就是离屏渲染的地方。

离屏渲染是什么?

离屏渲染绘制 layer tree 中的一部分到一个新的缓存里面(这个缓存不是屏幕,是另一个地方),然后再把这个缓存渲染到屏幕上面。一般来说,你需要避免离屏渲染。因为这个开销很大。在屏幕上面直接合成层要比先创建一个离屏缓存然后在缓存上面绘制,最后再绘制缓存到屏幕上面快很多。这里面有 2 个上下文环境的切换(切换到屏幕外缓存环境,和屏幕环境)。

解决方案

如果你的 view 不需要让子视图超出部分不显示,且不需要给 view 的 image 绘制圆角,

可以查看 cornerRadius 属性的注释:

By default, the corner radius does not apply to the image in the layer’s contents property; it applies only to the background color and border of the layer. However, setting the masksToBounds property to true causes the content to be clipped to the rounded corners.

这个属性会影响 layer 的背景颜色和 border,所以如下代码即可避免离屏渲染。不设置 masksToBounds 属性也能设置圆角。

view.layer.cornerRadius = radius;
view.layer.backgroundColor = backgroundColor.CGColor;

但如果需要给 view 的 image 绘制圆角,如 UIImageView.image 和 UIButton 的背景图片。

则可以用 GraphicsContext 绘制一张带圆角的 image 给 view 来避免离屏渲染。

我将这个过程封装了一下

使用 JMRoundedCorner 来绘制圆角

platform :ios, '7.0'

pod 'JMRoundedCorner'

#import "UIView+RoundedCorner.h"
给 view 设置一个圆角边框
- (void)jm_setCornerRadius:(CGFloat)radius withBorderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth;
给 view 设置一个圆角背景颜色
- (void)jm_setCornerRadius:(CGFloat)radius withBackgroundColor:(UIColor *)backgroundColor;
给 view 设置一个圆角背景图
- (void)jm_setCornerRadius:(CGFloat)radius withImage:(UIImage *)image;
给 view 设置一个 contentMode 模式的圆角背景图
- (void)jm_setCornerRadius:(CGFloat)radius withImage:(UIImage *)image contentMode:(UIViewContentMode)contentMode;
设置所有属性配置出一个圆角背景图
- (void)jm_setCornerRadius:(CGFloat)radius withBorderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth backgroundColor:(UIColor *)backgroundColor backgroundImage:(UIImage *)backgroundImage contentMode:(UIViewContentMode)contentMode;
代码示例
    _avatarView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 7, 40, 40)];
    [_avatarView jm_setCornerRadius:20 withImage:[UIImage imageNamed:@"avatar.jpg"]];
    [self.contentView addSubview:_avatarView];
//添加占位图
    _avatarView.image = [placeholderImage jm_imageWithRoundedCornersAndSize:CGSizeMake(60, 60) andCornerRadius:30];

//下载完之后设置圆角 image
[[SDWebImageManager sharedManager] downloadImageWithURL:_model.avatarURL options:0 progress:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
    if (image) {
        [_avatarView jm_setCornerRadius:30 withImage:image];
    }
}];

这样,绘制出了圆角,也可以避免在大量 view 离屏渲染的时候拖慢 FPS


将 Demo 下下来,试试使用 JMRoundedCorner 带来的顺滑提升。

支持通过 JMRadius 设置4个角为不同的弧度,角度优先级为左上 > 右上 > 左下 > 右下,例如:
[_label jm_setJMRadius:JMRadiusMake(0, 10, 0, 10) withBorderColor:[UIColor redColor] borderWidth:0.5];

联系我

感谢

性能上的优缺点

优点:没有了离屏渲染,调整了 image 的像素大小以避免不必要的缩放

缺点:会造成图层混合,且因为只是绘制了一个带圆角的图片,所以不能使子视图超出圆角部分不显示。

注意事项

内存会持续提升,是正常现象,点击 home 键内存会回到正常水平,并非内存泄漏,只是绘制的缓存,在内存不足时会自动释放。

不要设置 view 的 backgroundColor,需要设置的话可以通过带 backgroundColor 参数的接口进行设置,例如:

- (void)jm_setCornerRadius:(CGFloat)radius withBackgroundColor:(UIColor *)backgroundColor;

控制器输出以下错误,这是 Xcode-7 的 BUG

<Error>: CGContextSaveGState: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.

Swift 版本:JMRoundedCornerSwift

更新日志

  • 2016/4/25 1.2.1 版本 : 使用 NSOperationQueue 代替 dispatch_queue,当重复设置圆角的时候会自动 cancel 上一次操作,感谢 kudocc 的 pull request。

  • 2016/3/12 1.1.0 版本 : 接口带上了 jm_ 前缀,JMRadius 添加圆角优先级,经过大量测试,解决细节上的一些小BUG。

  • 2016/3/3 1.0.3 版本 : 修复 label 里如果没有汉字,文字就不显示的 BUG,以及做了使 view 落在像素点上的优化。

  • 2016/2/28 1.0.0 版本 :发布正式版本

  • 2016/2/26 0.0.4 版本 :去掉了 size 参数及支持 JMRadius 设置4个角为不同的弧度

  • 2016/2/25 0.0.3 版本 :去掉了 UIImageView 这个中间控件

  • 2016/2/24 0.0.2 版本 :支持设置背景图片的绘制模式(cotentmode)

  • 2016/2/23 0.0.1 版本 :绘制一个圆角 image

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 207,113评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,644评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,340评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,449评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,445评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,166评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,442评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,105评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,601评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,066评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,161评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,792评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,351评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,352评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,584评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,618评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,916评论 2 344

推荐阅读更多精彩内容