使用IB_DESIGNABLE动态查看,修改Masonry纯代码布局

"真正的coder手写代码,不错,可惜我只是是鸡智的贼佬"。                                                                                                   ----没错,是我

公司里禁用xib(storyboard)来布局,手写布局实在egg pain,只好使用Masonry来写布局约束,疼痛减轻不少;但每次都要的编译才能可看到结果,如果遇上莫名的奔溃或者要要挪来挪去一个个像素来微调的话,一次次编译实在浪费生命,今日发现其实可以使用IB_DESIGNABLE来实时渲染布局,这样就无需编译就可以查看布局变化。

简单介绍一个IB_DESIGNABLE(在Swift里面是@IBDesignable,但本文只涉及OC,不提swift),IB_DESIGNABLE的宏的功能就是让XCode动态渲染出该类图形化界面。比如说:现在我们绘制一个UIView,里面只有一个方法drawRect:

使用IB_DESIGNABLE动态查看,修改Masonry纯代码布局_第1张图片
如果熟悉core graphic这段代码不难看懂,但如果是一大段,不知道对错的绘图代码要调试的话,呵呵。

我怎么知道这个UIView长什么样子呢?很简单:在@implementation前面添加IB_DESIGNABLE,


只要在实现前面添加IB_DESIGNABLE即可

然后创建一个xib文件,名字随便起,我们只用它来展示我们用代码写得界面,然后让xib里面的uiview继承于BombView:


使用IB_DESIGNABLE动态查看,修改Masonry纯代码布局_第2张图片
注意Designable。如果没有这行字,说明没有正确添加添加IB_DESIGNABLE,如果它的状态显示up to date,如果是updating,说明视图在更新,案如果是build failed的话,请检查布局代码,可能有哪里出错了。

    当布局成功后,就可显示布图案。

使用IB_DESIGNABLE动态查看,修改Masonry纯代码布局_第3张图片
阿姆斯特朗回旋加速喷气式阿姆斯特朗炮

布局对了就可以删除对应的xib(stroyboard)文件。

更好玩的是,我们可以利用B_DESIGNABLE这个Xcode的新特性来查看Masonry布局,无需编译。


使用IB_DESIGNABLE动态查看,修改Masonry纯代码布局_第4张图片
这是一个任务表的HeaderView,创建就搞了快200行,OMG,代码我会传到Github上,别担心
使用IB_DESIGNABLE动态查看,修改Masonry纯代码布局_第5张图片
我讨厌手写界面

于是我们的头部就创建好了,么?不知道,创建一个Xib文件,命名随意,让里面的view大小设置为320*160,设置它是ScheduleHeaderView的子类,于是:

使用IB_DESIGNABLE动态查看,修改Masonry纯代码布局_第6张图片
当我们在ScheduleHeaderView.m文件里面修改布局代码,如修改颜色,文字,大小,稍等片刻就可以在xib中渲染出来,不用一次次编译,是不是很方便?如果build failed无法显示视图,试试Editor-》Refresh all view,如果还是不行,请检查布局代码。

这样,我们就完成了Masnory布局代码的实时渲染。

/**

*  UIimage的扩展,为在使用 IB_DESIGNABLE 的时候可以在IB上看到图片,需要把IB_DESIGNABLE所在类当参数传给NSBundle

*  不能简单使用[UIImage imageWithNamed]来给图片赋值,因为在IB渲染和运行时的NSBundle是不一样的,

NSBundle *bundle;

bundle= [NSBundle bundleForClass: [YouView class]];//YouView指的是对应视图的类名

UIImage *image = [UIImage imageNamed:imageNamed inBundle:bundle compatibleWithTraitCollection:nil];使用图片,

这里,我写了一个扩展,


使用IB_DESIGNABLE动态查看,修改Masonry纯代码布局_第7张图片

@end

使用方法:

imageView.image = [UIImage imageForIBWithImageNamed:@"bg_transparent_gallerynormal" classForBundle:[self class]];

这样就在IB和运行时就会使用不同的bundle,用图片的问题就解决了

*/

总结  

     优点:方便纯代码党试试看到(修改)界面代码(布局,Core Graphics)的效果,提高工作  效率。

    缺点:1.无法直接在UIViewController上面使用  IB_DESIGNABLE,只能用于UIView的子类。

             2.渲染可能会出错,有时候比较慢。

demo传送门

你可能感兴趣的:(使用IB_DESIGNABLE动态查看,修改Masonry纯代码布局)