把我之前發(fā)布在簡(jiǎn)書(shū)的博客搬運(yùn)過(guò)來(lái)。

---

---

場(chǎng)景

最近 App 改版，以下是截取的部分 UI 設(shè)計(jì)圖：

其中有一個(gè)不規(guī)則的 label：

這個(gè) label 頂部的兩個(gè)角是圓角，底部的兩個(gè)角是直角，底部還有一個(gè)小三角。

思路

CAShapeLayer 聯(lián)合 UIBezierPath 畫(huà)一個(gè)不規(guī)則的 layer 作為 label.layer 的 mask。

具體實(shí)現(xiàn)

1. 自定義一個(gè)繼承自UILabel的IrregularLabel

#import "IrregularLabel.h"@interface IrregularLabel ()/** 遮罩 */
@property (nonatomic, strong) CAShapeLayer *maskLayer;
/** 路徑 */
@property (nonatomic, strong) UIBezierPath *borderPath;@end

2. 在初始化方法中進(jìn)行相應(yīng)初始化和設(shè)置

- (instancetype)initWithFrame:(CGRect)frame {if (self = [super initWithFrame:frame]) {// 初始化遮罩self.maskLayer = [CAShapeLayer layer];// 設(shè)置遮罩[self.layer setMask:self.maskLayer];// 初始化路徑self.borderPath = [UIBezierPath bezierPath];}return self;
}

3. 在layoutSubviews方法中進(jìn)行路徑的設(shè)置

- (void)layoutSubviews {[super layoutSubviews];// 遮罩層frameself.maskLayer.frame = self.bounds;// 設(shè)置path起點(diǎn)[self.borderPath moveToPoint:CGPointMake(0, 10)];// 左上角的圓角[self.borderPath addQuadCurveToPoint:CGPointMake(10, 0) controlPoint:CGPointMake(0, 0)];// 直線，到右上角[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width - 10, 0)];// 右上角的圓角[self.borderPath addQuadCurveToPoint:CGPointMake(self.bounds.size.width, 10) controlPoint:CGPointMake(self.bounds.size.width, 0)];// 直線，到右下角[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height)];// 底部的小三角形[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2+5, self.bounds.size.height)];[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2, self.bounds.size.height-5)];[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2 - 5, self.bounds.size.height)];// 直線，到左下角[self.borderPath addLineToPoint:CGPointMake(0, self.bounds.size.height)];// 直線，回到起點(diǎn)[self.borderPath addLineToPoint:CGPointMake(0, 10)];// 將這個(gè)path賦值給maskLayer的pathself.maskLayer.path = self.borderPath.CGPath;
}

• 左上角的坐標(biāo)是 (0,0)
• 右下角的坐標(biāo)是 (maxX,maxY)

圓角是用的二次貝塞爾曲線，關(guān)于二次貝塞爾曲線，我在網(wǎng)上看到一張比較形象的圖：

3個(gè)點(diǎn)確定一個(gè)圓角。

最終效果

- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.self.label = [[IrregularLabel alloc] initWithFrame:CGRectMake(90, 200, 200, 40)];[self.view addSubview:self.label];self.label.text = @"這是一個(gè)不規(guī)則label";self.label.textAlignment = NSTextAlignmentCenter;self.label.backgroundColor = [UIColor redColor];self.label.textColor = [UIColor whiteColor];self.label.font = [UIFont boldSystemFontOfSize:16];
}

效果圖：

---

箭頭 label

有讀者說(shuō)要帶箭頭的 label：

其實(shí)思路是一樣的：

- (void)layoutSubviews {[super layoutSubviews];// 遮罩層frameself.maskLayer.frame = self.bounds;// 設(shè)置path起點(diǎn)[self.borderPath moveToPoint:CGPointMake(0, 10)];// 箭頭[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2-5, 10)];[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2, 0)];[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2+5, 10)];// 到右上角[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width, 10)];// 到右下角[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height)];// 到左下角[self.borderPath addLineToPoint:CGPointMake(0, self.bounds.size.height)];// 回到起點(diǎn)[self.borderPath addLineToPoint:CGPointMake(0, 10)];// 將這個(gè)path賦值給maskLayer的pathself.maskLayer.path = self.borderPath.CGPath;
}

如果想讓文本相對(duì)方形框居中，可以在 view 上放一個(gè) label。