EALayout 第三节 依赖多个控件布局

前端之家收集整理的这篇文章主要介绍了EALayout 第三节 依赖多个控件布局前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Swift

https://github.com/easycodingTop/EALayout

Objective-C

https://github.com/easycodingTop/EALayoutLiteForOC

QQ群:454686295

====================================================

这一节 讲一个控件依赖多个layout约束

如何依赖其它多个控件:

{

"class":"UIImageView",

"image":"image/testicon.jpg",51); font-weight:bold"> "layout":{"s":"l=10,t=100,w=80,h=80","tag":1}

},

{

"class":"UILabel",51); font-weight:bold"> "backgroundColor":[0,255,0,0.8],51); font-weight:bold"> "textColor":"blackColor",51); font-weight:bold"> "text":"可变为多行文字,根据屏幕宽度可以自动适配行数",51); font-weight:bold"> "numberOfLines":0,51); font-weight:bold"> "font":18,51); font-weight:bold"> "layout":{"s":[

{"s":"l=10,m","asstag":1},51); font-weight:bold"> {"s":"r=10"}

]}

}

通过一个嵌套的数组,来书写两个依赖控件,通过指定 asstag 不同,来依赖多个控件。

默认asstag为0,即表示是 父view

如果有超过两个依赖的需求,通常可以使用中间插入一个view当作容器来达至目的

==================================================================

{

"layout":{"s":"l=10,h=80","tag":1}

},

{

"layout":{"s":[ {"s":"l=10,m","asstag":1},51); font-weight:bold; font-family:Arial; font-size:14px; line-height:26px"> {"s":"r=10"} ]

}

}

这里通过使用 一个数组来指定两个layout约束。

{"s":"l=10,51); font-family:Arial; font-size:14px; font-weight:bold; line-height:26px; white-space:pre">,51); font-family:Arial; font-size:14px; font-weight:bold; line-height:26px; white-space:pre">"asstag":1}表示 左边与图片view距离10 m 表示垂直方向上,与图片居中

"r=10"这里没有指明asstag,则asstag默认为0, 表示与父view的右边 距离10.

这样 左边, 右边,都控制住了位置,因为是UILabel,可以自己算出高度。再加上 m 居中对齐,

垂直方向上也得到了固定。

==================================================================

{

{"s":"r=10,w=40,h=40"},51); font-weight:bold"> {"s":"t","align":true,"asstag":1}

],"tag":2}

"text":"可变为多行文字,根据屏幕宽度可以自动适配行数",51); font-weight:bold"> {"s":"r=10","asstag":2}

}

这个看起来是不是很复杂呢,那们来分析一下

我们按顺序把上面三个view标记ImageView1 ImageView2 Label

ImageView1 的布局{"s":"tag"1} 就不再讲了

ImageView2的布局, 其中 {"r=10,h=40"表示右边与父view距10,宽度高度均为 40

"t""align":true这里引入了新属性 align.

我们前面讲过,依赖某个控件时,t写在前面,表示ImageView1在ImageView2的上面,这里并且距离0(这里t=0)

但是我们加上了 "align":true,那么含意就变了,这里就让t表示的是对齐了,面不是放在哪个方位了。

对齐这里我用了一个红线标注

Label的布局},表示 与 ImageView1 左边距离10,并且垂直居中对齐

2}表示与ImageView2边距离10

这样 Label 左右均被固定了,因为是UILabel,可以自己算出高度。

加上 m 居中对齐,垂直方向上也得到了固定。

==================================================================

敬请关注下一节:

====================================================

====================================================

猜你在找的设计模式相关文章