上一个教程实现的标题栏代码中，并没有看到处理自适应窗口大小的代码，但是窗口大小变化后，按钮的位置会跟着变化，这是因为我们将按钮放到了HorizontalLayout、VerticalLayout，这样duilib就会帮我们自动布局按钮的位置和大小，顾名思义，HorizontalLayout就是水平布局，VerticalLayout就是垂直布局。

最开始的教程里面，窗口大小变化时，Hello World按钮会沾满整个窗口，并且文字始终居中，这就是HorizontalLayout的效果：

        <HorizontalLayout><Button name="btnHello" text="Hello World"/></HorizontalLayout>

那么HorizontalLayout和VerticalLayout有什么区别呢？ 其实这个Alberl也不怎么懂，Alberl都是直接试效果的，HorizontalLayout不行就换VerticalLayout ~O(∩_∩)O  这个还得请各位大神多多赐教，等写完这个入门教程后，Alberl会继续学习duilib，到时候再继续写教程。

由于官方木有文档，所有的东西都靠自己去看，去Demo里调试，所以这个布局的准确文字定义我也不好说，就直接用实验的方式跟大家讲解啦~
现在开始讲解上一个教程中的界面布局：
1、首先得到一个渐变的背景窗口，将XML的内容改成下面这样

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"></VerticalLayout>
</Window>

效果如图：

从duilib的源码里可以看到：
(1)XML的 <VerticalLayout> 节点对应于duilib里的CVerticalLayoutUI控件
(2)CVerticalLayoutUI控件继承于CContainerUI，而CContainerUI继承于CControlUI。
所以其实CVerticalLayoutUI 也是一个控件啦，把它和CButtonUI同等对待，就比较好理解了。
为了进一步表现他们的类似，可以将XML里面的VerticalLayout 换成 Button、Control、Container 试试，你会发现效果是一样的哦~
再次强调下win32/MFC的界面 和duilib 界面的区别：
(1)MFC中将按钮、菜单、标题栏等等都当作不同的东西（例如标题栏只能放在最上面，按钮不能直接拖到标题栏等等）；
duilib中将所有的东西都同等对待，所以处理起来非常方便（别说把按钮放到标题栏上，就算把标题栏放在按钮上都没问题）。
(2)MFC中所有的窗口和控件都是继承于CWnd（win32继承于HWND）。
duilib中所有的控件都继承于CControlUI，所有的窗口都继承于CWindowWnd（内部包装了HWND）。
所以如果用MFC做一个界面，那么上面就是很多个CWnd，用Spy++可以看到不同的窗口句柄。
如果用duilib做一个界面，那么上面就是很多个CControlUI，但是用Spy++只能看到一个窗口句柄。
这是因为duilib整个窗口只有一个HWND，其他的CControlUI虽然是控件，但是其实都是自己绘制出来的，并不是真正的HWND，所以你可以把这些控件理解为自绘，整个duilib的界面绘制，就是在自绘一个HWND。
2、加上标题栏，将XML的内容改成下面这样：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout  bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"><!-- 标题栏区 --><HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">  </HorizontalLayout></VerticalLayout >
</Window>

效果如图：

其中height="32" 是指这个HorizontalLayout 只占用32个像素高度。
3、将标题栏移到下面，将XML的内容改成下面这样：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout  bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"><HorizontalLayout /> <!-- 占空位，占据上面所有的空位--><!-- 标题栏区 --><HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">  </HorizontalLayout></VerticalLayout >
</Window>

效果如图：
这里只加了一行代码<HorizontalLayout />，就让标题栏移到了下面，这行代码的意思是：占据空白的部分。
由于这行代码放在标题栏HorizontalLayout 的上面，所以标题栏被挤了下去，如果放到下面，是没有效果的。
4、将标题栏移到中间，将XML的内容改成下面这样：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout  bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"><HorizontalLayout /> <!-- 占空位，占据上面所有的空位--><!-- 标题栏区 --><HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">  </HorizontalLayout><HorizontalLayout /> <!-- 占空位，占据下面所有的空位--></VerticalLayout >
</Window>
效果如图：

为什么标题栏就跑到中间了呢？ 
在标题栏的上面和下面都有一个占空位的<HorizontalLayout />，如果没有指定高度，那么他们会默认各占一半高度，相当于有一个默认的属性 height="***"
那么我们给它指定一个高度试试，比如把上面那个<HorizontalLayout /> 改为<HorizontalLayout height="32" />，效果如图：
现在应该明白<HorizontalLayout />占位的作用了吧~\(^o^)/~
这里有一点要注意的就是：
占位的时候，
<HorizontalLayout /> 一般是指定height属性，也就是说占的位置是从上往下算的。因为水平方向的位置都会占据。

