iOS一个简单的设置圆角不引起性能问题的分类

写在前面

iOS设置圆角的性能探究已经是一个老生常谈的问题了,众所周知,如果直接使用layercornerRadius + masksToBounds虽然可以很方便的完成圆角设置,但会引起离屏渲染,导致性能问题,在列表视图中过多的圆角设置就会导致滑动卡顿,现在主流的方案就是在获取图片的一刻开启异步线程对图片进行相应的圆角处理,把图片处理成想要的图片在返回主线程进行显示,想要便捷的达成此目的推荐YY大神的YYWebImage,其在获取图片的时候的时候提供了一个transformblock,在此block中你可以完成图片的处理工作,但是在实际的使用中,我觉得第二种方案还是有些不方便的地方,具体如下:

1、对于网络图片,大多数要提前设置展位图,如果美工没有提供圆角占位图片,你需要相应的对占位图片进行圆角处理;

2、对于混合视图需要圆角的,比如下图,图片上有一个Label,label也需要圆角化,你也得对label进行单独的处理(这里我有个小tip:如果必须使用这种方式,我的做法是生成一张左下角和右下角圆角化的黑色背景图片,然后使用colorWithPatternImage 将图片设置label的背景色,这样你不需要为这个黑色的圆角地图另外创建一个视图)

图片上有Label.png

3、如果多处需要重复使用同一个图片地址,使用YYWebImage时,其会将tranform后的图片缓存起来,所以就会出现,如果你在一个地方圆角化了该图片,在另一个地方使用时依然会是圆角化的图片,这显然在有时候是不满足需求的,不过你可以使用不同的YYWebImageManager来管理相同图片地址而需要不同transform的图片;

综上所述,虽然可以通过一些方式解决上述问题,如果有一个性能优秀且能避免上诉问题产生的圆角化方案就更好了。

我的方案

要避免上述问题,我们就不能从修改图片入手了,还是需要从视图层次入手,我采取的方案其实也相当简单,如果某个视图需要圆角化,我只需要在该视图上添加一个子layer到最上层,用于遮盖该视图及其子视图,设置layer的图片为刚好能够遮盖成所需圆角样子并且图片颜色刚好是该视图父视图的背景颜色就达到达到想要的效果的,由于该遮罩layer在最上层,所以对于上面所提到的第二个缺点中的Label,也顺带着遮罩了,所以无需再次处理,当然由于我们是在视图层次而非图片层次处理的圆角,上面的第一个和第三个缺点也不存在了,这样其实很简单的解决的上诉三个缺点,下面来看看相关的代码:

1、首先是绘制遮盖layer的图层图片,当然我们可以让美工切图给我们,但是如果对于每个尺寸的视图都去切图的话,工作量就相应增大了,其实我们值需要绘制一张如下的图片,如果是空白,请点击图片查看

带边框.png
不带边框.png

先来看看绘制代码

/**我创建了一个分类用于创建相应的遮罩图片*/
@implementation UIImage (XWAddForRoundedCorner)

/**提供一个在一个指定的size中绘制图片的便捷方法*/
+ (UIImage *)xw_imageWithSize:(CGSize)size drawBlock:(void (^)(CGContextRef context))drawBlock {
    if (!drawBlock) return nil;
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    if (!context) return nil;
    drawBlock(context);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

/**绘制方法的具体逻辑,遮罩图片的逻辑是绘制一个矩形,然后在绘制一个相应的圆角矩形,然后填充矩形和圆角矩形的中间部分为父视图的背景色*/
+ (UIImage *)xw_maskRoundCornerRadiusImageWithColor:(UIColor *)color cornerRadii:(CGSize)cornerRadii size:(CGSize)size corners:(UIRectCorner)corners borderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth{
    return [UIImage xw_imageWithSize:size drawBlock:^(CGContextRef  _Nonnull context) {
        CGContextSetLineWidth(context, 0);
        [color set];
        CGRect rect = CGRectMake(0, 0, size.width, size.height);
        //绘制一个矩形,这里发-0.3是为了防止边缘的锯齿,
        UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:CGRectInset(rect, -0.3, -0.3)];
        //绘制圆角矩形,这里的0.3是为了防止内边框的锯齿
        UIBezierPath *roundPath = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, 0.3, 0.3) byRoundingCorners:corners cornerRadii:cornerRadii];
        [rectPath appendPath:roundPath];
        CGContextAddPath(context, rectPath.CGPath);
        //注意要用EOFill方式进行填充而非Fill方式
        CGContextEOFillPath(context);
        //如下是绘制边框,原理依旧是绘制一个外边框然后根据边框宽度绘制一个内边框同样采取EOFill的方式进行填充即可
        if (!borderColor || !borderWidth) return;
        [borderColor set];
        UIBezierPath *borderOutterPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:cornerRadii];
        UIBezierPath *borderInnerPath = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, borderWidth, borderWidth) byRoundingCorners:corners cornerRadii:cornerRadii];
        [borderOutterPath appendPath:borderInnerPath];
        CGContextAddPath(context, borderOutterPath.CGPath);
        CGContextEOFillPath(context);
    }];
}

