MyLayout和XIB或SB的混合使用方法

MyLayout是一个可以非常简单和方便的实现各种界面布局的第三方开源库。在我的github项目中大部分DEMO都是通过代码来实现界面布局的,但这并不是表示MyLayout不支持XIB和SB。
在构建一个应用的MVC框架中,我们希望模型、视图、控制这三部分都尽可能的低耦合,而苹果推荐的视图部分构建则是通过XIB或者SB来完成的。因为MyLayout中的各种布局视图类其实都是从UIView派生的,因此MyLayout是完全可以和XIB以及SB混合使用的
MyLayout的一些布局视图属性以及子视图的扩展布局属性是可以在XIB或者SB界面编辑器里面进行设置的。唯一的一个缺点是这些属性的设置不能起到所见即所得的效果。 因为MyLayout是一个独立而完整的界面布局框架,因此您可以和系统默认的AutoLayout混合使用,也可以完全独立的单独使用。

不和AutoLayout以及Size Classes结合使用的方法

当您使用MyLayout进行界面布局时,那么要求至少应该存在一个布局视图,否则所有关于子视图的扩展布局属性都无效,因为子视图的这些扩展属性只有在布局视图里面才有用。MyLayout是一个完整而独立的布局体系,因此要求我们的布局视图内的子视图不能再通过设置AutoLayout的约束来进行布局了,因此我们可以在XIB或者SB中完全不需要AutoLayout以及Size Classess的特性。

  1. 第一步就是要将XIB或者SB中对AutoLayout和Size Classes的支持去掉:


    取消对AutoLayout的支持
  2. 第二步就是将视图控制器中的根视图的类名转化为对应的布局视图类:


    根视图的类名转换
  3. 第三步将类名转换后您可以切换到Show the attributes inspector 标签中进行布局视图特有属性的设置:

布局视图的属性设置.png

您会发现上面图中出现了大量对MyLayout布局特有属性以及子视图的扩展布局属性设置的地方。你可以在这里设置布局视图以及子视图的扩展属性。我这里就分别设置了根视图布局的topPadding属性值为20,subviewVSpace属性值为30。

在XCODE中如果您想要将视图类的自定义属性出现在attributes inspector 中的话,您需要在您的自定义属性前面加上IBInspectable 关键字。比如下面的定义:

@property(nonatomic, assign) IBInspectable CGFloat myTop;
@property(nonatomic, assign) IBInspectable CGFloat myLeading;
@property(nonatomic, assign) IBInspectable CGFloat myBottom;
@property(nonatomic, assign) IBInspectable CGFloat myTrailing;

目前支持** IBInspectable关键字的属性只有NSString、BOOL、int、float、double、CGSize、UIColor、UIImage等基本属性,而对枚举类型以及其他对象类型暂时不支持,那么假如我想设置枚举类型的值比如布局视图的gravity属性时怎么办呢?我们可以切换到Show the Identify inspector标签中的 User Defined Runtime Attributes列表中

设置自定义扩展属性

您会发现所有设置的扩展属性都会在这里同时出现,因此您也可以在这里设置自定义的扩展属性。 当某个自定义属性无法在attributes inspector标签中设置时,您可以在User Defined Runtime Attributes 进行设置,我在这里添加了对布局视图gravity的设置。这里设置为1799的原因是MyGravity_Fill的枚举值就是1799(参考MyGravity类型枚举值的定义)。通过gravity属性设置了所有子视图均分高度和以及宽度和布局视图相等。设置完毕后我们分别按顺序添加3个高度一致的子视图如下:

依次添加子视图

上面的中我们可以看出,我们并不需要为子视图设置任何附加的约束,我们也没有为子视图设置扩展属性。我们只是按顺序添加上去。下面的图片就是实际的运行的结果:

布局运行结果

从上面的例子里面我们可以看出MyLayout是可以完全和XIB以及SB无缝结合的,我们在没有任何编码的情况下,通过几个简单属性的设置就实现了三个子视图的垂直高度均分以及宽度和布局视图相等以及每个子视图之间间隔30的功能。(假如你用AutoLayout来设置约束的话,我相信要实现同样的功能,您一定要设置非常多的约束来完成吧。在这里唯一的缺陷就是MyLayout的属性设置无法在XCODE界面编辑器中所见即所得。

上面的例子我们进行了简单的布局扩展属性设置,那么如果我们要实现布局套布局怎么办呢? 既然我们可以把根视图转化为一个布局视图类,那么我相信您可以举一反三了。我们只要直接在根布局视图中,先添加一个UIView视图,然后把类名改为对应想要使用的布局视图就可以了。我们将上面例子中的中间UILabel改为一个水平线性布局(需要注意的是在放置时需要将三个子视图的frame的高度设置为一致,这个gravity属性拉伸才能得到相同的高度。)。而水平线性布局则有2个子视图:

布局套布局

上图中我将中间的视图的UIView类改为了MyLinearLayout。并设置了orientation属性为1也就是水平线性布局方向,同时设置了水平线性布局的四周的边界为10。下面就是运行的实际效果:

布局套布局的运行效果

这样是不是非常的简单。当然如果您不想在XCODE的界面编辑器中设置布局视图的各种属性,而是想通过界面编辑器来建立视图,然后通过代码设置属性或者要设置界面编辑器无法设置的布局属性时。那么你需要将布局视图设置为一个IBoutlet插座变量,然后在对应的地方设置布局属性或者子视图扩展属性或者复杂的布局属性就可以了:

代码和编辑器结合布局

和AutoLayout结合使用方法

上面的例子介绍的是在不使用AutoLayout时如何将MyLayout和XIB以及SB结合的场景,那么如果我们使用AutoLayout并且想用到MyLayout的布局视图类怎么办呢?答案很简单:

MyLayout布局视图本身就和其他普通视图一样通过AutoLayout来设置约束,而布局视图里面的子视图则不能使用AutoLayout来设置约束,而是用上面介绍的方式来设置各种布局属性。

AutoLayout和MyLayout混合使用

TangramKit对XIB以及SB的支持

目前TangramKit并没有在XCODE的界面编辑器中定义出可设置的扩展属性。因此当你用TangramKit进行界面布局时,您可以在XCODE的界面编辑器中将对应的界面视图添加上去。然后通过建立插座变量来在代码中设置各种布局属性。

小结

从上面可以看出MyLayout并不排斥XIB或者SB,也并不排斥AutoLayout,相反如果您能够灵活的运用那么将会大大的减少您构建应用的时间和精力。

最后欢迎大家访问我的界面布局库:

您的点赞和支持将是我开发的动力。。。

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

推荐阅读更多精彩内容