duilib入门简明教程 -- 界面布局(9) (转)
原文转自:http://www.cnblogs.com/Alberl/p/3343806.html
<HorizontalLayout>
<Button name="btnHello" text="Hello World"/>
</HorizontalLayout>
那么HorizontalLayout和VerticalLayout有什么区别呢? 其实这个Alberl也不怎么懂,Alberl都是直接试效果的,HorizontalLayout不行就换VerticalLayout ~O(∩_∩)O 这个还得请各位大神多多赐教,等写完这个入门教程后,Alberl会继续学习duilib,到时候再继续写教程。
<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
<VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
</VerticalLayout>
</Window>
效果如图:


<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
<VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
<!-- 标题栏区 -->
<HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">
</HorizontalLayout>
</VerticalLayout >
</Window>

效果如图:


<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
<VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
<HorizontalLayout /> <!-- 占空位,占据上面所有的空位--> <!-- 标题栏区 -->
<HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">
</HorizontalLayout>
</VerticalLayout >
</Window>

效果如图:


<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
<VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
<HorizontalLayout /> <!-- 占空位,占据上面所有的空位--> <!-- 标题栏区 -->
<HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">
</HorizontalLayout> <HorizontalLayout /> <!-- 占空位,占据下面所有的空位-->
</VerticalLayout >
</Window>

效果如图:



<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
<VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
<!-- 标题栏区 -->
<HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">
<Button name="minbtn" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/>
</HorizontalLayout>
</VerticalLayout >
</Window>

效果如图:


<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
<VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
<!-- 标题栏区 -->
<HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">
<Button name="minbtn" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/>
<Button name="maxbtn" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' "/>
<Button name="closebtn" normalimage=" file='SysBtn\closeNormal.bmp' " hotimage=" file='SysBtn\closeFocus.bmp' "/>
</HorizontalLayout>
</VerticalLayout >
</Window>

效果如图:


<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
<VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
<!-- 标题栏区 -->
<HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">
<HorizontalLayout />
<Button name="minbtn" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/>
<Button name="maxbtn" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' "/>
<Button name="closebtn" normalimage=" file='SysBtn\closeNormal.bmp' " hotimage=" file='SysBtn\closeFocus.bmp' "/>
</HorizontalLayout>
</VerticalLayout >
</Window>

效果如图:



<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
<VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
<!-- 标题栏区 -->
<HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">
<HorizontalLayout />
<HorizontalLayout width = "77">
<Button name="minbtn" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/>
<Button name="maxbtn" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' "/>
<Button name="closebtn" normalimage=" file='SysBtn\closeNormal.bmp' " hotimage=" file='SysBtn\closeFocus.bmp' "/>
</HorizontalLayout>
</HorizontalLayout>
</VerticalLayout >
</Window>

效果如图:


<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
<VerticalLayout >
<HorizontalLayout height="32" >
<HorizontalLayout />
<HorizontalLayout width = "77" />
</HorizontalLayout>
</VerticalLayout >
</Window>

很明显,最外层是整个窗口的布局<VerticalLayout>,之后又包含了一个 <HorizontalLayout height="32" >布局(即标题栏),





<HorizontalLayout width = "77">
<Button name="minbtn" height ="20" width="23" float="true" pos="0,5,22,24" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/>
<Button name="maxbtn" height ="20" width="23" float="true" pos="22,5,44,24" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' "/>
<Button name="closebtn" height ="20" width="23" float="true" pos="44,5,74,24" normalimage=" file='SysBtn\closeNormal.bmp' " hotimage=" file='SysBtn\closeFocus.bmp' "/>
</HorizontalLayout>

效果如图:




<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
<VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
<!-- 标题栏区 -->
<HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">
<HorizontalLayout />
<HorizontalLayout width = "77">
<Button name="minbtn" float="true" pos="0,5,0,0" height="19" width="23" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' "/>
<Button name="maxbtn" float="true" pos="22,5,0,0" height="19" width="23" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' "/>
<Button name="closebtn" float="true" pos="44,5,0,0" height="19" width="28" normalimage=" file='SysBtn\closeNormal.bmp' " hotimage=" file='SysBtn\closeFocus.bmp' "/>
</HorizontalLayout>
</HorizontalLayout>
</VerticalLayout >
</Window>

效果如图:

