iOS学习之UIButton的圆角边框设计

按钮的圆角边框的实现

首选介绍一下什么是按钮的圆角边框,下面先放一张图片
这里写图片描述
像这样,按钮就有了圆角边框,这比较符合现在的扁平化UI设计,像这种漂亮的圆角边框需要我们手动实现一下
下面先将代码展示一下,为了方便起见,这次我直接在viewDidLoad里面写

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    UIButton * btn = [UIButton buttonWithType:UIButtonTypeSystem];
    btn.frame = CGRectMake(200, 200, 80, 40);
    [btn setTitle:@"签到" forState:UIControlStateNormal];
    [btn setTitle:@"已签到" forState:UIControlStateSelected];
    //允许边界超出
    [btn.layer setMasksToBounds:YES];
    //设置圆角的半径
    [btn.layer setCornerRadius:15];
    //设置边框的宽度
    [btn.layer setBorderWidth:1];
    //设置边框的颜色
    [btn.layer setBorderColor:[UIColor grayColor].CGColor];
    //添加点击事件
    [btn addTarget:self action:@selector(pressBtn:) forControlEvents:UIControlEventTouchUpInside];
    //设置普通状态的颜色
    [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    //设置按下后状态的颜色
    [btn setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
    btn.tintColor = [UIColor whiteColor];
    [self.view addSubview:btn];
}

//参数为调用此函数的按钮对象本身
- (void)pressBtn: (UIButton *) btn
{
    btn.selected = !btn.selected;
}

这样,我们会得到如下的效果
这里写图片描述
点击之后,将会变成这样
这里写图片描述

这样我们就创建好了一个圆角边框的按钮。注释里面写的已经比较详细了,就不再赘述了。

猜你喜欢

转载自blog.csdn.net/qq_40596811/article/details/81544443
今日推荐