iOS自定义带两个圆角的UILabel

作者: 雪山飞狐_91ae | 来源:发表于2018-04-03 22:05 被阅读119次
    • 这里要实现的是带有两个圆角的自定义的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];
    

    相关文章

      网友评论

        本文标题:iOS自定义带两个圆角的UILabel

        本文链接:https://www.haomeiwen.com/subject/dyxhhftx.html