EALayout 第一节 控件基本布局

https://github.com/easycodingTop/EALayoutLiteForOC

QQ群:454686295

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

我们先着重讲 布局 相关的知识吧, 属性后面教程再讲

如何描述一个控件:

         {

                   "class":"UIView",      ------------> class 对应 类名，也可以是自定义的类, Swift自定义的控件，需要使用 @objc(自定义控件)

                  "backgroundColor":"blueColor",   --------------->  设置背景色 为 蓝色.  当然 "blueColor" 也可写作 "#FF0000FF"  "0xFF0000FF"   [0,0,255]

                  "layout":{"s":"l=10,t=100,w=100,h=100"}   ---------------> 设置控件的 布局。 别急，布局不能就这么简单就结束的，不会让你白脱裤子的。

        }

layout 支持属性

          l  ==>left 左对齐或左偏移

          c  ==>center  水平居中

         r   ==>right  右

         t   ==>top 顶部

         m ==>middle  垂直居中

         b  ==>bottom  底部

         w  ==>width 宽度

         h  ==>height 高度

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

         {"s":"l=20,t=100,w=100,h=100"}

         表示与父view的关系为:

         l=20 左边距离20。 当为l=0时，也可以简写为 l   (l=0 等同于 l),   c,r,t,m,b 也类似 =0时可以省略 =0.    w,h除外

         t=100  顶部距离100

         w=100  宽度100

         h=100 高度100

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

         {"s":"l=20,r=100,t=100,h=100"}

         表示与父view的关系为:

         l=20 左边距离20 

         r=100 表示距右边100. 那么 宽度 = 父view宽度 - left - right ， 那么不同屏幕宽度可以适配了

         t=100  顶部距离100

         h=100 高度100

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

         {"s":"l=20,r=100,b,h=100"}

         表示与父view的关系为:

         l=20 左边距离20。 

         r=100 表示距右边100

         b 与 b=0 等同 。 即与底部距离为0

         h=100 高度100

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

              {

                      "class":"UILabel",

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

                      "textColor":"blackColor",

                       "font":18,

                      "text":"自动计算大小",

                     "layout":{"s":"l=50,t=100"}

                }

                UILabel 可以通过 font 以及 text 自己计算出大小

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

                {

                      "class":"UILabel",

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

                      "textColor":"blackColor",

                      "text":"自动计算大小",

                      "font":18,

                      "textAlignment":"center",

                      "layout":{"s":"l=50,t=100,r=20"}

                 }

                 如果通过 layout可以算出大小，那么优先使用计算出来的大小，这里 l=50,r=20 可以算出宽度。 textAlignment 设置了文字居中

 

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

                

              {

                      "class":"UILabel",

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

                      "textColor":"blackColor",

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

                      "numberOfLines":0,

                      "font":18,

                      "layout":{"s":"l=10,t=100,r=10"}

                  }

numberOfLines 设置为0 ，表示可以多行。 这里layout没有指定UILabel的高度，

这里指定了l=10, r=10, 可以算出宽度。宽度这里适配了

                 所以 iPhone 4s、iPhone 6、iPhone 6 Plus 不同屏幕显示效果就不一样了

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

敬请关注下一节:

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

https://github.com/easycodingTop/EALayoutLiteForOC

QQ群:454686295

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