其中有一個不太規則的label: image.png image.png 這個label頂部的兩個角是圓角,底部的兩個角是直角,底部還有一個小三角。 思路 CAShapeLayer聯合UIBezierPath畫一個不規則的layer作為label.layer的mask。 具體實現 1.自定義一個繼承 ...
其中有一個不太規則的label:
image.png
這個label頂部的兩個角是圓角,底部的兩個角是直角,底部還有一個小三角。
思路
CAShapeLayer聯合UIBezierPath畫一個不規則的layer作為label.layer的mask。
具體實現
1.自定義一個繼承自UILabel的IrregularLabel
import "IrregularLabel.h"
@interface IrregularLabel ()
/** 遮罩 */
@property (nonatomic, strong) CAShapeLayer *maskLayer;
/** 路徑 */
@property (nonatomic, strong) UIBezierPath *borderPath;
@end
2.在初始化方法中進行相應初始化和設置
(instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
}
return self;
}
3.在layoutSubviews方法中進行路徑的設置
(void)layoutSubviews {
[super layoutSubviews];
// 遮罩層frame
self.maskLayer.frame = self.bounds;
// 設置path起點
[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)];
// 直線,回到起點
[self.borderPath addLineToPoint:CGPointMake(0, 10)];
// 將這個path賦值給maskLayer的path
self.maskLayer.path = self.borderPath.CGPath;
}
左上角的坐標是(0,0)
右下角的坐標是(maxX,maxY)
圓角是用的二次貝塞爾曲線,關於二次貝塞爾曲線,我在網上看到一張比較形象的圖:
image最終效果
(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 = @"這是一個不規則label";
self.label.textAlignment = NSTextAlignmentCenter;
self.label.backgroundColor = [UIColor redColor];
self.label.textColor = [UIColor whiteColor];
self.label.font = [UIFont boldSystemFontOfSize:16];
}
效果圖:
imagedemo
https://github.com/CaiWanFeng/IrregularLabel