Duilib文档

原文地址::http://www.xn--xkrx74l.com/?p=804

UPDATE 2012.07.27 BY 土豆烧牛肉<[e-mail]>

---

简介

...

---

一、入门

1. 下载、编译Duilib

2. Hello world!

3. 用xml布置界面

4. 换肤

5. 响应消息

6. 如何去掉窗体的标题栏和边框

7. 如何拖动无标题栏窗体

8. 允许改变窗体大小

9. 让窗体显示圆角

---

二、界面配置

配置文件结构

1

2

3

4

5

6

7

8

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

<Window> .................. 窗体，根元素

    <Font/> ............... 字体,0~N个 

    <Default/> ............ 全局设置，如滚动条 

    <[Container|...]> ..... 容器，可以是Container极其子类，如VerticalLayout、HorizontalLayout、TileLayout或TabLayout

        <[Control|...]/>... 控件，可以是Control极其子类，包括容器

    </Container> 

</Window>

固定布局

sadfasdfasdfasfd

• 窗体

  大小 通过size属性设置窗体大小，单位是像素。

  size = "width,height"

  标题栏 通过caption属性设置标题栏区域，该区域可以响应NCHITTEST消息，用来拖动窗体，其中left、top、right是边距，bottom是距离上边框的距离。

  caption="left,top,right,bottom"

  圆角 通过roundcorner属性设置窗体圆角半径。

  roundcorner="x,y"

  字体 预定义窗体内要使用的字体，控件通过font属性引用预定义的字体索引（从0开始）,只能有一个字体的defautl属性可以设为true。

  <Font name="字体名称" size="字体大小" default="是否默认" />

  全局设置

• 容器

  边框 通过bordercolor属性设置边框颜色（默认值为黑色#000000），颜色值为ARGB格式,头两个16进制字符表示透明度，后面6个字符表示RGB；通过bordersize属性设置边框线宽（默认值为0）；通过borderround设置边框圆角半径。

  bordercolor="ARGB" bordersize="线宽" borderround="x,y"

  背景色

  背景图片

• 控件

  位置

  大小

  边框

  背景色

  图片

  文字

  Example:

  <Windows>      ...  </Windows>

自适应布局

• 窗体
  允许修改大小
  对Resize进行限制

• 容器
  外边距
  内边距
  滚动栏

• 控件
  相对定位
  大小

• 布局案例

  自动拉伸 只要float属性为false（默认值为false，非绝对定位，不设置也可以），pos、width、height属性均为0（默认值就是0，不设置也可以），则容器会随着窗体自动改变大小，而控件会随着容器自动改变大小。（测试以下布局文件并拖动改变窗体大小查看效果）

1

2

3

4

5

<Window size="300,300" sizebox="5,5,5,5"> 

    <Container bordersize="1" inset="1,1,1,1"> 

        <Control bkcolor="#FFFFFF00" /> 

    </Container> 

</Window>

