Duilib六大布局及绝对布局和相对布局

duilib的Layout目录专门放置布局相关的容器控件，这6个布局分别为：Container、VerticalLayout、HorizontalLayout、TileLayout、TabLayout、ChildLayout。容器之间可以任意相互嵌套。


一、Container（容器控件）：


  Container布局是其他所有布局以及含有容器特性（如CList、CListContainerElement）的控件的基类，而实际上开发过程中很少使用这个布局，只用他来做其他更高级的布局的基类。因为Container布局中的所有控件都会自动填充满整个布局，所有的控件都叠到了一起。而这个效果一般不是我们想要的。我目前想得到的他的唯一用途就是用于绝对布局，而且里面的所有元素都使用绝对布局。


  容器控件有什么用呢？ 它的用处就是可以使子窗口的行为随着Container一致变化。比如我们的窗口有10个按钮，如果没放在Container里的话，那么想要隐藏所有控件，就必须调用10次隐藏函数，如果想将所有控件往左移的话，也需要操作10次，同样，上面因为有3个图片，所以为了让他们都适应窗口大小，我们做了3次布局。而如果这些控件都在Container里的话，那就方便多了，就算有100个按钮，如果要隐藏的话，我们只需要调用1次隐藏函数，即隐藏Container控件即可，这样它的子控件都会隐藏。


二、VerticalLayout（纵向布局）、HorizaontalLayout（横向布局）：


VerticalLayout与HorizontalLayout布局无疑是duilib中最常使用的两个布局，巧妙的使用这两个布局可以满足大多数的布局需求。从单词的意思上不难看出VerticalLayout是纵向布局，HorizaontalLayout是横向布局。这门两个直接继承自Container布局。


VerticalLayout布局会让他包含的元素都纵向排列开，HorizaontalLayout布局会让给他包含的元素都横向排列开：如图






三、TileLayout：


TileLayout布局是用来做类似360工具箱的效果：






四、ChildLayout：


ChildLayout布局比较少用，因为他的功能可以用其他布局来代替，他的作用就是从一个xml文件中加载布局来嵌入到ChildLayout布局所在的地方，使用这个布局一般只需要指定xmlfile属性来设置xml文件位置就可以了。他的意义在于可以把繁杂的大量xml代码分隔开。比如他和TabLayout布局结合，让TabLayout布局包含5个ChildLayout布局，而每个ChildLayout布局分别从5个xml文件加载自己的布局文件，这样就可以分块化的编写布局代码。






绝对布局的意义与用法：
  绝对布局，笼统上说绝对布局和相对布局其实只有一个差别，也就是我在前面提到的float属性，容器中包含的控件float属性为真就是绝对布局。


  因为要让控件重叠起来组合出新的控件才使用了绝对布局，如果不让控件重叠或者没有特殊需求，最好别用绝对布局。




虽然不建议使用，但我也得说一下绝对布局相关的属性和使用技巧。


1）把float属性设置为真。


2）设置pos属性，这个属性在float为真时才有效，他包含四个字段，分别以为了控件的左上右下下个坐标的位置，但是建议只指定前两个字段来设置控件的左上角的坐标，控件的宽度用width和height属性来控制，这样做的好处是避免了计算右下角坐标的繁琐！以后修改的时候也很清晰！



相对布局的意义与用法：
在容器内部使用控件或者容器时，float属性设置为flase（duilib默认为false）就是相对布局了。这是我非常推荐使用的，前面我也说了我在写仿酷狗的整个布局中，上百个控件中我只给两个控件使用了绝对布局，其余都是相对布局。他的优点如下：


1）布局和控件是可以根据窗体的大小改变而自动调整位置的，这点很重要


2）不需要绝对布局那样麻烦的计算各个控件的位置


3）在容器中调整前一个控件的位置，后面的控件都会自动调整坐标


其实总得来说使用相对布局意义就是使用布局控件的自动排列特性！


使用了相对布局后，就不用设置float属性和pos属性，一般只设置甚至不设置width和height属性。这点很重要，如果你的控件或者布局的大小是固定的，那么就设置width和height属性，如果想让控件或者布局根据窗体的大小而自动调整大小和位置，就不设置这两个属性。如果只设置了一个属性，比如width设置为100，而height不设置，那么他的高度是自动调整的而宽度是固定的。父容器会自动安排他包含的元素，让含有width和height属性的控件占据相应的大小，把剩下的空间都分配给没有设置wieth和height属性的容器或者控件里。看下面一个例子：






可以看到窗体的大小为300x300，而最外层的是一个名为Fahter的纵向容器，包含三个子容器。而Father没有指定width和height，所以当我改变了窗体的大小时，Father会自动调整自己的大小到和窗体大小相同，而三个子容器我都眉头指定width属性，所以三个子容器的宽度和Father是一样，也就是他们的宽度都是和窗体宽度一样，并且会自动调整。Sub1和Sub3的高度设置为50，所以他们的高度就固定了，而Sbu2的高度也没有指定，那他会自动占据了除了Sub1和Sub2的所有空间!其实这个例子的布局是非常常见的界面布局例子。


在充分理解了占位的技巧后，再配合一些微调属性，就可以完美控制各个控件了，这几个微调属性分别是inset、padding、childpadding，这几个属性的介绍如下：






在float为假，也就是相对布局中，这几个属性才起效。


inset属性


  这是给容器控件使用的，使用后他所包含的所有使用相对布局的元素，都会被限制在设置的范围内，适合对容器内所用元素进行整体的坐标控制。比如在前面提到的做360工具箱时，我们使用TileLayout容器来存放每一个工具，我们首先设置inset属性，就可以让所有的工具项限制在一定范围内，例子如下：










padding属性：


padding属性是相对布局中最常用的属性！用来设置相对于前一个控件的位置，这个属性的控件位置微调的关键。一般只用他的前两个字段，设置左边距和上边距，后两个字段是无效的，使用padding属性，这是底部这四个按钮的相对位置。如果我想整体让这四个控件向右位移10像素，那么我只要设置第一个按钮的padding属性为padding="10,0,0,0"，就可以了，其他布局完全不需要修改！