iOS中矩形视图显示圆形区域

前段时间项目中有个特殊的需求,折腾了好久,觉得有必要总结一下。我自己写了一个日历控件,产品要求选中的日期要用圆形图片显示出来,如图所示


图1.jpeg

方案一

刚开始以为只要用layer.cornerRadius就可以了,但是真正实现起来的时候才发现不是那么简单。因为我的日历控件宽度设置为屏幕宽度,那么问题就来了,日历一行只能显示七天,所以不同屏幕宽度下每个单元view的宽度就不固定了,而且还不是正方形,用layer.cornerRadius的话就会出来一个椭圆形的选中效果,第一种方案就放弃了。

方案二

第二种方案我是想着放一个遮罩,既然itemView不一定是正方形,那我们想办法让它只显示出来正方形的区域就好了。于是用UIBezierPath+CAShapeLayer画出一个圆形的遮罩添加在每个单元view的layer上,设置为itemView.layer.mask为画出的圆形CAShapeLayer,运行一看满足了要求。但出现一个新的问题就是,每次进到这个界面的时候屏幕都会卡顿,能看出明显的抖动,这肯定是不能忍的。只能查找原因优化~
大概原因是设置layer的mask属性会触发离屏渲染,大大的消耗了性能,所以卡顿。其中有一种优化方案就是开启GPU的栅格化,然后把需要渲染的画面缓存起来,等下次进来的时候可以直接加载

 self.layer.shouldRasterize = YES;
 self.layer.rasterizationScale = self.layer.contentsScale;

试了一下果然不卡了,但是新的问题又出现了,就是日历上的数字都变得模糊了。我推断出大概是以下原因,当shouldRasterize设成true时,layer被渲染成一个bitmap,并缓存起来,等下次使用时不会再重新去渲染了。实现圆角本身就是在做颜色混合(blending),如果每次页面出来时都blending,消耗太大,这时shouldRasterize = yes,下次就只是简单的从渲染引擎的cache里读取那张bitmap,节约系统资源。我这边要渲染的是文字,估计在layer被渲染成bitmap的过程或者读取bitmap的时候产生了一些误差,所以导致文字看上去有些模糊。
接着优化~

方案三

我在itemView上边覆盖一个中间为圆形透明区域的图片,正方形的图片中心点与itemView的中心点重合。这样解决了卡顿问题,而且也很清晰,但是新的问题出现了,就是我选中的时候要改变itemView的颜色,这时候如果itemView宽度大于高度的时候,就会出现左右两边的颜色没有被覆盖的情况,没办法……
接着优化~

方案四

反向选取区域,既然处理不了中间的圆形区域,那我能不能把周围的处理一下嘞~最后终于是功夫不负有心人,就是这个方法bezierPathByReversingPath,用代码说话吧

- (void)drawRect:(CGRect)rect{
    [super drawRect:rect];
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGFloat radius = MIN(self.width, self.height)*0.5-2;
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.bounds];
    UIBezierPath *clipPath = [[UIBezierPath bezierPathWithRoundedRect:CGRectMake((self.width-radius*2)*0.5, (self.height-radius*2)*0.5, radius*2, radius*2) cornerRadius:radius] bezierPathByReversingPath];
    [path appendPath:clipPath];
    CGContextAddPath(context, path.CGPath);
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextFillPath(context);
}

我自定义了一个继承自UILabel的GRCalendarTileLabel控件,在drawRect方法中把中间圆形区域以外的区域设置为了白色,这样一来不管你外边是什么形状,我只留出中间一块儿圆形区域,这里记得调用[super drawRect:rect]方法,不然给Label设置text的时候是不会显示的。如下图所示


图2.jpeg

这样一来,问题就算完美解决了。虽然过程中费了不少周折,但是问题解决的时候还是很有成就感滴,特此记录总结一下,希望能给有同样需求的小伙伴一点帮助,欢迎大家积极提出指导意见~~~

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

推荐阅读更多精彩内容

  • 每个UIView有一个伙伴称为layer,一个CALayer。UIView实际上并没有把自己画到屏幕上;它绘制本身...
    shenzhenboy阅读 3,091评论 0 17
  • 转载:http://www.jianshu.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 6,170评论 0 13
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,795评论 25 707
  • 1.xcode5和xcode7区别 1.xcode7没有Frameworks文件夹,xcode7内部会自动帮你导入...
    彼岸的黑色曼陀罗阅读 507评论 0 2
  • 漫天黄沙,依然想出来走走。 一个人走在嘈杂的街,呼啸而过的风,又怎会读懂一颗叮叮当当的心。迎面走来一对...
    蘭贵人阅读 220评论 0 1