duilib入门简明教程 -- 界面布局(9) (转)的更多相关文章
- 2013 duilib入门简明教程 -- 界面布局(9)
上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayou ...
- duilib入门简明教程 -- 界面布局(9)
上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayou ...
- 2013 duilib入门简明教程 -- 界面设计器 DuiDesigner (10)
上一个教程讲解了怎么布局最大化.最小化.关闭按钮,但是如果手动去计算这三个按钮的位置和大小的话,非常的不直观,也很不方便. 所以这一章准备介绍duilib的UI设计器,由于这个设计器很 ...
- duilib入门简明教程 -- 界面设计器 DuiDesigner (10)
上一个教程讲解了怎么布局最大化.最小化.关闭按钮,但是如果手动去计算这三个按钮的位置和大小的话,非常的不直观,也很不方便. 所以这一章准备介绍duilib的UI设计器,由于这个设计器很不 ...
- duilib入门简明教程 -- 界面设计器 DuiDesigner (10) (转)
原文转自:http://www.cnblogs.com/Alberl/p/3343838.html 上一个教程讲解了怎么布局最大化.最小化.关闭按钮,但是如果手动去计算这三个按钮的位置和大小的 ...
- 2013 duilib入门简明教程 -- 总结 (20)
duilib的入门系列就到尾声了,再次提醒下,Alberl用的duilib版本是SVN上第个版本,时间是2013.08.15~ 这里给出Alberl最后汇总的一个工程,戳我下载,效 ...
- DUILIB入门简明教程
电子书下载: DUILIB入门简明教程.chm 文章作者: Alberl 电子书制作: 邓学彬 目录: 2013 duilib入门简明教程 -- 前言(1) 2013 duilib入门简明教程 ...
- duilib教程之duilib入门简明教程13.复杂控件介绍
首先将本节要介绍的控件全部拖到界面上,并调整好位置,如图: 然后将Name属性改成其他名字, 不能是[控件名+UI+数字]这种,因为这是DuiDesigner默认的名字,它不会实际写 ...
- 2013 duilib入门简明教程 -- 自绘控件 (15)
在[2013 duilib入门简明教程 -- 复杂控件介绍 (13)]中虽然介绍了界面设计器上的所有控件,但是还有一些控件并没有被放到界面设计器上,还有一些常用控件duilib并没有提供(比如 ...
随机推荐
- swpan&expect交互脚本
#!/usr/bin/expectset timeout 30set user USERNAMEset pass PASSWORDspawn sudo pg_dump npi -U admin -p ...
- hive数据的导入导出方式
导入方式 1.load方式 load data local inpath 'local_path' into table tb_name; 从本地复制了文件到表的路径下 应用场景:大部分的使用,文件几 ...
- Python知识点进阶——迭代器
可迭代对象 可迭代对象可以简单的理解为用for循环遍历的,如list.tuple.dict.set.str 判断一个对象是否是迭代器: 可以将数据类型 和 是否为可迭代对象 比较来判断是否是可以迭代 ...
- A1031 Hello World for U (20)(20 分)
A1031 Hello World for U (20)(20 分) Given any string of N (>=5) characters, you are asked to form ...
- 重写BaseAdapter实现ListView
public class BaseAdapterActivity extends BaseActivity { private ListView base_adapter_listView; priv ...
- Nhibernate官方体系结构图部分中文翻译
原文链接 :http://nhibernate.info/doc/nh/en/index.html#architecture 体系结构图 高度抽象NHibernate体系架构图 这幅图展示了NHibe ...
- 【Surrounded Regions】cpp
题目: Given a 2D board containing 'X' and 'O', capture all regions surrounded by 'X'. A region is capt ...
- BMP图片的加载方式:资源 VS 文件
在程序中加载位图有很多方法,各有各的好处.这里简单说一下在资源里和文件里加载的区别. 第一.在资源里加载位图 这种方法就是在工程里的“资源视图”-->“添加资源”-->"Bitm ...
- Spring boot 上传文件大小限制
1.spring boot 1.x 版本 application.properties 文件中 位置在(resources下) spring.http.multipart.maxFileSize = ...
- Python 拓展之详解深拷贝和浅拷贝
正式开始 首先我在这介绍两个新的小知识,要在下面用到.一个是函数 id() ,另一个是运算符 is.id() 函数就是返回对象的内存地址:is 是比较两个变量的对象引用是否指向同一个对象,在这里请不要 ...