duilib入门简明教程 -- 界面布局(9)

    上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout、VerticalLayout,这样duilib就会帮我们自动布局按钮的位置和大小,顾名思义,HorizontalLayout就是水平布局,VerticalLayout就是垂直布局。
    最开始的教程里面,窗口大小变化时,Hello World按钮会沾满整个窗口,并且文字始终居中,这就是HorizontalLayout的效果:
     <HorizontalLayout>
            <Button name="btnHello" text="Hello World"/>
        </HorizontalLayout>

   那么HorizontalLayout和VerticalLayout有什么区别呢? 其实这个Alberl也不怎么懂,Alberl都是直接试效果的,HorizontalLayout不行就换VerticalLayout ~O(∩_∩)O  这个还得请各位大神多多赐教,等写完这个入门教程后,Alberl会继续学习duilib,到时候再继续写教程。

    由于官方木有文档,所有的东西都靠自己去看,去Demo里调试,所以这个布局的准确文字定义我也不好说,就直接用实验的方式跟大家讲解啦~
 
    现在开始讲解上一个教程中的界面布局:
    1、首先得到一个渐变的背景窗口,将XML的内容改成下面这样
<?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>

效果如图:

    从duilib的源码里可以看到:
    (1)XML的 <VerticalLayout> 节点对应于duilib里的CVerticalLayoutUI控件
    (2)CVerticalLayoutUI控件继承于CContainerUI,而CContainerUI继承于CControlUI。
    所以其实CVerticalLayoutUI 也是一个控件啦,把它和CButtonUI同等对待,就比较好理解了。
为了进一步表现他们的类似,可以将XML里面的VerticalLayout 换成 Button、Control、Container 试试,你会发现效果是一样的哦~
 
    再次强调下win32/MFC的界面 和duilib 界面的区别:
    (1)MFC中将按钮、菜单、标题栏等等都当作不同的东西(例如标题栏只能放在最上面,按钮不能直接拖到标题栏等等);
     duilib中将所有的东西都同等对待,所以处理起来非常方便(别说把按钮放到标题栏上,就算把标题栏放在按钮上都没问题)。
    (2)MFC中所有的窗口和控件都是继承于CWnd(win32继承于HWND)。
     duilib中所有的控件都继承于CControlUI,所有的窗口都继承于CWindowWnd(内部包装了HWND)。
     所以如果用MFC做一个界面,那么上面就是很多个CWnd,用Spy++可以看到不同的窗口句柄。
     如果用duilib做一个界面,那么上面就是很多个CControlUI,但是用Spy++只能看到一个窗口句柄。
     这是因为duilib整个窗口只有一个HWND,其他的CControlUI虽然是控件,但是其实都是自己绘制出来的,并不是真正的HWND,所以你可以把这些控件理解为自绘,整个duilib的界面绘制,就是在自绘一个HWND。
 
    2、加上标题栏,将XML的内容改成下面这样:
<?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>

效果如图:

其中height="32" 是指这个HorizontalLayout 只占用32个像素高度。
 
    3、将标题栏移到下面,将XML的内容改成下面这样:
 
<?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>

效果如图:

这里只加了一行代码<HorizontalLayout />,就让标题栏移到了下面,这行代码的意思是:占据空白的部分。
由于这行代码放在标题栏HorizontalLayout 的上面,所以标题栏被挤了下去,如果放到下面,是没有效果的。
 
4、将标题栏移到中间,将XML的内容改成下面这样:
 
<?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>

效果如图:

    为什么标题栏就跑到中间了呢? 
    在标题栏的上面和下面都有一个占空位的<HorizontalLayout />,如果没有指定高度,那么他们会默认各占一半高度,相当于有一个默认的属性 height="***"
 
    
  那么我们给它指定一个高度试试,比如把上面那个<HorizontalLayout /> 改为<HorizontalLayout height="32" />,效果如图:
 
    现在应该明白<HorizontalLayout />占位的作用了吧~(^o^)/~
    这里有一点要注意的就是:
