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

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

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

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

如果熟悉core graphic这段代码不难看懂,但如果是一大段,不知道对错的绘图代码要调试的话,呵呵。

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


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

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


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

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

阿姆斯特朗回旋加速喷气式阿姆斯特朗炮

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

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


这是一个任务表的HeaderView,创建就搞了快200行,OMG,代码我会传到Github上,别担心
我讨厌手写界面

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

当我们在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];使用图片,

这里,我写了一个扩展,


@end

使用方法:

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

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

*/

总结  

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

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

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

demo传送门

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容