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

https://github.com/easycodingTop/EALayoutLiteForOC

QQ群:454686295

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

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

如何依赖其它多个控件:

             {

                     "class":"UIImageView",

                     "image":"image/testicon.jpg",

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

              },

              {

                     "class":"UILabel",

                     "backgroundColor":[0,255,0,0.8],

                     "textColor":"blackColor",

                     "text":"可变为多行文字,根据屏幕宽度可以自动适配行数",

                     "numberOfLines":0,

                     "font":18,

                     "layout":{"s":[

                                     {"s":"l=10,m","asstag":1},

                                     {"s":"r=10"}

                                     ]}

              }

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

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

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

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

          {

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

},

{

"layout":{"s":[ {"s":"l=10,m","asstag":1},

                                             {"s":"r=10"} ] 

                                 }

          }

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

{"s":"l=10,m","asstag":1}表示 左边与图片view距离10 m 表示垂直方向上，与图片居中

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

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

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

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

             {

                     "class":"UIImageView",

                     "image":"image/testicon.jpg",

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

               },

               {

                     "class":"UIImageView",

                     "image":"image/testicon.jpg",

                     "layout":{"s":[

                                     {"s":"r=10,w=40,h=40"},

                                     {"s":"t","align":true,"asstag":1}

                                     ],"tag":2}

              },

            {

                     "class":"UILabel",

                     "backgroundColor":[0,255,0,0.8],

                     "textColor":"blackColor",

                     "text":"可变为多行文字,根据屏幕宽度可以自动适配行数",

                     "numberOfLines":0,

                     "font":18,

                     "layout":{"s":[

                                     {"s":"l=10,m","asstag":1},

                                     {"s":"r=10","asstag":2}

                                     ]}

            }

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

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

ImageView1 的布局{"s":"l=10,t=100,w=80,h=80","tag":1} 就不再讲了

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

{"s":"t","align":true,"asstag":1}这里引入了新属性 align.

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

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

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

Label的布局{"s":"l=10,m","asstag":1}，表示 与 ImageView1 左边距离10,并且垂直居中对齐

{"s":"r=10","asstag":2}表示与ImageView2右边距离10

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

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

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

敬请关注下一节:

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

https://github.com/easycodingTop/EALayoutLiteForOC

QQ群:454686295

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