用xib和代码的方式创建带边框和圆角的按钮

Posted 2020-09-01

• 一、通过xib快速设置圆角
• 利用User Defined Runtime Attributes 进行设置

身份检查器

• 详细步骤介绍
• 点击UI控件
• 点击 Xcode 右侧上方身份检查器(左起第三个按钮)
• 找到 Runtime Attributes 属性，通过Key Path 和 Value 进行设置
• 设置圆角需要到的Key Path：
• layer.cornerRadius ，注意该 key 对应 Value 的 type 应该设置为 String（设置圆角）
• keyPath值layer.masksToBounds ,注意该 key 对应 Value 的 type 应该设置为 Boolean , 当右侧出现对号时为YES
• keyPath值为layer.borderWidth，类型为NSNumber（设置边框宽度）
• keyPath值为layer.borderColor , 类型为CGColor(设置边框颜色)
• 注意：经过测试，UILabel 必须设置设置 masksToBounds 这一键值对，才会出现圆角效果；UIButton、UIView、UIImageView 只需设置 layer.cornerRadius 这一键值对就可实现圆角效果

Xib 为控件设置边框效果

• 1，通过代码方式进行设置

- (void)viewDidLoad {

    [super viewDidLoad];

 

    self.myView.layer.borderColor = [UIColor redColor].CGColor;

    self.myView.layer.borderWidth = 2;

}

• 2，通过xib快速设置边框
• 所用方法和上面所讲Xib设置圆角基本相同，唯一不同的就是设置 key Path 键值对
• 设置边框需要到的Key Path：
• layer.borderWidth ，注意该 key 对应 Value 的 type 应该设置为 String
• layer.borderColor , 注意该 key 对应 Value 的 type 应该设置为 CGColor

 

 

 

 

 

//二、用代码创建的方式

1. [box.actionButton.layer setMasksToBounds:YES];    
2.     [box.actionButton.layer setCornerRadius:10.0]; //设置矩形四个圆角半径    
3.     //边框宽度    
4.     [box.actionButton.layer setBorderWidth:1.0];    
5.     //设置边框颜色有两种方法：第一种如下:    
6.     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();    
7.     CGColorRef colorref = CGColorCreate(colorSpace,(CGFloat[]){ 0, 0, 0, 1 });    
8.     [box.actionButton.layer setBorderColor:colorref];//边框颜色    
9.     //第二种方法如下:  
10.     //_testButton.layer.borderColor=[UIColor grayColor].CGColor;    

 注： 以下方式是在控件某个方位加圆角

UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(120, 10, 80, 80)];

view2.backgroundColor = [UIColor redColor];

[self.view addSubview:view2];

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view2.bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 10)];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];

maskLayer.frame = view2.bounds;

maskLayer.path = maskPath.CGPath;

view2.layer.mask = maskLayer;

其中：

byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight   指定了需要成为圆角的角。该参数是UIRectCorner类型的，可选的值有：

* UIRectCornerBottomLeft （下左）
* UIRectCornerTopRight    （上右）
* UIRectCornerTopLeft   （上左）
* UIRectCornerBottomRight （下右）
* UIRectCornerAllCorners  （四个方位）

从名字很容易看出来代表的意思，使用“|”来组合就好了。