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

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

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

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

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

<?xml version="1.0" encoding="utf-8"?>

<Window mininfo="400,360" size="480,320">

  <VerticalLayout bkcolor="#ffab7958">

    <Button name="closebutton" height="20" bkcolor="#88e47621" text="垂直布局bt1"  maxwidth="120" />

    <Button name="closebutton" height="20" bkcolor="#ffe47621" text="垂直布局bt2"  maxwidth="120" />

    <HorizontalLayout bkcolor="#ffe7e2dc">

      <Button name="closebutton" height="20" bkcolor="#88e47621" text="水平布局bt1"  maxwidth="120" />

      <Button name="closebutton" height="20" bkcolor="#ffe47621" text="水平布局bt2"  maxwidth="120" />

    </HorizontalLayout>

  </VerticalLayout>

</Window>

效果如下图：

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

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

<?xml version="1.0" encoding="utf-8"?>

<Window  mininfo="400,200" size="480,320" caption="0,0,0,32"  sizebox="4,4,4,4">

  <VerticalLayout bkcolor="#ffe7e2dc" bkcolor2="#ffe9c8a5">

    <!--标题栏-->

    <HorizontalLayout bkcolor="#ffe7e2dc" height="20" bkcolor="#ffe7e2dc" bkcolor2="#ffe9c8a5">

      <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'"/>

    </HorizontalLayout>

    <HorizontalLayout bkcolor="#ffe7e2dc">

      <VerticalLayout bkcolor="#ffd9ebb1" width="156" height="294" float="true" pos="3,3,0,0">

        <Label bkimage="file='imgs\imgtest.jpg'" borderround="18,18" width="156" height="145"></Label>

        <Label width="156" height="135" text="吾欲乘风归去" align="center"></Label>

      </VerticalLayout>

      <VerticalLayout bkcolor="#ffd6a7c9" width="156" height="294" float="true" pos="162,3,0,0">

        <Label bkimage="file='imgs\img2.jpg'" borderround="18,18" width="156" height="234" float="true" pos="0,60,156,0"></Label>

      </VerticalLayout>

      <VerticalLayout bkcolor="#ffbbb4d6" width="156" height="294" float="true" pos="321,3,0,0" >

        <Label bkimage="file='imgs\img3.jpg'" borderround="18,18" width="156" height="241"></Label>

      </VerticalLayout>

    </HorizontalLayout>

  </VerticalLayout>

</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. 关于c语言模拟c++的多态

    关于c++多态,个人认为就是父类调用子类的方法,c++多态的实现主要通过虚函数实现,如果类中含有虚函数,就会出现虚函数表,具体c++多态可以参考<深度探索c++对象模型> c语言模拟多态主 ...

  2. 【BZOJ】2086: [Poi2010]Blocks

    题意 \(n(1 \le n \le 1000000)\)个数\(a_i(a_i \le 10^9)\).\(m(1 \le m \le 50)\)次询问,每次给出一个\(k(k \le 10^9)\ ...

  3. BZOJ4154: [Ipsc2015]Generating Synergy

    Description 给定一棵以1为根的有根树,初始所有节点颜色为1,每次将距离节点a不超过l的a的子节点染成c,或询问点a的颜色   Input 第一行一个数T,表示数据组数 接下来每组数据的第一 ...

  4. C语言（2）

    C语言(2)---变量 基本格式: 变量类型  变量名1[,变量名2,变量名3,...变量名n]: 注意: 1.在C语言中如果申请一个变量,里面存放小数,则用float表示,且在输出时需要注意prin ...

  5. 20145330Java程序设计第三次实验

    20145330<Java程序设计>第三次实验报告 实验三 敏捷开发与XP实践 实验内容 1.使用git上传代码 2.使用git实现代码开发实践 3.实现代码的重载 实验步骤 使用git上 ...

  6. 转MongoDB 使用Skip和limit分页

    关于MongoDB 数据分页和排序 limit,skip用户的一些基础语句,介绍MongoDB 数据分页和排序实例方法. 使用Skip和limit可以如下做数据分页: Code: page1 = db ...

  7. 地理数据库的类型geodatabase类型

    地理数据库的类型geodatabase类型 地理数据库是用于保存数据集集合的“容器”.有以下三种类型: 文件地理数据库 - 在文件系统中以文件夹形式存储.每个数据集都以文件形式保存,该文件大小最多可扩 ...

  8. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

  9. [LintCode] Pow(x, n) 求x的n次方

    Implement pow(x, n). Notice You don't need to care about the precision of your answer, it's acceptab ...

  10. 关于ASP.NET Web API 客户端的请求报文中添加 Authorization

    当你使用客户端发送请求 Web API 的时候,因为API 有验证,所以你的请求报文中必须有”Authorization“,那么就需要手动添加了! HttpClient client = new Ht ...