duilib 子窗口位置_duilib入门简明教程 -- 界面布局(9) (转)
效果如图:
可以看到整个最小化按钮都被拉伸了,其中两边的矩形色块是因为图片的边框也被拉伸了。
我们再加上最大化按钮和关闭按钮,XML如下:
效果如图:
可以发现三个按钮被均匀拉伸了。
但是我们显然不想让按钮被拉伸,怎么办呢?
还记得前面说的占位布局吗?因为我们想让按钮显示到右边,所以我们要占住左边的部分。 那我们加一个占位试试。
不过,
(1)亲们知道这个占位要加到哪一行么?
当然是加到按钮的上面! 那我们加到按钮上面试试。
(2)亲们知道这个占位布局用还是么?
其实我也不知道,那咱们就试试吧。
先加个玩玩,XML如下:
效果如图:
(其实换成VerticalLayout等任何CControlUI,效果都是一样的)
果然占到了左边的部分,但是为什么还是均分呢,怎么让它只占用左边的一大部分呢?
这就是width的用处了, 我们给HorizontalLayout 加上一个属性 width = "600",可以看到如下效果:
好家伙,果然有用!
下一步我们再把width加大一点,应该就可以让按钮正常了吧?
先别急着管大小,我们先拖动一下窗口大小,或者点击最大化按钮~
是不是有新问题啦? 为什么按钮还是被放大了呢?
因为我们给HorizontalLayout加上了width属性,那么在水平方向,它就失去自适应效果啦,因为宽度永远是前面指定的600.
那怎么样才能让按钮不被放大呢?
很显然,不应该给左边的占位布局HorizontalLayout 指定width属性,而应该给右边的按钮指定width属性。
但是按钮有 width属性吗?
按钮是有,但是我们应该添加一个占位布局 HorizontalLayout 来指定width属性。 XML如下:
效果如图:
现在窗口大小怎么变,按钮都不会被拉伸啦,恭喜小伙伴们~
可以看到那3个Button节点都被放到了HorizontalLayout 节点下,下面是时候讲一下布局了:
其实duilib整个界面都是由各种布局组成,我们把上面的XML简化一下,就是下面这样子:
很明显,最外层是整个窗口的布局,之后又包含了一个 布局(即标题栏),
再里面又包含了两个HorizontalLayout布局,所以一切框架和位置都是由布局决定。
这里先简要介绍一下duilib的UI设计器:
1、在duilib源码的bin目录下,【DuiDesigner.exe】就是UI设计器啦。
2、把XML拖拽上去即可直接看到界面效果,
我们把前面那个完整的XML拖进去,即可看到如下效果:
红色边框围起来的就是一个个HorizontalLayout 等布局啦~
7、调整按钮的位置和大小。
虽然已经将按钮显示到最后边,但是按钮沾满了右边部分,我们现在把他们的高度调小一点:
给Button节点都加上属性 height ="20",效果如图:
嗯,效果看起来还行。
再加上width="23"属性,效果如图:
那怎么样让按钮不挨着顶部呢?
前面介绍过float属性,是用于绝对定位,由于现在按钮的位置都是由布局自动调整的,所以没办法调节位置,如果不想让布局自动调整位置,就要加上float="true",这样就可以自己指定位置啦。我们给最小化按钮加上 float="true" pos="0,5,22,24" 试试,效果如图:
额,最小化按钮哪里去了~~~
虽然最小化按钮使用了绝对定位,但是其他两个按钮还是自动布局,所以需要给他们也加上,XML如下:
效果如图:
对比一下上个教程完整的图片:
发现我们这个这个图有点不对,三个按钮的中间的线有点粗~
这是因为图片画的不对(这些图片是Alberl早几年画的,用于MFC,所以并没有考虑duilib),可以把最大化按钮两边的边框都去掉,这样就OK啦~
不过呢,没必要那么做,我们恰好可以再学习一点新知识~
我们可以看到,虽然给关闭按钮指定的宽度也是23,但是它却比其他按钮大。 这说明width属性已经失效了,这是因为我们在pos属性里面已经指定了位置大小,它会优先以pos属性为准,那么显然height属性也失效了。(感谢网友【糖加三勺】的提醒,Alberl的这个说法有误,重新试了一下,如果pos属性放在后面,就会以pos为准,height属性放在后面就会以height为准,并不是属性失效。)
回到刚刚那个按钮图片的问题,由于每个按钮图片都画了边框,所以会有加在一起就有两个边框了,所以中间的线有点粗,那么我们现在可以将最大化、关闭按钮往左边移动一个像素。
效果如图:
嘿嘿,好了吧~
但是这个关闭按钮貌似有点宽~
我们当然可以再次调整pos属性,但是这不科学~~
还记得失效的那两个属性么?
那是因为pos属性的后面两个值都填了非0值,所以导致那两个属性失效,下面我们把pos后面的两个值改为0试试。
可以发现那两个属性又生效啦~(感谢网友【糖加三勺】的提醒,Alberl的这个说法有误,重新试了一下,如果pos属性放在后面,就会以pos为准,height属性放在后面就会以height为准,并不是属性失效。)
现在只要去掉width、height属性中的一个,按钮都会不见了,Alberl以为按钮的大小会调整成图片的大小呢~~~
看来只能指定宽度和高度了(为了方便后期的位置调整,建议pos属性后面两个值填0,使用width/height属性来指定按钮大小)
这几个图片的宽高分别是19 * 23、19*28,所以就手动指定了,XML如下:
效果如图:
(上面的XML里,Button的父节点HorizontalLayout 换成 VerticalLayout也是一样的效果,所以有时候他们是没有什么分别的,不过个人的理解应该是要交叉使用的)
好啦,最关键的布局部分讲完啦,另外,在duilib的官方群里,有共享一个布局案例,Alberl已整理出来【duilib入门和xml培训 布局案例.rar】,那里有9个布局案例,相信看完本教程的讲解之后,再看看那9个XML布局,应该就很熟悉布局啦,如果还有不懂的话,请留言~
duilib 子窗口位置_duilib入门简明教程 -- 界面布局(9) (转)相关推荐
- duilib 子窗口位置_duilib入门简明教程 -- 界面布局(9)
上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayout,这样 ...
- duilib 子窗口位置_duilib各种布局的作用,相对布局与绝对布局的的意义与使用方法...
转载请说明原出处,谢谢~~ 我使用duilib快3个月了.总体感觉duilib的使用还是较为简单的,仅仅是刚入门时可能有些摸不清头脑.今天写一篇关于duilib的入门日志,大致说一下duilib中的各 ...
- duilib 子窗口位置_duilib绝对定位与相对定位
前言 duilib中窗口,布局,控件等在屏幕上的显示位置都是按照配置好的xml文件规则显示的,每个显示元素的位置大小也需要显式指定,才能呈现出更好看的界面效果,显示元素的位置有两种配置规则,即绝对位置 ...
- duilib 子窗口位置_Duilib学习笔记《02》— 界面布局
2. 简单空白窗体界面 此处以创建一个简单的空白的灰色背景窗体为例.对应的XML布局文件对应的也就很简单.如下: 1<?xml version="1.0" encoding= ...
- duilib教程之duilib入门简明教程 -- 界面布局(9)
上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayout,这样 ...
- 2013 duilib入门简明教程 -- 界面布局(9)
上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayout,这样 ...
- DuiLib入门简明教程
Duilib 是一款强大的界面开发工具,可以将用户界面和处理逻辑彻底分离,极大地提高用户界面的开发效率. 国内首个开源 的directui 界面库,开放,共享,惠众,共赢,遵循bsd协议 ...
- 2013 duilib入门简明教程 -- 总结 (20)
原文地址为: 2013 duilib入门简明教程 -- 总结 (20) duilib的入门系列就到尾声了,再次提醒下,Alberl用的duilib版本是SVN上第 387个版本,时间是2013.08. ...
- duilib入门简明教程 -- 部分bug (11) (转)
原文转自:http://www.cnblogs.com/Alberl/p/3344886.html 一.WindowImplBase的bug 在第8个教程[2013 duilib入门简明教程 -- 完 ...
最新文章
- js之浅拷贝和深拷贝
- 【Android】Java回调原理并结合Android源码进行理解
- C利用time函数实现简单的定时器
- 一个简单的验证码识别教程
- WiFi 热点共享设置
- spring MVC中页面添加锚点
- 中国招商银行设计严重缺陷
- hadoop的同类技术_Hadoop和Spark的区别是什么?现在都流行用哪种技术?
- 文件比较命令:comm
- intellij idea 无法识别新装字体的问题的两种解决办法
- 黑产的类型与武器库概览
- Ubuntu16.04 ext4格式硬盘挂载普通用户权限控制
- angularJs过滤器(货币转换,大小写,字数限制,日期)
- 当你在追梦的路上抱怨生活太累快要放弃的时候,不妨看看我的这篇文章
- oracle 格式化命令,format 命令的输入规则 - Oracle Solaris 管理:设备和文件系统
- RAM的 Parity 与 ECC
- 远程桌面连接笔记本,wifi自动断开导致远程断开解决方法
- Python按特定字符分列
- liunx检测上下行带宽及丢包率
- 上传大文件超时upstream timed out ,nginx配置修改
热门文章
- HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)
- RocketMQ集群部署记录
- Saying Good-bye to Cambridge Again --- by Xu Zhimo 再别康桥 徐志摩
- 软件自动化测试的特点和流程
- word旋转画布的vba源码
- Pandas从小白到大师学习指南
- Linux安装Mysql8(小白必看)
- 东北林大计算机论文,东北林业大学毕业设计(论文)工作规范
- 最近做了个论坛,专门给棋牌爱好者免费下载研究用,带工具教程
- jmeter参数化实现