码迷,mamicode.com
首页 > 移动开发 > 详细

iOS SDK详解之IBInspectable和IB_DESIGNABLE-Storyboad动态刷新

时间:2015-04-26 18:27:24      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:ios   inspectabl   designable   动态刷新   ib   

原创Blog,转载请注明出处
blog.csdn.net/hello_hwc
欢迎关注我的iOS-SDK详解专栏,在这里你能找到很多iOS开发基础的文章
http://blog.csdn.net/column/details/huangwenchen-ios-sdk.html


前言:
在做应用的UI设计的时候,如果属性能够在Interface Builder的图形化界面进行设置,并且动态的预览到效果,那样无疑会大大提高应用的开发效率。而XCode为我们提供了这样的一种方式,就是使用IBInspectable和IB_DESIGNABLE
如图
技术分享


User Defined Rumtime Attributes

通过User Defined Rumtime Attributes可以在Interface Builder中,设置一些KVC属性的值。例如
设置圆角为50
技术分享
这样,在运行模拟器,会有如下效果
技术分享
不过,这样做有明显的弊端

不容易调试和后期维护


IB_DESIGNABLE

IB_DESIGNABLE的宏的功能就是让XCode动态渲染出该类图形化界面。
使用方式,把该宏加在自定义类的前面

#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface IBDesigbableImageview : UIImageView
@end

然后,再设置imageview为继承类,并且设置圆角
技术分享
可以看到,storyboard上的imageview动态刷新了
技术分享


IBInspectable

让支持KVC的属性能够在Attribute Inspector中配置。
不熟悉KVC的童鞋可以看看我这篇文章
ios SDK详解之KVC


添加属性以及Set方法即可,如果是现有类,使用Category

例如为imageView的继承类设置cornerRadius
头文件添加属性

@property (nonatomic) IBInspectable CGFloat cornerRadius;

.m文件实现对应set的方法

-(void)setCornerRadius:(CGFloat)cornerRadius{
    _cornerRadius = cornerRadius;
    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = cornerRadius > 0?true:false;
}

这样,在Attribute Inspector就会多出一个配置选项
技术分享
通过设置这个选项,就可以设置layer的圆角了。
每次设置圆角,都会在Identity Inspector中改变一个rumtime的KVC变量
技术分享
不过,现在仍然不能动态刷新


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

实现方式很简单,就是在自定义类的头文件处加上这个宏定义即可。然后把对应的类设置为自定义的类。

.h文件

#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface IBDesigbableImageview : UIImageView
@property (nonatomic) IBInspectable CGFloat cornerRadius;
@end

.m文件

#import "IBDesigbableImageview.h"

@implementation IBDesigbableImageview

-(void)setCornerRadius:(CGFloat)cornerRadius{
    _cornerRadius = cornerRadius;
    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = cornerRadius > 0?true:false;
}

@end

效果就是最开始的Demo


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


官网关于这部分的链接
https://developer.apple.com/library/ios/recipes/xcode_help-IB_objects_media/Chapters/CreatingaLiveViewofaCustomObject.html
我的Github这个项目的链接,欢迎关注这个项目
https://github.com/wenchenhuang/IBInspectableAndIBDesignableDemo

CSDN上传的资源暂时没有更新,要源代码的童鞋直接去GitHub下载

iOS SDK详解之IBInspectable和IB_DESIGNABLE-Storyboad动态刷新

标签:ios   inspectabl   designable   动态刷新   ib   

原文地址:http://blog.csdn.net/hello_hwc/article/details/45288833

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!