有了前面三篇的基础，现在可以开始布局了。

首先任何布局都必须包含在<Window></Window>标签内，跟<html></html>很像。

DuiLib提供了两种布局方式，水平布局和垂直布局，虽然没有css左右浮动那么方便，但是有这些东西，完全可以像写页面table一样去完成。

水平布局是HorizontalLayout，垂直布局为VerticalLayout。在Window标签内，默认的是垂直布局。

下面来看一段代码，包含了水平和垂直布局。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <Window mininfo="400,360" size="480,320">
  3.   <VerticalLayout bkcolor="#ffab7958">
  4.     <Button name="closebutton" height="20" bkcolor="#88e47621" text="垂直布局bt1"  maxwidth="120" />
  5.     <Button name="closebutton" height="20" bkcolor="#ffe47621" text="垂直布局bt2"  maxwidth="120" />
  6.     <HorizontalLayout bkcolor="#ffe7e2dc">
  7.       <Button name="closebutton" height="20" bkcolor="#88e47621" text="水平布局bt1"  maxwidth="120" />
  8.       <Button name="closebutton" height="20" bkcolor="#ffe47621" text="水平布局bt2"  maxwidth="120" />
  9.     </HorizontalLayout>
  10.   </VerticalLayout>
  11. </Window>

效果如下图：

如果标签内的元素总长度超过了既定大小，它会自动压缩大小的。下图为8个button超长的效果：

下面我们来一个demo布局试下。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <Window  mininfo="400,200" size="480,320" caption="0,0,0,32"  sizebox="4,4,4,4">
  3.   <VerticalLayout bkcolor="#ffe7e2dc" bkcolor2="#ffe9c8a5">
  4.     <!--标题栏-->
  5.     <HorizontalLayout bkcolor="#ffe7e2dc" height="20" bkcolor="#ffe7e2dc" bkcolor2="#ffe9c8a5">
  6.       <Button name="closebutton" width="45" height="17" float="true" pos="430,2,0,0" normalimage="file='imgs\sys_dlg_close.png'" hotimage="file='imgs\sys_dlg_close2.png'"/>
  7.     </HorizontalLayout>
  8.  
  9.     <HorizontalLayout bkcolor="#ffe7e2dc">
  10.       <VerticalLayout bkcolor="#ffd9ebb1" width="156" height="294" float="true" pos="3,3,0,0">
  11.         <Label bkimage="file='imgs\imgtest.jpg'" borderround="18,18" width="156" height="145"></Label>
  12.         <Label width="156" height="135" text="吾欲乘风归去" align="center"></Label>
  13.       </VerticalLayout>
  14.       <VerticalLayout bkcolor="#ffd6a7c9" width="156" height="294" float="true" pos="162,3,0,0">
  15.         <Label bkimage="file='imgs\img2.jpg'" borderround="18,18" width="156" height="234" float="true" pos="0,60,156,0"></Label>
  16.       </VerticalLayout>
  17.       <VerticalLayout bkcolor="#ffbbb4d6" width="156" height="294" float="true" pos="321,3,0,0" >
  18.         <Label bkimage="file='imgs\img3.jpg'" borderround="18,18" width="156" height="241"></Label>
  19.       </VerticalLayout>
  20.  
  21.     </HorizontalLayout>
  22.   </VerticalLayout>
  23. </Window>

效果如图：

这里用到pos，这是一个相对父级的绝对定位方式，这样不能自适应窗口大小变化。

大概操作了一把，觉得布局还是比较容易上手。以后可以做更复杂的东西了。

