关键字

IBInspectable和IB_DESIGNABLE的使用

2016-12-03  本文已影响0人  真巧了_嘿

        最近无意中知道了IBInspectable和IB_DESIGNABLE,感觉如果在项目中使用会给我们程序员带来意想不到的的方便.试想下:在做应用的UI设计的时候,如果属性能够在Interface Builder的图形化界面进行设置,并且动态的预览到效果,那样无疑会大大提高应用的开发效率。而XCode为我们提供了这样的一种方式,就是使用IBInspectable和IB_DESIGNABLE.(Xcode 6出现的这两个属性-->原理就是在xib里面设置完成之后帮我们添加一个runtime attributes,虽然我们也可以通过User Defined Rumtime Attributes可以在Interface Builder中,设置一些KVC属性的值,但是这样做不容易调试和后期维护).

IBInspectable

让支持KVC的属性能够在Attribute Inspector中配置。其修饰成员变量,其修饰的变量可以在xib右边的控制面板里面直接更改其值

例如我想实现一个自定义的UItextField,通过xib设置它的一些属性(圆角,边线宽度,边线颜色等),此时可以写一个UIView的分类,在.h文件中声明这三个属性并用IBInspectable修饰.

@interface UIView (Inspectable)

/**

*  可以在xib里面直接设置的:圆角

*/

@property (nonatomic, assign) IBInspectable CGFloat cornerRadius;

/**

*  可以在xib里面直接设置的:边线宽度

*/

@property (nonatomic, assign) IBInspectable CGFloat borderWidth;

/**

*  可以在xib里面直接设置的:边线颜色

*/

@property (nonatomic, assign) IBInspectable UIColor *borderColor;

在.m文件中

@implementation UIView (Inspectable)

- (void)setCornerRadius:(CGFloat)cornerRadius{

self.layer.cornerRadius = cornerRadius;

self.layer.masksToBounds = cornerRadius>0;

}

- (CGFloat)cornerRadius{

return self.layer.cornerRadius;

}

- (void)setBorderColor:(UIColor *)borderColor{

self.layer.borderColor = borderColor.CGColor;

}

- (UIColor *)borderColor{

return [UIColor colorWithCGColor:self.layer.borderColor];

}

- (void)setBorderWidth:(CGFloat)borderWidth{

self.layer.borderWidth = borderWidth;

}

- (CGFloat)borderWidth{

return self.layer.borderWidth;

}

@end

此时在storyboard中的Attribute Inspector就会多出三个配置选项(cornerRadius,borderColor,borderWidth)可以直接进行设置,界面如下

每次设置这三个选项之后,都会在Identity Inspector中改变一个rumtime的KVC变量,不过现在仍然不能动态的刷新

通过IB_DESIGNABLE配合IBInspectable可以实现动态刷新

实现方式很简单,就是在自定义类的头文件处加上这个宏定义即可。然后把对应的类设置为自定义的类。IB_DESIGNABLE修饰View,这个View是自定义的,其修饰的View可以直接在xib里面动态渲染

但是切记不能修饰分类,比如上边提到的UIView的分类,如果把IB_DESIGNABLE加载此分类中是毫无作用的.可以自定义一个类,继承自UITextField,然后在此类中添加这个宏定义,然后不要忘了和xib中的UITextfield相关联,这个时候,你再设置上边的三个配置选项就会发现能够动态刷新了.

如果不能动态刷新,重启XCode,如果还不能刷新,如下图RefreshingAllViews,建议开启Automatically Refresh Views

上一篇下一篇

猜你喜欢

热点阅读