原文地址::http://www.xn--xkrx74l.com/?p=804
UPDATE 2012.07.27 BY 土豆烧牛肉<bigxxs@gmail.com>
简介
...
一、入门
-
下载、编译Duilib
-
Hello world!
-
用xml布置界面
-
换肤
-
响应消息
-
如何去掉窗体的标题栏和边框
-
如何拖动无标题栏窗体
-
允许改变窗体大小
-
让窗体显示圆角
二、界面配置
配置文件结构
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,则子控件会按照从左到右的顺序排列。
1234567<
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,则子控件会按照从上到下的顺序排列。
1234567<
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。
123456789<
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,则它们会自动平分宽度。
1234567<
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,所以这种布局对其无效。
1234567<
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。
123456<
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。
123456<
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。
1234567<
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。
1234567<
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即可。当然也可以先水平布局再垂直布局。
12345678910111213141516171819202122232425262728<
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