duilib进阶教程 -- Container控件 (3)

  前面两个教程的目的是教大家与MFC结合,那么从这篇起,将不再使用MFC,而使用纯win32项目,本文的所有知识已经在《duilib入门教程》里面讲过了,因此基础知识不再赘述。

  代码下载:http://download.csdn.net/detail/qq316293804/6433161

  效果如下(可拖拽边缘调节窗口大小,图片会自动居中)

  此例子唯一需要说明的就是XML,代码如下:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="800,520" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="600,400">
    <VerticalLayout bkcolor="#FF070700">
        <HorizontalLayout height="40" />
        <HorizontalLayout>
            <VerticalLayout />
            <VerticalLayout width="336" bkimage="skin\bk_logo_light.png">
                <HorizontalLayout />
                <HorizontalLayout height="164" bkimage="skin\bk_logo_image.png">
                    <HorizontalLayout>
                        <VerticalLayout />
                        <VerticalLayout width="168">
                            <VerticalLayout height="40" />
                            <VerticalLayout height="20" bkimage="skin\bk_logo_text.png" />
                            <VerticalLayout />
                        </VerticalLayout>
                        <VerticalLayout />
                    </HorizontalLayout>
                </HorizontalLayout>
                <HorizontalLayout />
            </VerticalLayout>
            <VerticalLayout />
        </HorizontalLayout>
        <HorizontalLayout height="50" />
    </VerticalLayout>
</Window>

  可以看到到处都是HorizontalLayout 、VerticalLayout,然后几个bkimage也很乱,这里有几个原因:

  1、由于迅雷的中间那一块是由三个图片组成,所以布局很麻烦,其实用一张图片的话,就简洁很多了,这里估计是为了重用图片。

  

 

  2、方式不太对。

  如果中间只有一个图片的话,按照上面的XML布局就很简洁了,但由于有三个图片,这三个图片都需要自适应窗口大小,所以才造成上面的XML代码那么乱,那么有没有优化的地方呢?

  当然有,在《入门教程》里我们还有一个控件没有介绍,那就是Container,顾名思义就是容器控件,容器控件有什么用呢? 它的用处就是可以使子窗口的行为随着Container一致变化。比如我们的窗口有10个按钮,如果没放在Container里的话,那么想要隐藏所有控件,就必须调用10次隐藏函数,如果想将所有控件往左移的话,也需要操作10次,同样,上面因为有3个图片,所以为了让他们都适应窗口大小,我们做了3次布局。而如果这些控件都在Container里的话,那就方便多了,就算有100个按钮,如果要隐藏的话,我们只需要调用1次隐藏函数,即隐藏Container控件即可,这样它的子控件都会隐藏。同样,如果把上面3个图片都放到Container里去,我们的XML代码就简明多啦,优化后的代码如下:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="800,520" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="600,400">
    <VerticalLayout bkcolor="#FF070700">
        <HorizontalLayout height="40" />
        <HorizontalLayout>
            <VerticalLayout />
            <VerticalLayout width="336">
                <HorizontalLayout />
                <Container height="290">
                    <Control float="true" pos="0,0,0,0" width="336" height="230" bkimage="skin\bk_logo_light.png" />
                    <Control float="true" pos="1,1,0,0" width="336" height="164" bkimage="skin\bk_logo_image.png" />
                    <Control float="true" pos="84,38,0,0" width="168" height="20" bkimage="skin\bk_logo_text.png" />
                </Container>
                <HorizontalLayout />
            </VerticalLayout>
            <VerticalLayout />
        </HorizontalLayout>
        <HorizontalLayout height="50" />
    </VerticalLayout>
</Window>

  可以看到bkimage都在一起了,HorizontalLayout、VerticalLayout 也不那么乱了,Container控件暂时就讲到这里啦。



来自为知笔记(Wiz)



posted on 2013-10-21 21:19  Alberl  阅读(13355)  评论(0编辑  收藏  举报

导航