<VerticalLayout/>       一般是指定width属性，也就是说占的位置是从左往右算的。因为垂直方向的位置都会占据。

并且HorizontalLayout 和VerticalLayout一般都是交叉包含，而不是重复包含（比如<HorizontalLayout> 子节点里再包含一个<HorizontalLayout> 节点）。
当然，上面指的是一般情况，如果对布局很熟悉了，就可以随意包含了。
这里讲的都是把标题栏水平放置，把标题栏垂直放置相信也难不倒大家了，就请自行试验，以便熟悉这些布局。
5、回到前面第2个步骤，我们来添加客户区布局。
因为背景色已经是渐变的了，所以就不给客户区加背景了，那么客户区暂且不管。
6、添加最大化、最小化、关闭按钮：
上一个教程的最后部分已经解释了按钮的外观等属性，这里为了简明，就不加那么多属性了，先加上一个最小化按钮试试效果：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout  bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"><!-- 标题栏区 --><HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">  <Button name="minbtn" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/></HorizontalLayout></VerticalLayout >
</Window>

效果如图：

可以看到整个最小化按钮都被拉伸了，其中两边的矩形色块是因为图片的边框也被拉伸了。
我们再加上最大化按钮和关闭按钮，XML如下： 
<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout  bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"><!-- 标题栏区 --><HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">  <Button name="minbtn" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/><Button name="maxbtn" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' "/><Button name="closebtn" normalimage=" file='SysBtn\closeNormal.bmp' " hotimage=" file='SysBtn\closeFocus.bmp' "/></HorizontalLayout></VerticalLayout >
</Window>

效果如图：

可以发现三个按钮被均匀拉伸了。
但是我们显然不想让按钮被拉伸，怎么办呢？
还记得前面说的占位布局吗？因为我们想让按钮显示到右边，所以我们要占住左边的部分。 那我们加一个占位试试。
不过，
(1)亲们知道这个占位要加到哪一行么？
当然是加到按钮的上面！ 那我们加到按钮上面试试。
(2)亲们知道这个占位布局用<HorizontalLayout/>还是<VerticalLayout/>么？
其实我也不知道，那咱们就试试吧。
先加个<HorizontalLayout/>玩玩，XML如下：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout  bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">       <!-- 标题栏区 --><HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">  <HorizontalLayout /><Button name="minbtn" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/><Button name="maxbtn" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' "/><Button name="closebtn" normalimage=" file='SysBtn\closeNormal.bmp' " hotimage=" file='SysBtn\closeFocus.bmp' "/></HorizontalLayout></VerticalLayout >
</Window>

效果如图：
(其实换成VerticalLayout等任何CControlUI，效果都是一样的)
果然占到了左边的部分，但是为什么还是均分呢，怎么让它只占用左边的一大部分呢？
这就是width的用处了， 我们给HorizontalLayout 加上一个属性 width = "600"，可以看到如下效果：
好家伙，果然有用！
下一步我们再把width加大一点，应该就可以让按钮正常了吧？
先别急着管大小，我们先拖动一下窗口大小，或者点击最大化按钮~
是不是有新问题啦？ 为什么按钮还是被放大了呢？
因为我们给HorizontalLayout加上了width属性，那么在水平方向，它就失去自适应效果啦，因为宽度永远是前面指定的600.
那怎么样才能让按钮不被放大呢？
很显然，不应该给左边的占位布局HorizontalLayout 指定width属性，而应该给右边的按钮指定width属性。
但是按钮有 width属性吗？
按钮是有，但是我们应该添加一个占位布局 HorizontalLayout  来指定width属性。 XML如下：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout  bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">       <!-- 标题栏区 --><HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">  <HorizontalLayout /><HorizontalLayout width = "77"><Button name="minbtn" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/><Button name="maxbtn" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' "/><Button name="closebtn" normalimage=" file='SysBtn\closeNormal.bmp' " hotimage=" file='SysBtn\closeFocus.bmp' "/></HorizontalLayout></HorizontalLayout></VerticalLayout >
</Window>

效果如图：

现在窗口大小怎么变，按钮都不会被拉伸啦，恭喜小伙伴们~
可以看到那3个Button节点都被放到了HorizontalLayout 节点下，下面是时候讲一下布局了：
其实duilib整个界面都是由各种布局组成，我们把上面的XML简化一下，就是下面这样子： 
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout >       <HorizontalLayout height="32" >  <HorizontalLayout /><HorizontalLayout width = "77" /></HorizontalLayout></VerticalLayout >
</Window>

很明显，最外层是整个窗口的布局<VerticalLayout>，之后又包含了一个 <HorizontalLayout height="32" >布局（即标题栏），