占位的时候,
<HorizontalLayout /> 一般是指定height属性,也就是说占的位置是从上往下算的。因为水平方向的位置都会占据。
<VerticalLayout/>       一般是指定width属性,也就是说占的位置是从左往右算的。因为垂直方向的位置都会占据。
并且HorizontalLayout 和VerticalLayout一般都是交叉包含,而不是重复包含(比如<HorizontalLayout> 子节点里再包含一个<HorizontalLayout> 节点)。
    当然,上面指的是一般情况,如果对布局很熟悉了,就可以随意包含了。
    这里讲的都是把标题栏水平放置,把标题栏垂直放置相信也难不倒大家了,就请自行试验,以便熟悉这些布局。
 
    5、回到前面第2个步骤,我们来添加客户区布局。
    因为背景色已经是渐变的了,所以就不给客户区加背景了,那么客户区暂且不管。
 
    6、添加最大化、最小化、关闭按钮:
    上一个教程的最后部分已经解释了按钮的外观等属性,这里为了简明,就不加那么多属性了,先加上一个最小化按钮试试效果:
<?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='SysBtnMinNormal.bmp' " hotimage=" file='SysBtnMinFocus.bmp' "/>
        </HorizontalLayout>
    </VerticalLayout >
</Window>

效果如图:

可以看到整个最小化按钮都被拉伸了,其中两边的矩形色块是因为图片的边框也被拉伸了。
 
我们再加上最大化按钮和关闭按钮,XML如下:
<?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='SysBtnMinNormal.bmp' " hotimage=" file='SysBtnMinFocus.bmp' "/>
            <Button name="maxbtn" normalimage=" file='SysBtnMaxNormal.bmp' " hotimage=" file='SysBtnMaxFocus.bmp' "/>
            <Button name="closebtn" normalimage=" file='SysBtncloseNormal.bmp' " hotimage=" file='SysBtncloseFocus.bmp' "/>
        </HorizontalLayout>
    </VerticalLayout >
</Window>

效果如图:

    可以发现三个按钮被均匀拉伸了。
    但是我们显然不想让按钮被拉伸,怎么办呢?
    还记得前面说的占位布局吗?因为我们想让按钮显示到右边,所以我们要占住左边的部分。 那我们加一个占位试试。
不过,
    (1)亲们知道这个占位要加到哪一行么?
        当然是加到按钮的上面! 那我们加到按钮上面试试。
    (2)亲们知道这个占位布局用<HorizontalLayout/>还是<VerticalLayout/>么?
        其实我也不知道,那咱们就试试吧。
        先加个<HorizontalLayout/>玩玩,XML如下:
<?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='SysBtnMinNormal.bmp' " hotimage=" file='SysBtnMinFocus.bmp' "/>
            <Button name="maxbtn" normalimage=" file='SysBtnMaxNormal.bmp' " hotimage=" file='SysBtnMaxFocus.bmp' "/>
            <Button name="closebtn" normalimage=" file='SysBtncloseNormal.bmp' " hotimage=" file='SysBtncloseFocus.bmp' "/>
        </HorizontalLayout>
    </VerticalLayout >
</Window>

效果如图:

    (其实换成VerticalLayout等任何CControlUI,效果都是一样的)
    果然占到了左边的部分,但是为什么还是均分呢,怎么让它只占用左边的一大部分呢?
    这就是width的用处了, 我们给HorizontalLayout 加上一个属性 width = "600",可以看到如下效果:
    好家伙,果然有用!
    下一步我们再把width加大一点,应该就可以让按钮正常了吧?
    先别急着管大小,我们先拖动一下窗口大小,或者点击最大化按钮~
    是不是有新问题啦? 为什么按钮还是被放大了呢?
    因为我们给HorizontalLayout加上了width属性,那么在水平方向,它就失去自适应效果啦,因为宽度永远是前面指定的600.
    那怎么样才能让按钮不被放大呢?
    很显然,不应该给左边的占位布局HorizontalLayout 指定width属性,而应该给右边的按钮指定width属性。
    但是按钮有 width属性吗?
    按钮是有,但是我们应该添加一个占位布局 HorizontalLayout  来指定width属性。 XML如下:
<?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='SysBtnMinNormal.bmp' " hotimage=" file='SysBtnMinFocus.bmp' "/>
                <Button name="maxbtn" normalimage=" file='SysBtnMaxNormal.bmp' " hotimage=" file='SysBtnMaxFocus.bmp' "/>
                <Button name="closebtn" normalimage=" file='SysBtncloseNormal.bmp' " hotimage=" file='SysBtncloseFocus.bmp' "/>
            </HorizontalLayout>
        </HorizontalLayout>
    </VerticalLayout >
</Window>

