iOS进阶之巧用IBInspectable属性和IB_DESIGNABLE宏定义

交互设计和UI设计水准很大程度影响着用户对应用的评价，iOS开发发展至今已逾10年，开发者对于界面UI编码的习惯逐渐分化成三大流派：

• code - 易追踪、可复用、便于版本控制，但不直观
• xib - 简单便捷、直观、一一对应，但易冲突
• storyboard - 逻辑清晰、简单易用、直观高效，虽易冲突、复用性不佳，但仍是未来趋势

xib 和 storyboard 均采用了 Interface Builder（IB）来生成GUI，通过面板上简单的拖拽替代繁琐冗余的code来构建页面。但我们经常发现，既有的功能并不能完全满足布局的需要，那么，我们可以通过在特定的位置定义可视化属性IBInspectable、定义宏IB_DESIGNABLE来精简代码。

下文具体介绍一下如何使用。

【场景】设置按钮：圆角cornerRadius：8pt、边框颜色borderWidth：1pt、边框宽度borderColor：系统蓝色

---

巧用IBInspectable

【IBInspectable】 这一属性提供了访问功能的新方式：用户自定义的运行时属性，让支持KVC的属性能够在身份检查器（Identity Inspector）的 User Defined Runtime Attributes 中配置。

它支持修饰的属性类型有：BOOL、NSNumber、CGPoint、CGSize、CGRect、UIColor、NSString、NSLocalizedString、NSRange、UIImage、NSNull。

如果想让特定类型的控件设置某个属性，可以为对应的UIKit添加分类，为定义该属性时加上IBInspectable，示例：

#import <UIKit/UIKit.h>@interface UIButton (HTAdditions)@property (nonatomic) IBInspectable CGFloat kCornerRadius;@property (nonatomic) IBInspectable CGFloat kBorderWidth;@property (nonatomic,copy) IBInspectable UIColor *gBorderColor;@end

这时Xcode的Attributes Inspector栏中就会出现三个新的可编辑属性。

Identity Inspector下的 User Defined Runtime Attributes也会出现相应的key path和value值。

设置好后run一下工程就能看到场景中要求的效果，但通常开发者不需要所有的按钮都设置圆角、边框，更多的是采用自定义视图的形式统一处理相似风格的control。为了更高效地开发，接下来介绍宏定义IB_DESIGNABLE。

---

巧用IB_DESIGNABLE

【IB_DESIGNABLE】 在类名前加上此宏定义，初始化、布置和绘制方法将被用来在画布上渲染该类的自定义视图。

操作步骤：
1. storyboard中拖拽一个UIButton；
2. 创建父类是UIButton的HTCustomButton类文件，并在.h的interface前定义IB_DESIGNABLE；
3. 给步骤1按钮的Custom Class关联上HTCustomButton。

这时我们就可以直接在User Defined Runtime Attributes中加入想要的属性，例如圆角、边框宽度等。边框颜色由于UIColor类型的特殊性，需要重新定义。

HTCustomButton.h：

#import <UIKit/UIKit.h>IB_DESIGNABLE@interface HTCustomButton : UIButton/** 设置边框颜色可视化 */@property (nonatomic, strong)IBInspectable UIColor *customBorderColor;@end

HTCustomButton.m：

#import "HTCustomButton.h"@implementation HTCustomButton/** *  设置边框颜色 * *  @param customBorderColor 可视化视图传入的值 */- (void)setCustomBorderColor:(UIColor *)customBorderColor {    self.layer.borderColor = customBorderColor.CGColor;}@end

设置好后就可以直接添加或修改相应的属性动态刷新控件，如下图：

---

纯代码开发流派如何借助IB_DESIGNABLE动态查看布局效果

对于很多被强制勒令用纯代码coding的开发者来说，下面介绍的干货绝对会大大提升开发效率。

举个例子：创建基于UIView的HTMasonryView，以及同名的.xib文件，并在Custom Class中关联好。接下来在HTMasonryView.m中创建并布局masonryButton，注意添加IB_DESIGNABLE，代码如下：

#import "HTMasonryView.h"#import <Masonry.h>#import "UIButton+HTAdditions.h"IB_DESIGNABLE@interface HTMasonryView ()@property (nonatomic, strong) UIButton *masonryButton;@end@implementation HTMasonryView- (instancetype)initWithFrame:(CGRect)frame {    if (self = [super initWithFrame:frame]) {        [self setupView];    }    return self;}-(instancetype)initWithCoder:(NSCoder *)aDecoder {    if (self = [super initWithCoder:aDecoder]) {        [self setupView];    }    return self;}- (void)setupView {    _masonryButton = ({        UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];        btn.kCornerRadius = 8.0f;        btn.kBorderWidth = 1.0f;        btn.gBorderColor = btn.ht_normalTitleColor;        btn.ht_normalTitle = @"code创建-Masonry布局的按钮";        btn.titleLabel.font = [UIFont systemFontOfSize:14.0f];        [self addSubview:btn];        btn;    });    [self layout];}- (void)layout {    __weak __typeof(self) weakSelf = self;    [_masonryButton mas_makeConstraints:^(MASConstraintMaker *make) {        make.left.mas_equalTo(30);        make.right.mas_equalTo(-30);        make.top.bottom.mas_equalTo(weakSelf);    }];}@end

点开HTMasonryView.xib查看会发现已经渲染出了Masonry的布局效果。

ps：如果渲染失败，查看Editor->Automatically Refresh Views 是否勾选，尝试重启Xcode。

开启成功的特点就是Show the Identity inspector->Custom Class->Designables:Up to date(更新完毕)/Updating(更新中)，如果显示Build failed建议检查布局代码。

---

欢迎评论，最后-> Demo传送门