再里面又包含了两个HorizontalLayout布局，所以一切框架和位置都是由布局决定。
这里先简要介绍一下duilib的UI设计器：
1、在duilib源码的bin目录下，【DuiDesigner.exe】就是UI设计器啦。
2、把XML拖拽上去即可直接看到界面效果，
我们把前面那个完整的XML拖进去，即可看到如下效果：
红色边框围起来的就是一个个HorizontalLayout 等布局啦~
7、调整按钮的位置和大小。
虽然已经将按钮显示到最后边，但是按钮沾满了右边部分，我们现在把他们的高度调小一点：
给Button节点都加上属性 height ="20",效果如图：
嗯，效果看起来还行。
再加上width="23"属性，效果如图：
那怎么样让按钮不挨着顶部呢？
前面介绍过float属性，是用于绝对定位，由于现在按钮的位置都是由布局自动调整的，所以没办法调节位置，如果不想让布局自动调整位置，就要加上float="true"，这样就可以自己指定位置啦。我们给最小化按钮加上 float="true" pos="0,5,22,24" 试试，效果如图：
额，最小化按钮哪里去了~~~
虽然最小化按钮使用了绝对定位，但是其他两个按钮还是自动布局，所以需要给他们也加上，XML如下：

<HorizontalLayout width = "77"><Button name="minbtn"   height ="20" width="23" float="true" pos="0,5,22,24"  normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/><Button name="maxbtn"   height ="20" width="23" float="true" pos="22,5,44,24" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' "/><Button name="closebtn" height ="20" width="23" float="true" pos="44,5,74,24" normalimage=" file='SysBtn\closeNormal.bmp' " hotimage=" file='SysBtn\closeFocus.bmp' "/>
</HorizontalLayout>

效果如图：

对比一下上个教程完整的图片：
发现我们这个这个图有点不对，三个按钮的中间的线有点粗~
这是因为图片画的不对（这些图片是Alberl早几年画的，用于MFC，所以并没有考虑duilib），可以把最大化按钮两边的边框都去掉，这样就OK啦~
不过呢，没必要那么做，我们恰好可以再学习一点新知识~
我们可以看到，虽然给关闭按钮指定的宽度也是23，但是它却比其他按钮大。  这说明width属性已经失效了，这是因为我们在pos属性里面已经指定了位置大小，它会优先以pos属性为准，那么显然height属性也失效了。（感谢网友【糖加三勺】的提醒，Alberl的这个 说法有误，重新试了一下，如果pos属性放在后面，就会以pos为准，height属性放在后面就会以height为准，并不是属性失效。）
回到刚刚那个按钮图片的问题，由于每个按钮图片都画了边框，所以会有加在一起就有两个边框了，所以中间的线有点粗，那么我们现在可以将最大化、关闭按钮往左边移动一个像素。
效果如图：
嘿嘿，好了吧~
但是这个关闭按钮貌似有点宽~
我们当然可以再次调整pos属性，但是这不科学~~
还记得失效的那两个属性么？
那是因为pos属性的后面两个值都填了非0值，所以导致那两个属性失效，下面我们把pos后面的两个值改为0试试。
可以发现那两个属性又生效啦~（感谢网友【 糖加三勺】的提醒，Alberl的这个说法有误，重新试了一下，如果pos属性放在后面，就会以pos为准，height属性放在后面就会以height为准，并不是属性失效。）
现在只要去掉width、height属性中的一个，按钮都会不见了，Alberl以为按钮的大小会调整成图片的大小呢~~~
看来只能指定宽度和高度了（为了方便后期的位置调整，建议pos属性后面两个值填0，使用width/height属性来指定按钮大小）
这几个图片的宽高分别是19 * 23、19*28，所以就手动指定了，XML如下： 
<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout  bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">       <!-- 标题栏区 --><HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">  <HorizontalLayout /><HorizontalLayout width = "77"><Button name="minbtn"   float="true" pos="0,5,0,0"  height="19" width="23" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/><Button name="maxbtn"   float="true" pos="22,5,0,0" height="19" width="23" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' "/><Button name="closebtn" float="true" pos="44,5,0,0" height="19" width="28" normalimage=" file='SysBtn\closeNormal.bmp' " hotimage=" file='SysBtn\closeFocus.bmp' "/></HorizontalLayout></HorizontalLayout></VerticalLayout >
</Window>

效果如图：

