iOS 绘制圆角

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

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

qr_qishare_01.png

一、对视图绘制4个圆角

我们可以通过CALayer的cornerRadius属性绘制圆角，以达到如下效果：

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;

二、指定视图的角绘制圆角

我们可以通过UIBezierPath和CAShapeLayer来绘制圆角，以达到如下效果：

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;

以上两种绘制圆角的方法都是基于UIView和CALayer（默认读者已了解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期