iOS开发 | 自定义不规则label 场景最近app改版

场景

最近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

http://github.com/CaiWanFeng/IrregularLabel

总结

作者：无夜之星辰

链接：http://www.jianshu.com/p/fade8341c316

更多推荐：

iOS组件化

格物致知iOS类与对象

轻量级低风险 iOS热更新方案