iOS 繪製圓角

QiShare發表於2018-10-03
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中獲取。

關注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)

推薦文章：
遞迴實現原則
奇舞週刊277期

相關文章