(上面的XML里，Button的父节点HorizontalLayout 换成 VerticalLayout也是一样的效果，所以有时候他们是没有什么分别的，不过个人的理解应该是要交叉使用的)
好啦，最关键的布局部分讲完啦，另外，在duilib的官方群里，有共享一个布局案例，Alberl已整理出来【 duilib入门和xml培训 布局案例.rar】，那里有9个布局案例，相信看完本教程的讲解之后，再看看那9个XML布局，应该就很熟悉布局啦，如果还有不懂的话，请留言~

    注意：一切结果以实际运行效果为准，切勿完全相信本文的言论，因为Alberl搞不好手一抖打错个字母啥的，或者复制上来的代码有误，或者本来理解就有误，很可能会误导大家。 如有错误的地方，多谢指正~\(^o^)/~

2013 duilib入门简明教程 -- 界面布局(9)相关推荐

  1. duilib教程之duilib入门简明教程 -- 界面布局(9)

    上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayout,这样 ...

  2. 2013 duilib入门简明教程 -- 总结 (20)

    原文地址为: 2013 duilib入门简明教程 -- 总结 (20) duilib的入门系列就到尾声了,再次提醒下,Alberl用的duilib版本是SVN上第 387个版本,时间是2013.08. ...

  3. duilib 子窗口位置_duilib入门简明教程 -- 界面布局(9)

    上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayout,这样 ...

  4. duilib 子窗口位置_duilib入门简明教程 -- 界面布局(9) （转）

    效果如图: 可以看到整个最小化按钮都被拉伸了,其中两边的矩形色块是因为图片的边框也被拉伸了. 我们再加上最大化按钮和关闭按钮,XML如下: 效果如图: 可以发现三个按钮被均匀拉伸了. 但是我们显然不想 ...

  5. 2013 duilib入门简明教程 -- 完整的自绘标题栏(8)

    看了前面那么多教程,相信对duilib已有基本映像了,我们就快马加鞭,做出一个完整的自绘标题栏吧~ 看到下面这个效果图,小伙伴们是不是有点惊呆了呢~O(∩_∩)O~ duilib实现以上效果非常简单, ...

  6. DuiLib入门简明教程

           Duilib 是一款强大的界面开发工具,可以将用户界面和处理逻辑彻底分离,极大地提高用户界面的开发效率. 国内首个开源 的directui 界面库,开放,共享,惠众,共赢,遵循bsd协议 ...

  7. duilib入门简明教程 -- 部分bug (11) （转）

    原文转自:http://www.cnblogs.com/Alberl/p/3344886.html 一.WindowImplBase的bug 在第8个教程[2013 duilib入门简明教程 -- 完 ...

  8. duilib教程之duilib入门简明教程9.界面布局

    上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayout,这样 ...

  9. duilib入门简明教程 -- 前言(1) （转）

    原文转自 :http://www.cnblogs.com/Alberl/p/3341956.html 关于duilib的介绍就不多讲了,一来不熟,二来小伙伴们想必已经对比了多个界面库,也无需赘述.下面 ...

最新文章

  1. 验证曲线（ validation curve）是什么？如何绘制验证曲线（ validation curve）？验证曲线（ validation curve）详解及实践
  2. 实现DFS之“油田”
  3. JVM:方法区可以GC吗？
  4. 结对项目之需求分析与原型设计
  5. antd 能自适应吗_自首要满足的条件有哪些，自首能从宽处罚吗？
  6. java handler null_java – 在调用之前,如何确保另一个Thread的Handler不为null？
  7. php测试插入,php – 使用Symfony测试数据库插入
  8. [jboss] 运行多个JBoss实例
  9. Spring同mybatis整合讲义(事物)
  10. maven的Lifecycle生命周期
  11. 搜狗-国内首个双核浏览器
  12. git放弃本地修改:
  13. [精简]托福核心词汇37
  14. SAI2和PS如何查看当前鼠标位置内容的图层
  15. 有哪些wordpress企业网站主题推荐？
  16. 关于《损失模型》的一点笔记——第一部分引言
  17. 第九讲：Python爬取网页图片并保存到本地
  18. linux C -- ftok函数
  19. The Softer Side of the Architect
  20. Scrapy的简单使用

热门文章

  1. java实现excel竖排数据导出并设置样式
  2. 潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)
  3. maven profile配置
  4. 华为手机吃鸡隐藏功能android,什么蓝牙耳机适合华为手机？超低延迟吃鸡蓝牙耳机安卓苹果通用...
  5. 张铁林忆吴若甫绑架案 “皇阿玛”曾是绑架对象
  6. 直播预告|一键观看关联网络与团伙欺诈的爱恨情仇
  7. Edge 浏览器打不开任何网站
  8. C语言实现输出前n项Fibonacci数列
  9. javascript 获取毫秒、纳秒时间戳
  10. mysql索引 include_MySql索引详解