DuiLib学习笔记4——布局的更多相关文章

  1. Duilib学习笔记《06》— 窗体基类WindowImpBase

    在前面的例子中我们发现,窗口都是继承CWindowWnd.INotifyUI,然后重载相关函数去实现.显然,我们发现窗口的创建流程实际上都是差不多的,主要只是在OnCreate加载的配置文件不同等等… ...

  2. Duilib学习笔记《04》— 窗体显示

    在前面已经了解了duilib控件以及界面布局相关内容,接下来就要考虑该如何将xml中描述的布局通过界面展现出来.实际上在 Duilib学习笔记<01> 中我们已经简单提到过基本的流程及元素 ...

  3. Duilib学习笔记《03》— 控件使用

    在前面已经对duilib有个一个基本的了解,并且创建了简单的空白窗体.这仅仅只是一个开始,如何去创建一个绚丽多彩的界面呢?这就需要一些控件元素(按钮.文本框.列表框等等)来完善. 一. Duilib控 ...

  4. DuiLib学习笔记（二） 扩展CScrollbar属性

    DuiLib学习笔记(二) 扩展CScrollbar属性 Duilib的滚动条滑块默认最小值为滚动条的高度(HScrollbar)或者宽度(VScrollbar).并且这个值默认为16.当采用系统样式 ...

  5. Duilib学习笔记《05》— 消息响应处理

    在Duilib学习笔记<04>中已经知道了如何将窗体显示出来,而如何处理窗体上的事件.消息呢? 一. 系统消息 窗体显示的时候我们就已经说了,窗体是继承CWindowWnd类的,对于窗体的 ...

  6. Qt学习笔记-Widget布局管理

    Qt学习笔记4-Widget布局管理       以<C++ GUI Programming with Qt 4, Second Edition>为参考 实例:查找对话框 包含三个文件,f ...

  7. Duilib学习笔记《02》— 界面布局

    1. 界面描述XML文件 Duilib主要是通过XML来进行界面的布局配置,程序通过读取并解析XML文件来创建对应的窗体.DuiLib的页面布局分为三类:窗体(Window).容器(Contain)和 ...

  8. Duilib学习笔记《07》— 资源加载

    Duilib的界面表现力能如此丰富,很大程度上得益于贴图描述的简单强大.通过之前的学习及参看相关例子,我们可以发现,在XML布局文件中,不管是窗体背景还是控件,都添加了对应的图片资源以此来美化界面.而 ...

  9. Duilib学习笔记《01》— duilib整体框架认识

    从GoogleCode上下载的duilib工程中附带的一副总体设计图(如下所示),可以先整体了解一下,有个初步的认识,对后续进一步深入了解学习会很有帮助. 通过设计图有了一个初步认识后,接下来开始进一 ...

随机推荐

  1. ACM 阶乘之和

    阶乘之和 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 给你一个非负数整数n,判断n是不是一些数(这些数不允许重复使用,且为正数)的阶乘之和,如9=1!+2!+3! ...

  2. jQuery Ajax遍历表格，填充数据，将表格中的数据一条一条拼成Jason数组

    $.ajax({ url: baseURL + "InvoiceSale/OnQuotaInvoiceSale", //点击核销单号时,点击核销时,交互的页面           ...

  3. poj 2239 二分图最大匹配，基础题

    1.poj 2239   Selecting Courses   二分图最大匹配问题 2.总结:看到一个题解,直接用三维数组做的,很巧妙,很暴力.. 题意:N种课,给出时间,每种课在星期几的第几节课上 ...

  4. Rational Rose 2007 破解版安装过程

    Rational Rose 2007 破解版安装过程 首先通过网站将软件下载,然后依照以下步骤进行: 选择第二项,下一步 一直点击next,出现如下,可以修改安装的目的文件夹 设置完路径之后出现如下, ...

  5. Socket 与 WebSocket

    本文转载自:http://zengrong.net/post/2199.htm 1. 概述 选择了 WebSocket 技术之后,不可避免的,我要将它和其他协议以及技术做一下比较.最常见的,就是需要比 ...

  6. POI操作Excel常用方法总结 (转)

    以下的链接为原创地址: http://blog.csdn.net/huazhangena/article/details/7587731 http://blog.csdn.net/huazhangen ...

  7. sql 将字符串转换为表

    我们常常碰到需要将用户输入之字符串依特定的分隔符转换为表的一个栏位,下面是我写的一个sql函数.如能灵活运用则用途广泛. -- ==================================== ...

  8. Hibernate中主键生成策略

    主键生成策略 increment identity sequence native uuid assigned 1) increment 由hibernate完成 主键递增, 原理:select ma ...

  9. [LintCode] Submatrix Sum 子矩阵之和

    Given an integer matrix, find a submatrix where the sum of numbers is zero. Your code should return ...

  10. QQ中打开链接不是默认浏览器

    电脑上装了搜狗和Chrome,Chrome为默认浏览器.但QQ中不论点什么都是以搜狗打开,解决办法: 1.设置, 2. 安全设置-->安全推荐-->使用搜狗打开链接增强安全性.去掉勾勾就行 ...