其中有一個(gè)不太規(guī)則的label：

image.png

這個(gè)label頂部的兩個(gè)角是圓角，底部的兩個(gè)角是直角嘉蕾，底部還有一個(gè)小三角贺奠。

思路

CAShapeLayer聯(lián)合UIBezierPath畫一個(gè)不規(guī)則的layer作為label.layer的mask。

具體實(shí)現(xiàn)

1.自定義一個(gè)繼承自UILabel的IrregularLabel

import "IrregularLabel.h"

@interface IrregularLabel ()

/** 遮罩 */

@property (nonatomic, strong) CAShapeLayer *maskLayer;

/** 路徑 */

@property (nonatomic, strong) UIBezierPath *borderPath;

@end

2.在初始化方法中進(jìn)行相應(yīng)初始化和設(shè)置

• (instancetype)initWithFrame:(CGRect)frame {

  if (self = [super initWithFrame:frame]) {

    // 初始化遮罩
  
    self.maskLayer = [CAShapeLayer layer];
  
    // 設(shè)置遮罩
  
    [self.layer setMask:self.maskLayer];
  
    // 初始化路徑
  
    self.borderPath = [UIBezierPath bezierPath];
  

  }

  return self;

}

3.在layoutSubviews方法中進(jìn)行路徑的設(shè)置

• (void)layoutSubviews {

  [super layoutSubviews];

  // 遮罩層frame

  self.maskLayer.frame = self.bounds;

  // 設(shè)置path起點(diǎn)

  [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)];

  // 直線以清，回到起點(diǎn)

  [self.borderPath addLineToPoint:CGPointMake(0, 10)];

  // 將這個(gè)path賦值給maskLayer的path

  self.maskLayer.path = self.borderPath.CGPath;

}

左上角的坐標(biāo)是(0,0)

右下角的坐標(biāo)是(maxX,maxY)

圓角是用的二次貝塞爾曲線儿普，關(guān)于二次貝塞爾曲線，我在網(wǎng)上看到一張比較形象的圖：

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 = @"這是一個(gè)不規(guī)則label";

  self.label.textAlignment = NSTextAlignmentCenter;

  self.label.backgroundColor = [UIColor redColor];

  self.label.textColor = [UIColor whiteColor];

  self.label.font = [UIFont boldSystemFontOfSize:16];

}

效果圖：

image

demo

https://github.com/CaiWanFeng/IrregularLabel