Duilib文档

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

UPDATE 2012.07.27 BY 土豆烧牛肉<bigxxs@gmail.com>

---

简介

...

---

一、入门

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