iOS学习笔记iOS程序猿UI

iOS开发 | 自定义不规则label

2018-04-01  本文已影响1473人  Lol刀妹

场景

最近app改版,以下是截取的部分UI图:

顶部的这一部分我是把它看做UICollectionView的组头:

其中有一个不太规则的label

这个label顶部的两个角是圆角,底部的两个角是直角,底部还有一个小三角。

思路

CAShapeLayer联合UIBezierPath画一个不规则的layer作为label.layermask

具体实现

1.自定义一个继承自UILabelIrregularLabel

#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)

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


图片来自CSDN

最终效果

- (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

总结


2018年4月10日更新

有读者说要带箭头的label:


其实思路是一样的:

- (void)layoutSubviews {
    [super layoutSubviews];
    
    // 遮罩层frame
    self.maskLayer.frame = self.bounds;
    
    
    // 设置path起点
    [self.borderPath moveToPoint:CGPointMake(0, 10)];
    
    // 箭头
    [self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2-5, 10)];
    [self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2, 0)];
    [self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2+5, 10)];
    
    // 到右上角
    [self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width, 10)];
    // 到右下角
    [self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width, 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;
}

如果想要文本相对方形框居中,可以在view上放一个label。

已更新到GitHub。

上一篇下一篇

猜你喜欢

热点阅读