Duilib教程-自动布局1

我们要实现一个带标题栏和状态栏的程序,同时要支持拉伸,即包括最小化、最大化,图如下:

XML:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>

<Window size="695,542">

    <VerticalLayout width="657" height="517" bkcolor="#FFA0A0A4">

        <HorizontalLayout name="title" height="32" bkcolor="#FF63A6F1">

            <Button text="X" bordersize="1" float="true" pos="608,0,0,0" width="60" height="30" bkcolor="#FF008067" bkcolor2="#0000C020" bordercolor="#00FFFF00" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" />

        </HorizontalLayout>

        <HorizontalLayout name="mid" bkcolor="#FFBABABA" />

        <HorizontalLayout name="status" height="30" bkcolor="#FF808080" />

    </VerticalLayout>

</Window>

在DUIDesigner中,拖动窗口边框,即可看到效果,标题栏和状态栏的位置都不变,即随窗口大小而改变。

看属性,发现,status和title都有属性 height,而中间的,什么属性都没有。在窗口设置如下:

title:

mid:

可以知道,pos即可以设置float属性为false的拉伸操作,所以不只是LAYOUT可以随窗口(准确的说应该是拥有它的LAYOUT)自由拉伸,普通的控件也可以,只要float为false。

Float意思为浮动,当它为TRUE时,它就浮动在窗口上面,位置永远不会变(相对于拥有它的LAYOUT)。

当它为FALSE时,它浮不起来,停在水上,随波逐流,所以能够被流水(LAYOUT)改变它的大小。

注意,只有right和bottom才有效。如果不为0,那么它就是该高度,即不随父LAYOUT改变大小(位置不能更改)。为0就是跟父LAYOUT更改大小。

在上面这个示例中,关闭按钮并不随着窗口改变位置,因为我们看到了,它的float为TRUE。如果我们想要它永远停在最右边呢?

看下面的XML:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>

<Window size="695,542">

    <VerticalLayout width="657" height="517" bkcolor="#FFA0A0A4">

        <HorizontalLayout name="title" height="32" bkcolor="#FF63A6F1">

                            <Control />

            <Button text="X" bordersize="1" maxwidth="60" pos="608,0,0,0" width="60" height="30" bkcolor="#FF008067" bkcolor2="#0000C020" bordercolor="#00FFFF00" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" />

        </HorizontalLayout>

        <HorizontalLayout name="mid" bkcolor="#FFBABABA" />

        <HorizontalLayout name="status" height="30" bkcolor="#FF808080" />

    </VerticalLayout>

</Window>

我们加了一个 float 的 Control,以及将关闭按钮的 maxwidth设置为60,同时FLOAT设置为FALSE(float属性默认为false)。

这样设置的意思是:关闭按钮最大宽度为60,所以它不能被拉得更宽。

在它的左边有一个FLOAT,它可以被任意拉伸。所以当窗口被拉伸时,关闭按钮为60,左边的control就被拉伸到 窗口宽 - 60

如果最右边要加最大化、最小化按钮,实现原理也是一样的。当然,你可以在最右边加一个LAYOUT,在这个LAYOUT上加上最小化、最大化、关闭按钮,这样层次感更强,也更容易管理和修改。

时间: 2024-10-21 10:08:10

Duilib教程-自动布局1的相关文章

Duilib教程-自动布局2

在上一节中,我简单介绍了控件随父LAYOUT自由移动的设置.在这一节,我将介绍一种常见的情况:嵌入窗口. 在项目中,我们很少会100%的编写一个软件,特别是界面相关的,我们会使用以前已经编写好的窗口,或网上的开源模块.举一个简单的例子来说,如果你要编写一个视频播放器,关于视频的播放窗口,就用不着用DUI来实现,我们完全可以使用网上的开源库,嵌入一个播放的WND即可(当然有的库也支持回调的方式,用户可以在自己的窗口中将回调出来的图片进行自由绘制). 我们需要在窗口大小改变时,即时地改变播放窗口的大

Duilib教程-自动布局3-分隔条

