其中有一个不太规则的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)

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

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

}

效果图:

 
image

demo

https://github.com/CaiWanFeng/IrregularLabel

iOS开发 | 自定义不规则label的更多相关文章

  1. iOS 开发自定义一个提示框

    在开发的时候,会碰到很多需要提示的地方,提示的方法也有很多种,ios 8 以前的版本有alertview还是以后用的alertController,都是这种作用, 但是不够灵活,而且用的多了,用户体验 ...

  2. iOS开发自定义字体之静态字体

    最后更新 2017-04-25 在iOS开发中经常会用到字体, 一般字体文件比较小的,单一的,几十k, 可以通过内置进去;如果字体文件比较多或者字体文件比较大,通常通过动态加载方式. 静态加载方式 将 ...

  3. IOS开发自定义CheckBox控件

    IOS本身没有系统的CheckBox组件,但是实际开发中会经常用到,所以专门写了一个CheckBox控件,直接上代码 效果图: UICheckBoxButton.h文件如下: #import #imp ...

  4. [IOS 开发] 自定义(重写) UITableViewCell的高亮背景色

    IOS的sdk中,对UITableViewCell的高亮背景色只支持两种颜色,分别为UITableViewCellSelectionStyleBlue和UITableViewCellSelection ...

  5. iOS开发-自定义UIAlterView(iOS 7)

    App中不可能少了弹框,弹框是交互的必要形式,使用起来也非常简单,不过最近需要自定义一个弹框,虽然iOS本身的弹框已经能满足大部分的需求,但是不可避免还是需要做一些自定义的工作.iOS7之前是可以自定 ...

  6. iOS开发小技巧 - label中的文字添加点击事件

    Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...

  7. IOS开发自定义tableviewcell的注意点😄

    自定义tableviewcell 1.xib,nib拖控件:awakefromnib: 设置2,不拖控件:- (instancetype)initWithStyle:(UITableViewCellS ...

  8. iOS开发自定义流水布局

    //集成UICollectionViewFlowLayout 自己写的布局 //  SJBFlowLayout.m //  自定义流水布局 // //  Created by zyyt on 16/7 ...

  9. iOS开发 自定义UIAlertController的样式

    引言: 关于提示框, 系统自带的提示框有时可能满足不了我们的需求, 比如一个提示框的取消按钮我需要灰色字体显示, 这时候就需要自定义提示框的样式了. 示例图 苹果自iOS8开始,就已经废弃了之前用于界 ...

随机推荐

  1. log4net日记文件路径动态配置

    在项目开发过程中,部署的服务器越来越多,查看日记的时候需要每台服务器去找日记看,这对运维人员来说是一个很不友好的方式.在此基础上就提出将所有日记统一到一台服务器上进行存放,并按照产生日记的服务器分文件 ...

  2. App调用safar

    /调用safar打开网页 [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://www.cnblo ...

  3. ubuntu下安装MySQL8.0

    为了一劳永逸不每次都到处找资料,花了一下午时间做了这些.其中大部分是根据官方手册来的,后面部分谢谢大佬的帮助,超开心. 一.首先,将MySQL APT存储库添加到系统的软件存储库列表中 1.转到htt ...

  4. java常用API之DateFormat

    DateFormat 类: DateFormat 类是日期/时间格式化子类的抽象类,它以与语言无关的方式格式化并解析日期或时间.日期/时间格式化子类(如 SimpleDateFormat类)允许进行格 ...

  5. node.js-cancelled because Node.js is unresponsive

    今天初学node.js,但是在使用vs code 进行启动调试的时候出现了一个问题 这个报错,一开始我并不知道是什么意思.(而截至我写这个笔记我也还没了解清楚) 大概翻译出来的意思是说 “node.j ...

  6. HTML字符实体名称/实体编号

    字符实体对英文的大小写敏感! 字符实体一: 显示结果 描述 实体名称 实体编号   空格     < 小于号 < < > 大于号 > > & 和号 & ...

  7. Intent的简单使用

    主要实现Intent之间值得转递,如从AActivity到BActivity之间传一个数值,一个实体类,一个集合类 下面代码只要是实现对startActivityForResult的使用,用ABC 3 ...

  8. 使用 profile 进行python代码性能分析

    定位程序性能瓶颈 对代码优化的前提是需要了解性能瓶颈在什么地方,程序运行的主要时间是消耗在哪里,对于比较复杂的代码可以借助一些工具来定位,python 内置了丰富的性能分析工具,如 profile,c ...

  9. bat 日期格式设置

    转自:http://hi.baidu.com/awillaway/item/c61f964dc238190ce935044d   日期可以用扩展表示方法,你在cmd运行以下几个命令就明白了: echo ...

  10. android Handler、Thread和Runnable

    android里面的创建的Handler对象并不是新建一个新的线程,而是在主线程执行,主线程的消息队列中循环. java中实现一个线程有两种方法,一种是继承Thread类,一种是实现Runnable接 ...