级别： ★☆☆☆☆

标签：「iOS切圆角」「layer圆角」「CAShapeLayer圆角」

作者：

审校：

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

一、对视图绘制4个圆角

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

// 初始化imageView1UIImageView *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来绘制圆角，以达到如下效果：

// 初始化imageView2UIImageView *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];// 初始化shapeLayerCAShapeLayer *shapeLayer = [CAShapeLayer layer];// 设置绘制路径shapeLayer.path = bezierPath.CGPath;// 将shapeLayer设置为imageView2的layer的mask(遮罩)imageView2.layer.mask = shapeLayer;复制代码

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

使用方式如下：

// 初始化imageView3UIImageView *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]];复制代码

实现效果如下：

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

关注我们的途径有：

QiShare(微信公众号)

推荐文章：