duilib 入门二之 HorizontalLayout与VerticalLayout

    熟悉duilib已经有段时间了，特地分享一下使用心得，如有不正确的还请留言指正。开始之前，先看图，下图是手写出来的仿QQ运行后的登录界面。

    

    为什么要进行手写？有两个原因，一是因为duilib的UI设计器有BUG，二是因为手写可以让我们理解整个设计过程。既然手写，不免会带来一些麻烦，比如怎么看效果？怎么检查自己写的XML是否正确，拿什么编辑XML文件等等。

    网络上很多工具可以做这些事情，而我本人使用的是UEDIT来编辑，XML Copy Editor来检查XML的错误、duilib自带的uidesigner来查看效果，以及MultiExtractor抽取相应的程序资源（我发现很多抽取出来的png图片windows可以正常显示，但是duilib却不能用）。

    进入正题，HorizontalLayout即水平布局，它是一个容器，可以指定一个名字，还有高度，宽度等，高度宽度不指定也可以，duilib会通过计算得出，但是建议指定一个，方便阅读和检查，设置方法如下，

     <HorizontalLayout name="HorizontalLayoutUI1" height="30" width="280"> ，

    它的意思是，在父容器中 指定一个名字为HorizontalLayoutUI1的容器，高度是30像素，宽度是280像素，它的所有控件按照水平排列，注意，并不意味着控件的高度也是30。

    接下来看它应用的具体例子，如下图

图中，水平布局有四个控件，一个长的匿名控件（占位控件），一个短的按钮控件（图片资源损坏了，没有显示出来），一个最小化按钮控件，一个关闭按钮控件，布局如下面所示。

<HorizontalLayout name="HorizontalLayoutUI1" height="30">
                <Control name="ControlUI1" />
                <Button name="btnSetting" width="30" height="30" bkimage="image\ListDown.png" textcolor="#00FFFFFF" disabledtextcolor="#FFA7A6AA" align="center" />
                <Button name="btnMini" width="30" height="30" bkimage="image\MinNormal.png" textcolor="#00FFFFFF" disabledtextcolor="#FFA7A6AA" align="center" />
                <Button name="btnClose" width="30" height="30" bkimage="image\Close.png" textcolor="#00FFFFFF" disabledtextcolor="#FFA7A6AA" align="center" />
   </HorizontalLayout>

当你阅读上面XML布局的时候，会发现ControlUI1没有指定宽度，为什么它会被拉得那么长？这是因为它的父容器宽度是已知的，后面三个控件已经设定了宽度了，所以它可以被计算出来，如果都没有指定长度，那么duilib会将没有指定长度那些控件的宽度取平均值。   

  VerticalLayout则是垂直布局，用法个水平布局一样，只不过该布局下面的所有控件按照垂直方向进行排列。看下面的图示

 该垂直布局中，有两个占位控件和一个登陆按钮，布局如下

<VerticalLayout name="VerticalLayoutUI10" width="195">
                    <Control name="ControlUI19" />
                    <Button name="btnLogin" height="30" textcolor="#FFFFFFFF" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='image\BtnLoginNormal.png' pos='source=;0,0,194,30'" hotimage="file='image\btnLoginHot.png'; source='0,0,194,30' " pushedimage="file='image\btnLoginHot.png' source='0,0,194,30' " />
                    <Control name="ControlUI20" />
   </VerticalLayout>

上面的布局中，两个占位控件没有指明高度，而登陆按钮指明了高度，所以duilib在计算的时候，会自动调整登陆按钮到中间位置。

水平布局和垂直布局不难理解，这两个是duilib最基本的两个布局来的，他们可以相互嵌套，大部分复杂的界面都可以由这两个布局就可以完成了。

下面为UIdesigner设计器中的效果图资源如下，整个仿QQ界面的资源和XML文件到 http://download.csdn.NET/detail/lishi969635/9309035 下载

转自：http://blog.csdn.net/lishi969635/article/details/50082471