早在iOS8时期，苹果就给我们提供了IB_DESIGNABLE 和 IBInspectable，让我们可以在xib中直接设置预览UIView的子类的某些属性。
之前由于项目是纯代码写的，所以一直没用到它们。正好这次的项目要用storyboard来实现，所以准备将一些自定义控件进行修改，让它们可以在xib中进行预览，以减少代码量和增加开发效率。
接下来，我们自定义一个包含文字、图片、角标的按钮控件（这种控件很常见吧，通常是上面图片下面文字，然后图片上还可能有角标）来试试这个功能。
1.最基础的功能
首先，用纯代码实现一个自定义的view，效果如下图：
代码比较简单，就不上代码了。
2.添加IB_DESIGNABLE 和 IBInspectable关键字
首先，在类的前面加上IB_DESIGNABLE关键字
#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface XXX : UIView
@end
然后，考虑哪些属性是可以在xib中设置的
需要注意的是，在xib中能够显示的属性只有
Boolean、Number、String、Localized String、
Point、Size、Rect、Range、Color、Image
几种，其他属性包括自定义的枚举，即便加了IBInspectable在xib中也是不会显示的
1.view的圆角
@property (nonatomic,assign) IBInspectable CGFloat cornerRadius; //圆角
2.图片的Image
@property (nonatomic,copy) IBInspectable UIImage * image; //图片
@property (nonatomic,assign) IBInspectable CGSize imageSize; //图片大小
3.标题文字
@property (nonatomic,copy) IBInspectable NSString * title; //标题
4.角标文字
//角标文字（如果为nil或者空字符串，则隐藏角标）
@property (nonatomic,copy) IBInspectable NSString * badge;
添加完IBInspectable关键字后，就可以在xib中看到这些属性了
试着修改一下值，发现并没有什么变化。因为还没有写实现的代码。
一般情况下，当属性值在xib中被修改时，会调用属性的setter方法，以及view的drawRect:方法，所以我们需要在里面实现对view的绘制代码。
需要注意的是，xib绘制时，并不会调用init方法，所以如果要添加子控件的话，是要在setter或drawRect:进行创建后，再修改对应属性效果。
因此，将几个子控件的初始化方法独立成getview的方法如下
#pragma mark - getViews
- (UIImageView *)getImageView{
if (_imageView == nil) {
self.imageView = ({
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectZero];
imageView.clipsToBounds = YES;
[self addSubview:imageView];
imageView;
});
}
return _imageView;
}
- (UILabel *)getTitleLabel{
if (_titleLabel == nil) {
self.titleLabel = ({
UILabel * label = [[UILabel alloc]initWithFrame:CGRectZero];
label.textColor = [UIColor blackColor];
label.textAlignment = NSTextAlignmentCenter;
label.numberOfLines = 2;
label.font = [UIFont systemFontOfSize:13];
[self addSubview:label];
label;
});
}
return _titleLabel;
}
- (UILabel *)getBadgeLabel{
if (_badgeLabel == nil) {
self.badgeLabel = ({
UILabel * label = [[UILabel alloc]initWithFrame:CGRectZero];
label.textColor = [UIColor whiteColor];
label.clipsToBounds = YES;
label.textAlignment = NSTextAlignmentCenter;
label.font = [UIFont systemFontOfSize:8];
label.backgroundColor = [UIColor redColor];
[self addSubview:label];
label.hidden = YES;
label;
});
}
return _badgeLabel;
}
然后，在setter方法中调用getview的方法设置属性
#pragma mark - setter
//设置view的圆角
-(void)setCornerRadius:(CGFloat)cornerRadius{
_cornerRadius = cornerRadius;
self.layer.cornerRadius = cornerRadius;
self.layer.masksToBounds = cornerRadius > 0?true:false;
}
//设置标题文字
-(void)setTitle:(NSString *)title{
_title = title;
[self getTitleLabel].text = title;
[[self getTitleLabel] sizeToFit];
//设置label的文字时，需要手动调用刷新界面的方法，不然会出现布局乱的bug
[self reloadView];
}
//设置图片
-(void)setImage:(UIImage *)image{
_image = image;
[self getImageView].image = image;
}
//设置角标
-(void)setBadge:(NSString *)badge{
_badge = badge;
[self getBadgeLabel].text = badge;
if (_badge==nil) {
_badgeLabel.hidden = YES;
return;
}
_badgeLabel.hidden = NO;
//设置label的文字时，需要手动调用刷新界面的方法，不然会出现布局乱的bug，原因不明
[self reloadView];
}
这里，将绘制view的方法独立出来
- (void)reloadView{
[self layoutBadgeView];
[self layoutImageAndTitle];
}
-(void)layoutBadgeView{
//绘制圆角的角标
float _badgeRadius = 5;
_badgeLabel.text = _badge;
[_badgeLabel sizeToFit];
float minheight = _badgeRadius * 2;
float width = CGRectGetWidth(_badgeLabel.frame) + minheight;
float heigh = CGRectGetHeight(_badgeLabel.frame) > minheight ? CGRectGetHeight(_badgeLabel.frame):minheight;
_badgeLabel.frame = CGRectMake(0, 0, width, heigh);
_badgeLabel.layer.cornerRadius = heigh/2;
}
- (void)layoutImageAndTitle{
//调整标题和图片的位置
CGRect rect = self.bounds;
float _alignPadding = 5;
float height = CGRectGetHeight(_titleLabel.frame) + _alignPadding + _imageSize.height;
_imageView.frame = CGRectMake((rect.size.width - _imageSize.width)/2,(rect.size.height - height)/2,_imageSize.width, _imageSize.height);
_titleLabel.frame = CGRectMake(0, CGRectGetMaxY(_imageView.frame) + _alignPadding, rect.size.width , CGRectGetHeight(_titleLabel.frame));
_badgeLabel.frame = CGRectMake(CGRectGetMaxX(_imageView.frame), CGRectGetMinY(_imageView.frame), CGRectGetWidth(_badgeLabel.frame), CGRectGetHeight(_badgeLabel.frame));
}
#pragma mark - DrawRect
- (void)drawRect:(CGRect)rect {
[self reloadView];
//调整层级顺序
[self bringSubviewToFront:_titleLabel];
[self bringSubviewToFront:_badgeLabel];
}
以上，一个很基础的控件就完成了。
接下来，还需要对它进行一些扩展,让它能够有更好的适应性。包括：
1.设置图片圆角、背景色、填充模式
2.设置角标样式（圆角和数字）
3.设置标题字体
4.设置图片与文字的位置关系
等
具体代码在GZCAlignButton
效果如下：
总结：
优点：对某些经常用到的控件来说，这个功能很是方便，能够提高效率。
缺点：对一些常用属性如Font等不支持，有时候渲染会与实际有所误差；而且实时预览仅对控件本身和父类的代码有效，如果有使用导入其他头文件里的宏定义方法影响到绘制的，会造成无法预览。
参考文章：
http://www.cocoachina.com/ios/20150227/11202.html
http://www.jianshu.com/p/e4accdbfd841
http://blog.csdn.net/lotheve/article/details/49230219
