iOS自定义带两个圆角的UILabel
2018-04-03 本文已影响119人
雪山飞狐_91ae
-
这里要实现的是带有两个圆角的自定义的UIlabel
两个圆角的UIlabel.png - 主要思路是利用贝塞尔曲线绘制masklayer的轨迹。
下面直接看代码:
#import "CustomizeLabel.h"
@interface CustomizeLabel()
@property (nonatomic, strong)CAShapeLayer *maskLayer;
@property (nonatomic, strong)UIBezierPath *borderPath;
@end
@implementation CustomizeLabel
- (instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if(self){
_maskLayer = [CAShapeLayer layer];
[self.layer setMask:_maskLayer];
self.borderPath = [UIBezierPath bezierPath];
}
return self;
}
- (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, 0)];
//直线,到右下角
[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height-10)];
//右下角的圆角
[self.borderPath addQuadCurveToPoint:CGPointMake(self.bounds.size.width-10, self.bounds.size.height) controlPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height)];
//底部的小三角形
[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2.0 +5, self.bounds.size.height)];
[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2.0, self.bounds.size.height - 5)];
[self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2.0 -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;
}
@end
- 使用:
CustomizeLabel *label = [[CustomizeLabel alloc] initWithFrame:CGRectMake(100, 100, 200, 100)];
label.text = @"现在我们来测试一下这个自定义的按钮";
label.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:label];