iOS 绘制圆角

级别: ★☆☆☆☆
标签:「iOS切圆角」「layer圆角」「CAShapeLayer圆角」
作者: Xs·H
审校: QiShare团队

项目中会常有圆角(或圆形)显示视图的需求(比如用户头像的显示),也会有部分圆角显示视图的需求(比如从屏幕底层弹起的浮层,只有左上角和右上角为圆角)。
这里有一张方形的图片,用UIImageView承载,如下图:

qr_qishare_01.png

一、对视图绘制4个圆角

我们可以通过CALayercornerRadius属性绘制圆角,以达到如下效果:

qr_qishare_02.png

代码如下:

// 初始化imageView1
UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"qr_qishare"]];
imageView1.center = CGPointMake(self.view.bounds.size.width / 2, imageView1.bounds.size.height);
imageView1.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
[self.view addSubview:imageView1];

// 设置layer超出父图层的部分剪切掉
imageView1.layer.masksToBounds = YES;
// 设置圆角半径,若imageView1为正方形,设置圆角半径为边长的一半可实现圆效果
imageView1.layer.cornerRadius = 20.0;
// 设置的描边宽度
// imageView1.layer.borderWidth = 10.0;
// 设置的描边颜色
// imageView1.layer.borderColor = [UIColor darkGrayColor].CGColor;
二、指定视图的角绘制圆角

我们可以通过UIBezierPathCAShapeLayer来绘制圆角,以达到如下效果:

qr_qishare_03.png

代码如下:

// 初始化imageView2
UIImageView *imageView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"qr_qishare"]];
imageView2.center = CGPointMake(self.view.bounds.size.width / 2, imageView2.bounds.size.height * 2 + 30.0);
imageView2.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
[self.view addSubview:imageView2];
    
// 创建贝塞尔曲线,指定绘制区域、角和角半径
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:imageView2.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:(CGSize){20.0}];
// 绘制4个角,指定角半径
// bezierPath = [UIBezierPath bezierPathWithRoundedRect:imageView2.bounds cornerRadius:20.0];
// 绘制圆
// bezierPath = [UIBezierPath bezierPathWithOvalInRect:imageView2.bounds];
// 初始化shapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
// 设置绘制路径
shapeLayer.path = bezierPath.CGPath;
// 将shapeLayer设置为imageView2的layer的mask(遮罩)
imageView2.layer.mask = shapeLayer;

以上两种绘制圆角的方法都是基于UIViewCALayer(默认读者已了解UIView和CALayer),因为作者的项目中有多处绘制圆角的需求,便对UIView封装了一个类别UIView+QiCornerCliper

使用方式如下:

// 初始化imageView3
UIImageView *imageView3 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"qr_qishare"]];
imageView3.center = CGPointMake(self.view.bounds.size.width / 2, imageView3.bounds.size.height * 2 + 30.0);
imageView3.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
[self.view addSubview:imageView3];
    
// 使用封装的方法绘制圆角
[imageView3 qi_clipCorners:UIRectCornerTopLeft radius:20.0 border:5.0 color:[UIColor redColor]];

实现效果如下:


qr_qishare_04.png

UIView+QiCornerCliper源码可从工程QiViewCornerCliper中获取。


了解更多iOS及相关新技术,请关注我们的公众号:

关注我们的途径有:
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章:
递归实现原则
奇舞周刊277期

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 CALayer IOS SDK详解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi阅读 5,216评论 3 23
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,026评论 3 119
  • 有你, 有我, 足矣! 我们的爱情不需要太多东西去点缀!
    没有冬季的夜阅读 268评论 0 0
  • 网络,是我们的高科技的代表;电脑,是人类步入新时代的证明;因特网,是大家便捷沟通的最好工具。 如今,上上网,玩玩游...
    Lyyyyyyyy_阅读 232评论 0 0
  • 文/清安依旧 嘿,朋友。 还记得,上次和他一起看过的电影吗。 还记得,和他一起去过的那几家餐厅吗。 还记得,当初和...
    清安依旧阅读 3,437评论 115 39