@end

上述的绘制方法充分利用了系统绘制圆角的方法bezierPathWithRoundedRect + EOFill,其实最开始我是考虑自己绘制四分之一的圆弧来构建圆角的,后来发现不但代码多了不少,而且绘制出来的圆角始终没有系统这个绘制方法的圆润,我打印的系统的圆角路径,发现其应该不是四分之一圆弧,发现他的控制点取值有些奇怪,我也不太清楚是如何取的,但是效果的确要好一点,总之采取如上的EOFill方式取巧,绘制的圆角图片可以达到和系统的cornerRadius完全相同的效果!

2、对于绘制的图片,我们应该进行保存,当遇到颜色,圆角以及边框等属性完全相同的绘制请求时候,我们可以及时复用,避免多次创建

优缺点

优点的话,主要是避免了去解决上面说道提到的几个问题,如果你有遇到上面3个问题的困扰,我觉得这是相当不错的方案

再罗列缺点:

1、由于创建图片需要一个背景色,该背景色源于需要遮盖视图的父视图的颜色,如果该父视图的颜色不是纯色或者存在透明的话,此时该方式就不适用了,此时还是应该采取处理图片的方式来解决;

2、如果父视图的颜色会变化,比如点击cell的时候,此刻你需要同时更新遮罩图片为相应颜色的图片,所以需要多写一些代码。

封装

对于此方案,我封装了一个简单的UIView的分类UIView+XWAddForRoundedCorner来达到目的,github地址是XWCornerRadius ,此分类分成简单只有3个API ,且代码只有200行,没有其它依赖,具体API如下:


/**
 设置一个四角圆角

 @param radius 圆角半径
 @param color  圆角背景色
 */
- (void)xw_roundedCornerWithRadius:(CGFloat)radius cornerColor:(UIColor *)color;

/**
 设置一个普通圆角

 @param radius  圆角半径
 @param color   圆角背景色
 @param corners 圆角位置
 */
- (void)xw_roundedCornerWithRadius:(CGFloat)radius cornerColor:(UIColor *)color corners:(UIRectCorner)corners;

/**
 设置一个带边框的圆角

 @param cornerRadii 圆角半径cornerRadii
 @param color       圆角背景色
 @param corners     圆角位置
 @param borderColor 边框颜色
 @param borderWidth 边框线宽
 */
- (void)xw_roundedCornerWithCornerRadii:(CGSize)cornerRadii cornerColor:(UIColor *)color corners:(UIRectCorner)corners borderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth;

你只需要调用相应的API就能完成一个圆角 + 边框的遮罩效果,相同遮罩图片的复用我也做了相关处理了,具体使用如下:

 [headerView xw_roundedCornerWithCornerRadii:XWSizeMake(40, 40) cornerColor:[UIColor whiteColor] corners:UIRectCornerAllCorners borderColor:[UIColor redColor] borderWidth:widthRatio(2)];

工程的demo中包含一个如下的列表(该截图来自很老的ipod),演示了具体的使用方法,请自行查看:

demo列表.gif

写在最后

对于此方法我已经做了简单的测试,性能还是相当不错的,虽然有图层混合,但是相对于离屏渲染,都是小问题,如上图在我的老ipod的上也相当流畅,大家可以自行尝试,更多的关于这几种方案的性能比较,网上也已经很多了,大家可以自行查找,当然你也可以使用YYWebImage来处理图片的尺寸来进一步优化图片的展示, 如果在某些非常复杂的场景想要进一步提高流畅度,YYKit的源码以及 YY大神关于性能的相关文章绝对值得反复阅读,不过对于优化的态度,我觉得还是先考虑需求的实现,再来考虑性能优化最好,所谓过早的性能优化都是魔鬼嘛~~~对于该圆角思路如果有疑问欢迎提出,如果觉得有帮助,感谢star,再复习一遍github地址:XWCornerRadius

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,520评论 25 707
  • 转载://www.greatytc.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 6,157评论 0 13
  • 久未作诗书,忘罢笔耕读。 青丝未成雪,黄鸡唱梦图。 身似千般重,人行旅穷途。 不堪风霜月,怨天恨气抒。 可笑江郎笔...
    糊涂印象阅读 180评论 -1 1
  • 人们都说人死后会变成一颗星星,今天天气很好晚上却不见一颗星星。我想知道大伯去了哪里,是藏在云里了吗? 2月19日,...
    沫殇渝阅读 350评论 4 2
  • 1.做活动 2.发单 3.技能训练 4.口才训练
    快乐番茄阅读 116评论 0 0