• 水平布局 用HorizontalLayout容器，子控件设定好width，则子控件会按照从左到右的顺序排列。

  1

  2

  3

  4

  5

  6

  7

  <Window size="300,300" sizebox="5,5,5,5"> 

      <HorizontalLayout  bkcolor="#FFFFFFFF"bordersize="1" inset="1,1,1,1"> 

          <Control width="50" bkcolor="#FFFFFF00" /> 

          <Control width="50" bkcolor="#FFFF00FF" /> 

          <Control width="50" bkcolor="#FF00FFFF" /> 

      </HorizontalLayout> 

  </Window>

  垂直布局 用VerticalLayout容器，子控件设定好height，则子控件会按照从上到下的顺序排列。

  1

  2

  3

  4

  5

  6

  7

  <Window size="300,300" sizebox="5,5,5,5"> 

      <VerticalLayout  bkcolor="#FFFFFFFF" bordersize="1"inset="1,1,1,1"> 

          <Control height="50" bkcolor="#FFFFFF00" /> 

          <Control height="50" bkcolor="#FFFF00FF" /> 

          <Control height="50" bkcolor="#FF00FFFF" /> 

      </VerticalLayout> 

  </Window>

  间隔 在两个控件之间放置一个Control元素，要保持水平间隔就设置width，要保持垂直间距就设置height。

  1

  2

  3

  4

  5

  6

  7

  8

  9

  <Window size="300,300" sizebox="5,5,5,5"> 

      <HorizontalLayout  bkcolor="#FFFFFFFF"bordersize="1" inset="1,1,1,1"> 

          <Button width="50" bkcolor="#FFFFFF00" /> 

          <Control width="10"/> 

          <Button width="50" bkcolor="#FFFF00FF" /> 

          <Control width="10"/> 

          <Button width="50" bkcolor="#FF00FFFF" /> 

      </HorizontalLayout> 

  </Window>

  左右等分 在HorizontalLayout容器中放置多个控件，不设置width，则它们会自动平分宽度。

  1

  2

  3

  4

  5

  6

  7

  <Window size="300,300" sizebox="5,5,5,5"> 

      <HorizontalLayout  bkcolor="#FFFFFFFF"bordersize="1" inset="1,1,1,1"> 

          <Button bkcolor="#FFFFFF00" /> 

          <Button bkcolor="#FFFF00FF" /> 

          <Button bkcolor="#FF00FFFF" /> 

      </HorizontalLayout> 

  </Window>

  上下等分 在VerticalLayout容器中放置多个控件，不设置width，则它们会自动平分高度。!!注意!!，从Label继承的控件会根据字体自动计算height，所以这种布局对其无效。

  1

  2

  3

  4

  5

  6

  7

  <Window size="300,300" sizebox="5,5,5,5">

      <VerticalLayout  bkcolor="#FFFFFFFF" bordersize="1"inset="1,1,1,1">

          <Control bkcolor="#FFFFFF00" />

          <Control bkcolor="#FFFF00FF" />

          <Control bkcolor="#FF00FFFF" />

      </VerticalLayout>

  </Window>

  锚定在右边 在HorizontalLayout容器中先放置一个Control但不设置width，再放置要锚定的控件，设定好width。

  1

  2

  3

  4

  5

  6

  <Window size="300,300" sizebox="5,5,5,5"> 

      <HorizontalLayout  bkcolor="#FFFFFFFF"bordersize="1" inset="1,1,1,1"> 

          <Control /> 

          <Control width="50" bkcolor="#FFFF00FF" /> 

      </HorizontalLayout> 

  </Window>

  锚定在下方 在VerticalLayout容器中先放置一个Control但不设置height，再放置要锚定的控件，设定好height。

  1

  2

  3

  4

  5

  6

  <Window size="300,300" sizebox="5,5,5,5">

      <VerticalLayout  bkcolor="#FFFFFFFF" bordersize="1"inset="1,1,1,1">

          <Control />

          <Control height="50" bkcolor="#FFFF00FF" />

      </VerticalLayout>

  </Window>

  左右不动，中间拉伸 在HorizontalLayout容器中放置3个控件，左右控件固定width，中间的控件不设置width。

  1

  2

  3

  4

  5

  6

  7

  <Window size="300,300" sizebox="5,5,5,5">

      <HorizontalLayout  bkcolor="#FFFFFFFF"bordersize="1" inset="1,1,1,1">

          <Control width="50" bkcolor="#FFFFFF00" />

          <Control />

          <Control width="50" bkcolor="#FFFF00FF" />

      </HorizontalLayout>

  </Window>

  上下不动，中间拉伸 在VerticalLayout容器中放置3个控件，上下控件固定height，中间的控件不设置height。

  1

  2

  3

  4

  5

  6

  7

  <Window size="300,300" sizebox="5,5,5,5">

      <VerticalLayout  bkcolor="#FFFFFFFF" bordersize="1"inset="1,1,1,1">

          <Control height="50" bkcolor="#FFFFFF00" />

          <Control />

          <Control height="50" bkcolor="#FFFF00FF" />

      </VerticalLayout>

  </Window>

  九宫格布局 在VerticalLayout容器中放置三个VerticalLayout容器，上下固定height；然后在每个VerticalLayout容器里再防止三个VerticalLayout容器，左右固定width即可。当然也可以先水平布局再垂直布局。

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

  16

  17

  18

  19

  20

  21

  22

  23

  24

  25

  26

  27

  28

  <Window size="300,300" sizebox="5,5,5,5">

      <VerticalLayout name="九宫格" bkcolor="#FFFFFFFF">

          <HorizontalLayout name="上" height="50">

              <VerticalLayout name="左上"bkcolor="#FFFF0000" width="50">

              </VerticalLayout>

              <VerticalLayout name="中上"bkcolor="#FF00FF00">

              </VerticalLayout>

              <VerticalLayout name="右上"bkcolor="#FFFF0000" width="50">

              </VerticalLayout>

          </HorizontalLayout>

          <HorizontalLayout name="中">

              <VerticalLayout name="左中"bkcolor="#FF00FF00" width="50">

              </VerticalLayout>

              <VerticalLayout name="中中">

              </VerticalLayout>

              <VerticalLayout name="右中"bkcolor="#FF00FF00" width="50">

              </VerticalLayout>

          </HorizontalLayout>

          <HorizontalLayout name="下" height="50">

              <VerticalLayout name="左下"bkcolor="#FFFF0000" width="50">

              </VerticalLayout>

              <VerticalLayout name="中下"bkcolor="#FF00FF00">

              </VerticalLayout>

              <VerticalLayout name="右下"bkcolor="#FFFF0000" width="50">

              </VerticalLayout>

          </HorizontalLayout>

      </VerticalLayout>

  </Window>

  Split

  Tab布局

---

API

窗体

控件

消息处理

绘图引擎

---

参考

Duilib官网 http://duilib.com

项目主页 http://code.google.com/p/duilib/

---

资源

Duilib官方交流群3：1507570