• 情景:在很多中情况下我们需要设置UIView或者UIImageView的圆角以及边框等,我们通常的做法是:
    • 1.代码创建的控件:利用代码设置cornerRadius(别忘记设置裁剪哦masksToBounds = YES)和borderWidth属性;
    • 2.在xib中你还有一种做法就是设置Key Paht;(注意:这里虽然设置了我们并不能立即在xib中看到设置后圆角效果,这是本文重点)
      设置Key Paht
    • 3.设置圆形图片的话,还可以画一个圆形图片,详情可以移步这里;
  • 下面以在xib中设置圆角为例,说明IB_DESIGNABLE和IBInspectable的神奇之处:

IB_DESIGNABLE 的具体使用方法:

  • IB_DESIGNABLE的宏的功能就是让XCode动态渲染出该类图形化界面;

  • 使用IB_DESIGNABLE的方式，把该宏加在自定义类的前面;

  • 1.自定义一个UIview—YCCustomView

1
2
3
4
5
6
7
8
#import <UIKit/UIKit.h>

// 在定义类的前面加上IB_DESIGNABLE宏
IB_DESIGNABLE

@interface YCCustomView : UIView

@end

  • 2.在xib中拖一个UIView,并修改类名为YCCustomView

    • 这里还是利用key Paht设置圆角,即可动态刷新我们的自定义View,效果图如下:
      IB_DESIGNABLE

    • 说明:别忘记设置view的class为我们自定义的哦

说明

IBInspectable 的具体使用方法:

  • 我们在上面已经知道了IB_DESIGNABLE的使用,我们能立即看到设置的圆角效果(动态刷新),但是有一个问题,我们通过设置Key Path来设置是不是很麻烦~,下面我们通过一种更加直观的方式来设置,如下:

默认是没有这些选项的,不信你瞅瞅你的~.~

废话不多说,直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#import <UIKit/UIKit.h>

IB_DESIGNABLE  // 动态刷新

@interface YCCustomView : UIView

// 注意: 加上IBInspectable就可以可视化显示相关的属性哦
/** 可视化设置边框宽度 */
@property (nonatomic, assign)IBInspectable CGFloat borderWidth;
/** 可视化设置边框颜色 */
@property (nonatomic, strong)IBInspectable UIColor *borderColor;

/** 可视化设置圆角 */
@property (nonatomic, assign)IBInspectable CGFloat cornerRadius;

@end

重写set方法,根据可视化设置的值设置相关的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#import "YCCustomView.h"

@implementation YCCustomView

/**
 *  设置边框宽度
 *
 *  @param borderWidth 可视化视图传入的值
 */
- (void)setBorderWidth:(CGFloat)borderWidth {
    
    if (borderWidth < 0) return;

    self.layer.borderWidth = borderWidth;
}

/**
 *  设置边框颜色
 *
 *  @param borderColor 可视化视图传入的值
 */
- (void)setBorderColor:(UIColor *)borderColor {

    self.layer.borderColor = borderColor.CGColor;
}

/**
 *  设置圆角
 *
 *  @param cornerRadius 可视化视图传入的值
 */
- (void)setCornerRadius:(CGFloat)cornerRadius {

    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = cornerRadius > 0;
}

@end
  • 效果演示
    IBInspectable