效果如图:

    现在窗口大小怎么变,按钮都不会被拉伸啦,恭喜小伙伴们~
    可以看到那3个Button节点都被放到了HorizontalLayout 节点下,下面是时候讲一下布局了:
    其实duilib整个界面都是由各种布局组成,我们把上面的XML简化一下,就是下面这样子:
 
<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布局,所以一切框架和位置都是由布局决定。
    这里先简要介绍一下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如下:
            <HorizontalLayout width = "77">
                <Button name="minbtn"   height ="20" width="23" float="true" pos="0,5,22,24"  normalimage=" file='SysBtnMinNormal.bmp' " hotimage=" file='SysBtnMinFocus.bmp' "/>
                <Button name="maxbtn"   height ="20" width="23" float="true" pos="22,5,44,24" normalimage=" file='SysBtnMaxNormal.bmp' " hotimage=" file='SysBtnMaxFocus.bmp' "/>
                <Button name="closebtn" height ="20" width="23" float="true" pos="44,5,74,24" normalimage=" file='SysBtncloseNormal.bmp' " hotimage=" file='SysBtncloseFocus.bmp' "/>
            </HorizontalLayout>

效果如图:

 
    对比一下上个教程完整的图片:
    发现我们这个这个图有点不对,三个按钮的中间的线有点粗~
    这是因为图片画的不对(这些图片是Alberl早几年画的,用于MFC,所以并没有考虑duilib),可以把最大化按钮两边的边框都去掉,这样就OK啦~
    不过呢,没必要那么做,我们恰好可以再学习一点新知识~
    我们可以看到,虽然给关闭按钮指定的宽度也是23,但是它却比其他按钮大。  这说明width属性已经失效了,这是因为我们在pos属性里面已经指定了位置大小,它会优先以pos属性为准,那么显然height属性也失效了。
    回到刚刚那个按钮图片的问题,由于每个按钮图片都画了边框,所以会有加在一起就有两个边框了,所以中间的线有点粗,那么我们现在可以将最大化、关闭按钮往左边移动一个像素。
效果如图:
    嘿嘿,好了吧~
    但是这个关闭按钮貌似有点宽~
    我们当然可以再次调整pos属性,但是这不科学~~
    还记得失效的那两个属性么?
    那是因为pos属性的后面两个值都填了非0值,所以导致那两个属性失效,下面我们把pos后面的两个值改为0试试。
可以发现那两个属性又生效啦~
    现在只要去掉width、height属性中的一个,按钮都会不见了,Alberl以为按钮的大小会调整成图片的大小呢~~~
看来只能指定宽度和高度了(为了方便后期的位置调整,建议pos属性后面两个值填0,使用width/height属性来指定按钮大小)
这几个图片的宽高分别是19 * 23、19*28,所以就手动指定了,XML如下:
 
<?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='SysBtnMinNormal.bmp' " hotimage=" file='SysBtnMinFocus.bmp' "/>
                <Button name="maxbtn"   float="true" pos="22,5,0,0" height="19" width="23" normalimage=" file='SysBtnMaxNormal.bmp' " hotimage=" file='SysBtnMaxFocus.bmp' "/>
                <Button name="closebtn" float="true" pos="44,5,0,0" height="19" width="28" normalimage=" file='SysBtncloseNormal.bmp' " hotimage=" file='SysBtncloseFocus.bmp' "/>
            </HorizontalLayout>
        </HorizontalLayout>
    </VerticalLayout >
</Window>

效果如图:

    (上面的XML里,Button的父节点HorizontalLayout 换成 VerticalLayout也是一样的效果,所以有时候他们是没有什么分别的,不过个人的理解应该是要交叉使用的)
    好啦,最关键的布局部分讲完啦,另外,在duilib的官方群里,有共享一个布局案例,Alberl已整理出来【duilib入门和xml培训 布局案例.rar】,那里有9个布局案例,相信看完本教程的讲解之后,再看看那9个XML布局,应该就很熟悉布局啦,如果还有不懂的话,请留言~
    注意:一切结果以实际运行效果为准,切勿完全相信本文的言论,因为Alberl搞不好手一抖打错个字母啥的,或者复制上来的代码有误,或者本来理解就有误,很可能会误导大家。如有错误的地方,多谢指正~(^o^)/~
原文地址:https://www.cnblogs.com/hpze2000/p/3372439.html