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

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

2024-09-05 20:25:03   222人阅读

  • 一、通过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  （四个方位）

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

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


联系
我们