DDuilib入门-XML布局【二】

待编写...

前言：其实duilib的布局文件有种类似FireMonkey中的Style文件， 只是没有Delphi这么好的样式设计器。

一、VerticalLayout和HorizontalLayout

小提示：

  当布局为VerticalLayout时，其子节点将以“左至右”呈现。

  当布局为HorizontalLayout时，其子节点将以“上至下”呈现。

  有如：当父布局为VerticalLayout时，我要进行横向排版怎么办呢？这时添加一个HorizontalLayout，然后在HorizontalLayout中布局就行了。当如果是HorizontalLayout时，反之即可。

 

下面看一个布局参考文件代码：

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window>    <VerticalLayout name="addappLayout" width="80" height="80">        <HorizontalLayout />        <HorizontalLayout height="48">            <VerticalLayout />            <VerticalLayout width="48" height="48" bkimage="addapplication.png">                <Button name="btnaddapp" float="true" pos="0,0,0,0" width="48" height="48" normalimage="addapplication.png" hotimage="applicationbackgournd.png" />            </VerticalLayout>            <VerticalLayout />        </HorizontalLayout>        <HorizontalLayout />    </VerticalLayout></Window>

设计时图：

1、首先我们第一个VerticalLayout做了宽度和高度的约束作为ROOT。

2、在其中有三个HorizontalLayout子节点，可以看到只对第二个HorizontalLayout做了高度的约束，那么此时其它两HorizontalLayout将会平分剩余的高度将中间的HorizontalLayout挤到正中央，这样就行成了垂直居中效果。

3、在第二个HorizontalLayout节点中我们添加三个VerticalLayout，依然只对第二个VerticalLayout做了高和宽的约束，其它两个默认平分剩余宽度，此时就达到了水平居中效果。

此时一个垂直和水平居中的布局就行成了，然后就可以在中间的VerticalLayout放置你想要的控件，怎么玩都行了。

二、TileLayout

TileLayout布局可以说跟FireMoneky中TGridLayout是一样的作用，按照 columns及itemsize对子控件进行排序，形成类似表格的样式。

下在为TileLayout布局的一个例子

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="384,216">    <TileLayout columns="3" itemsize="128,72">        <VerticalLayout bkimage="wallpapers\s-{00000000-0000-0000-0000-00000000000f}.jpg" />        <VerticalLayout bkimage="wallpapers\s-{00000000-0000-0000-0000-000000000001}.jpg" />        <VerticalLayout bkimage="wallpapers\s-{00000000-0000-0000-0000-000000000002}.jpg" />        <VerticalLayout bkimage="wallpapers\s-{00000000-0000-0000-0000-000000000003}.jpg" />        <VerticalLayout bkimage="wallpapers\s-{00000000-0000-0000-0000-000000000004}.jpg" />        <VerticalLayout bkimage="wallpapers\s-{00000000-0000-0000-0000-000000000005}.jpg" />        <VerticalLayout bkimage="wallpapers\s-{00000000-0000-0000-0000-000000000006}.jpg" />        <VerticalLayout bkimage="wallpapers\s-{00000000-0000-0000-0000-000000000007}.jpg" />        <VerticalLayout bkimage="wallpapers\s-{00000000-0000-0000-0000-000000000008}.jpg" />    </TileLayout></Window>

上面的TileLayout中我们指定其columns为3，并使用itemsize约束了每个子控件大小，这样就形成了一个3x3的表格样式。

一般置于TileLayout下的控件不要指定其高度、宽度及位置属性。

ps: 如果有误请指出。