先看一个常用的图,如下: 左边是导航栏,右边是信息区. 中间可以自由拉伸. XML如下: <?xml version="1.0" encoding="utf-8" standalone="yes" ?> <Window size="695,542"> <HorizontalLayout width="695" height="542" bkcolor=&qu

Duilib教程-控件练习

一.控件消息的响应. 在HelloDuilib例子中,程序不能退出,在这里,我将添加一个关闭按钮,当点击它时,调用PostQuitMessage进行退出. 首先在界面的右上角添加一个关闭按钮,并取名为“btnClose”. 然后在 CHelloDuilibWnd 中重载 WindowImplBase::Notify (); 代码如下: void CHelloDuilibWnd::Notify( TNotifyUI& msg ) { if (msg.sType == DUI_MSGTYPE_CLI

Duilib教程-HelloDuilib及DuiDesigner的简单使用

一.HelloDuilib 1. 首先理解DUILIB显示的一个基本流程,如下图: 在Duilib中,WindowImplBase 这个类代表了图中 “CWndClass”. 所以我们需要做的是: 1)生成一个XML. 2)生成一个WindowImplBase对象. 3)加载XML. 4)显示窗口. 但是编写的时候,WindowImplBase已经帮我们做了许多工作,我们只需要指定XML路径,它就能够帮助我们自动加载,非常方便. 但是一般我不喜欢先编写XML,我喜欢先写MAIN函数,再编写占位函

Duilib教程-非DUI控件

DUILIB并不是真正的DUI,至少有部分控件不是完全DUI的.其实包括: 1.EDIT. 它的实现原理是,CEditUI包含一个窗口CEditWnd,流程如下: 1)鼠标单击,创建窗口见 EditUI.cpp第217行,在第223行有创建的代码: m_pWindow = new CEditWnd(); ASSERT(m_pWindow); m_pWindow->Init(this); 2)失去焦点时,删除自己,见EditUI.cpp第103行和第131行, LRESULT CEditWnd::

2013 duilib入门简明教程 -- 结合win32和MFC (16)

http://www.cnblogs.com/Alberl/p/3352696.html 虽然duilib自带在MFC中使用duilib的Demo,但只是MFC窗口和duilib窗口不重叠的情况.如果要在MFC窗口中嵌入duilib控件,或者在duilib控件中嵌入MFC的控件的话,就没有Demo可以看了,其实Alberl开始也不知道怎么办,看了下ActiveXUI控件,这个就是结合HWND的,但是由于接触duilib不久,所以一时无法看懂ActiveXUI到底是怎么将win32的HWND画上去

(翻译)开始iOS 7中自动布局教程(二)

这篇教程的前半部分被翻译出来很久了,我也是通过这个教程学会的IOS自动布局.但是后半部分(即本篇)一直未有翻译,正好最近跳坑翻译,就寻来这篇教程,进行翻译.前半部分已经转载至本博客,后半部分即本篇.学习IOS自动布局的朋友可以看看.自动布局很强大. 这篇教程绝对的最好的学习IOS自动布局的文章,没有之一 原文地址:Beginning Auto Layout Tutorial in iOS 7: Part 2 正文如下: 请注意: 团队成员Matthijs Hollemans (IOS学徒系列的作

【转】开始iOS 7中自动布局教程(一)

原文网址:http://www.cocoachina.com/industry/20131203/7462.html 原文:Beginning Auto Layout Tutorial in iOS 7: Part 1 感谢翻译小组成员@answer-huang(博客)热心翻译.如果您有不错的原创或译文,欢迎提交给我们,更欢迎其他朋友加入我们的翻译小组(联系qq:2408167315). ======================================================

duilib进阶教程 -- 响应windows原生消息和自定义消息(13)

duilib进阶教程 -- 响应windows原生消息和自定义消息(13) 一.windows原生消息 同样,入门教程只是给出了响应windows原生消息的方法,并没给出例子,这里以自适应屏幕分辨率为例.迅雷播放器虽然可以在启动的时候自动调整窗口大小,但是当屏幕分辨率实时改变时并没有调整窗口,所以我们给播放器加上实时调整大小的功能,很明显,应该响应WM_DISPLAYCHANGE消息,而duilib自己处理windows消息的函数是在HandleMessage里,因此我们重载HandleMess