场景
最近app改版,以下是截取的部分UI图:
顶部的这一部分我是把它看做UICollectionView的组头:
其中有一个不太规则的label:
这个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]) { // 初始化遮罩 self.maskLayer = [CAShapeLayer layer]; // 设置遮罩 [self.layer setMask:self.maskLayer]; // 初始化路径 self.borderPath = [UIBezierPath bezierPath]; } 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)
圆角是用的二次贝塞尔曲线,关于二次贝塞尔曲线,我在网上看到一张比较形象的图:
最终效果
- (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]; }
效果图:
demo
https://github.com/CaiWanFeng/IrregularLabel
总结
作者:无夜之星辰
链接:https://www.jianshu.com/p/fade8341c316