xib可视化--- IB_DESIGNABLE，IBInspec

关于xib在我们的项目中用到很多，作为快速搭建页面的基本功，却忽略了一些重要的属性，接下来就简单介绍一下xib的黑科技和在项目中的实际应用。有点东西的，我来做个笔记。

IB_DESIGNABLE 作用

• IB_DESIGNABLE：在xib类中申明申明宏，Xcode会自动在xib中动态渲染图形。简单来说就是你用代码写的view是可以在xib中看到。

• 首先我们创建Circle类继承UIView，并且在.h文件中声明属性

#import <UIKit/UIKit.h>

IB_DESIGNABLE    //让你的自定 UIView 可以在 IB 中预览
@interface CircleView : UIView
@property (nonatomic, assign) CGFloat lineWidth; // 线宽
@property (nonatomic, assign) CGFloat radius; // 圆的半径
@property (nonatomic, strong) UIColor *color; // 颜色
@property (nonatomic, assign) BOOL fill; // 是否填充

@end

• 在Circle.m中drawRect方法中绘制圆形视图

- (void)drawRect:(CGRect)rect {

    
    // 计算中心点
    CGFloat centerX = (self.bounds.size.width - self.bounds.origin.x) / 2;
    CGFloat centerY = (self.bounds.size.height - self.bounds.origin.y) / 2;
    
    UIBezierPath *path = [[UIBezierPath alloc] init];
    // 添加一个圆形
    [path addArcWithCenter:CGPointMake(centerX, centerY) radius:_radius startAngle:0 endAngle:360 clockwise:YES];
    
    // 设置线条宽度
    path.lineWidth = _lineWidth;
    
    // 设置线条颜色
    [_color setStroke];
    // 绘制线条
    [path stroke];
    
    if (_fill) {
        // 如果是实心圆，设置填充颜色
        [_color setFill];
        // 填充圆形
        [path fill];
    }
}

• 用xib创建View，在声明IB_DESIGNABLE宏之后，command+B 便会在xib中看到我们的创建的视图（记得要给申明属性默认值才会显示）

声明IB_DESIGNABLE.png

IBInspectable 作用

• 让你的自定义 UIView 的属性出现在 IB 中 Attributes inspector，这样我们就不用通过代码来设置圆角边框的一堆繁琐的属性
• 只要在.h属性方法中加入关键字IBInspectable即可

@property (nonatomic, assign)IBInspectable CGFloat lineWidth; // 线宽
@property (nonatomic, assign)IBInspectable CGFloat radius; // 圆的半径
@property (nonatomic, strong)IBInspectable UIColor *color; // 颜色
@property (nonatomic, assign)IBInspectable BOOL fill; // 是否填充

image.png

接下来我们可以封装一个类，专门用来设置我们xib视图中的圆角，边框等属性，倒入pch，大大加快我们的效率。

#import <UIKit/UIKit.h>

@interface UIView (nibExt)
//仅仅用于设置ib  非正常属性
@property(nonatomic,assign)IBInspectable CGFloat layerBoderWidth;
@property(nonatomic,assign)IBInspectable CGFloat layerBoderCorner;
@property(nonatomic,strong)IBInspectable UIColor * boderColor;
@end

#import "UIView+nibExt.h"

@implementation UIView (nibExt)
-(void)setLayerBoderWidth:(CGFloat)layerBoderWidth{
    self.layer.borderWidth = layerBoderWidth;
}
-(CGFloat)layerBoderWidth{
    return self.layer.borderWidth;
}

-(void)setLayerBoderCorner:(CGFloat)layerBoderCorner{
    self.layer.cornerRadius = layerBoderCorner;
}
-(CGFloat)layerBoderCorner{
    return self.layer.cornerRadius;
}

- (void)setBoderColor:(UIColor *)boderColor{
    self.layer.borderColor = boderColor.CGColor;
}

- (UIColor *)boderColor{
    return [UIColor colorWithCGColor:self.layer.borderColor];
}

@end

效果图最终

至此，大功告成，美滋滋～～～

最后附上代码链接：
gibHub地址：https://github.com/MrBMask