欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS开发 | 自定义不规则label

程序员文章站 2024-01-09 19:04:40
其中有一个不太规则的label: image.png image.png 这个label顶部的两个角是圆角,底部的两个角是直角,底部还有一个小三角。 思路 CAShapeLayer联合UIBezierPath画一个不规则的layer作为label.layer的mask。 具体实现 1.自定义一个继承 ......

其中有一个不太规则的label:

 

 
iOS开发 | 自定义不规则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)

圆角是用的二次贝塞尔曲线,关于二次贝塞尔曲线,我在网上看到一张比较形象的图:

 
iOS开发 | 自定义不规则label
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];

}

效果图:

 
iOS开发 | 自定义不规则label
image

demo

https://github.com/CaiWanFeng/IrregularLabel