美文网首页程序员
4 第一组UI组件:布局管理器

4 第一组UI组件:布局管理器

作者: 吴忠亮 | 来源:发表于2017-01-08 13:00 被阅读189次

    SkinUI的界面组件比较多,如果不理顺它们的内在关系,孤立的学习、记忆这些组件,不仅学习起来事倍工半,而且不利于掌握它们之间的联系。

    为了帮助开发者更好的掌握界面组件的关系,本文将这些界面组件按照它们的关系分为几组进行介绍。本章介绍的是第一组组件:以CSkinLayout为基类派生的布局管理器。

    4.1水平布局

    水平布局由CSkinHorizontalLayout类来代表。

    水平布局会将容器里面的组件一个挨着一个地水平排列起来。水平布局不会换行,当组件一个挨一个地排列到头之后,剩下的组件将不会被显示出来。

    因此,水平布局容器的子组件必须能确定自己的布局宽度和布局高度。通常来说,会将子组件的布局高度设置为跟父组件高度相同,否则需要利用属性【LayoutAlignment】确定组件垂直方向的坐标。

    水平布局

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_LAYOUT_SHOW3" Animation="SizeChange">
        <SkinHorizontalLayout Id="1000" AlignParentLeft="15" AlignParentRight="15" AlignParentVerticalCenter="0">
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml" Margin="15,0,0,0"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml" Margin="15,0,0,0"/>
        </SkinHorizontalLayout>
    </SkinDialog>
    

    上面的布局,按钮一个挨着一个地水平排列。

    4.2垂直布局

    垂直布局由CSkinVerticalLayout类来代表。

    垂直布局会将容器里面的组件一个挨着一个地垂直排列起来。SkinUI的垂直布局不会换列,当组件一个挨一个地排列到头之后,剩下的组件将不会被显示出来。

    因此,垂直布局容器的子组件必须能确定自己的布局宽度和布局高度。通常来说,会将子组件的布局宽度设置为跟父组件宽度相同,否则需要利用属性【LayoutAlignment】确定组件水平方向的坐标。

    垂直布局

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_LAYOUT_SHOW4" Animation="SizeChange">
        <SkinVerticalLayout Id="1000" AlignParentTop="50" AlignParentBottom="50" AlignParentHorizontalCenter="0">
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml" Margin="0,30,0,0"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml" Margin="0,30,0,0"/>
        </SkinVerticalLayout>
    </SkinDialog>
    

    上面的布局,按钮一个挨着一个地垂直排列起来。

    4.3相对布局

    相对布局由CSkinRelativeLayout类来代表。

    相对布局是SkinUI最重要的布局容器,几乎所有的界面布局都可以由相对布局完成。相对布局容器的子组件位置由其父组件和兄弟组件的位置共同决定。

    确定组件水平位置有以下两种方法:

    • 给出组件宽度、组件左边坐标、组件右边坐标三个中任意两个
    • 给出组件宽度和组件中心到父组件中心水平方向的距离

    确定组件垂直位置有以下两种方法:

    • 给出组件高度、组件上边坐标、组件下边坐标三个中任意两个
    • 给出组件高度和组件中心到父组件中心垂直方向的距离

    请看下面的示例:

    • 示例一
        <CSkinRelativeLayout>
            <SkinImageView LayoutWidth="100" LayoutHeight="100" AlignParentLeft="50" AlignParentTop="50"/>
        </CSkinRelativeLayout>
    

    上面的布局文件给出了以下四个条件:1. 组件的宽度;2. 组件的高度;3. 组件左边到父组件左边的距离;4. 组件上边到父组件上边的距离

    • 示例二
        <CSkinRelativeLayout>
            <SkinImageView LayoutWidth="100" AlignParentLeft="50" AlignParentTop="50" AlignParentBottom="50"/>
        </CSkinRelativeLayout>
    

    上面的布局文件给出了以下四个条件:1. 给出组件的宽度;2. 给出组件左边到父组件左边的距离;3. 组件上边到父组件上边的距离;4. 组件下边到父组件下边的距离

    • 示例三
        <CSkinRelativeLayout>
            <SkinImageView AlignParentLeft="50" AlignParentTop="50" AlignParentRight="50" AlignParentBottom="50"/>
        </CSkinRelativeLayout>
    

    上面的布局文件给出了以下四个条件:1. 给出组件左边到父组件左边的距离;2. 组件上边到父组件上边的距离;3. 组件右边到父组件右边的距离;4. 组件下边到父组件下边的距离

    相对于父窗口

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_LAYOUT_SHOW7" Animation="SizeChange">
        <SkinRelativeLayout Id="1000" AlignParentLeft="25" AlignParentTop="70" AlignParentRight="25" AlignParentBottom="40" ColumnCount="3">
            <SkinButton Id="11012" AlignParentLeft="0" AlignParentTop="0" LayoutWidth="100" LayoutHeight="30" ChildText1="1" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" AlignParentRight="0" AlignParentBottom="0" LayoutWidth="100" LayoutHeight="30" ChildText1="9" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" AlignParentLeft="0" AlignParentBottom="0" LayoutWidth="100" LayoutHeight="30" ChildText1="7" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" AlignParentRight="0" AlignParentTop="0" LayoutWidth="100" LayoutHeight="30" ChildText1="3" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" AlignParentLeft="0" AlignParentVerticalCenter="0" LayoutWidth="100" LayoutHeight="30" ChildText1="4" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" AlignParentRight="0" AlignParentVerticalCenter="0" LayoutWidth="100" LayoutHeight="30" ChildText1="6" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" AlignParentTop="0" AlignParentHorizontalCenter="0" LayoutWidth="100" LayoutHeight="30" ChildText1="2" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" AlignParentBottom="0" AlignParentHorizontalCenter="0" LayoutWidth="100" LayoutHeight="30" ChildText1="8" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" AlignParentHorizontalCenter="0" AlignParentVerticalCenter="0" LayoutWidth="100" LayoutHeight="30" ChildText1="5" Image="Button.png" Layout="Button.xml"/>
        </SkinRelativeLayout>
    </SkinDialog>
    
    相对于兄弟窗口

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_LAYOUT_SHOW8" Animation="SizeChange">
        <SkinRelativeLayout Id="1000" AlignParentLeft="25" AlignParentTop="45" AlignParentRight="25" AlignParentBottom="25" ColumnCount="3">
            <SkinButton Id="100000" AlignParentHorizontalCenter="0" AlignParentVerticalCenter="0" LayoutWidth="100" LayoutHeight="30" ChildText1="5" Image="Button.png" Layout="Button.xml"/>
            <SkinButton ToLeftOf="100000,20" ToTopOf="100000,20" LayoutWidth="100" LayoutHeight="30" ChildText1="1" Image="Button.png" Layout="Button.xml"/>
            <SkinButton ToLeftOf="100000,20" AlignTopOf="100000,0" LayoutWidth="100" LayoutHeight="30" ChildText1="4" Image="Button.png" Layout="Button.xml"/>
            <SkinButton ToLeftOf="100000,20" ToBottomOf="100000,20" LayoutWidth="100" LayoutHeight="30" ChildText1="7" Image="Button.png" Layout="Button.xml"/>
            <SkinButton ToRightOf="100000,20" ToTopOf="100000,20" LayoutWidth="100" LayoutHeight="30" ChildText1="3" Image="Button.png" Layout="Button.xml"/>
            <SkinButton ToRightOf="100000,20" AlignTopOf="100000,0" LayoutWidth="100" LayoutHeight="30" ChildText1="6" Image="Button.png" Layout="Button.xml"/>
            <SkinButton ToRightOf="100000,20" ToBottomOf="100000,20" LayoutWidth="100" LayoutHeight="30" ChildText1="9" Image="Button.png" Layout="Button.xml"/>
            <SkinButton AlignLeftOf="100000,0" ToTopOf="100000,20" LayoutWidth="100" LayoutHeight="30" ChildText1="2" Image="Button.png" Layout="Button.xml"/>
            <SkinButton AlignLeftOf="100000,0" ToBottomOf="100000,20" LayoutWidth="100" LayoutHeight="30" ChildText1="8" Image="Button.png" Layout="Button.xml"/>
        </SkinRelativeLayout>
    </SkinDialog>
    

    4.3.1组件布局宽度

    组件布局宽度可以设置为绝对值,也可以设置为适应内容的宽度,还可以设置为跟父组件同宽。

    4.3.1.1设置组件宽度为绝对值

    • 将组件宽度设为100像素,有以下两种方法:
      设置XML属性
    LayoutWidth="100"
    

    调用C++方法

    pView->SetLayoutWidth(100);
    

    4.3.1.2设置组件宽度为适应内容的宽度

    • 将组件宽度设为适应内容的宽度,有以下两种方法:
      设置XML属性
    LayoutWidth="WrapContent"
    

    调用C++方法

    pView->SetLayoutWidth(WRAP_CONTENT);
    

    4.3.1.3设置组件宽度为跟父组件同宽

    • 将组件宽度设为跟父组件同宽,有以下两种方法:
      设置XML属性
    LayoutWidth="FillParent"
    

    调用C++方法

    pView->SetLayoutWidth(FILL_PARENT);
    

    4.3.2组件布局高度

    组件布局高度可以设置为绝对值,也可以设置为适应内容的高度,还可以设置为跟父组件同高。

    4.3.2.1设置组件高度为绝对值

    • 将组件高度设为100像素,有以下两种方法:
      设置XML属性
    LayoutHeight="100"
    

    调用C++方法

    pView->SetLayoutHeight(100);
    

    4.3.2.2设置组件宽度为适应内容的高度

    • 将组件高度设为适应内容的高度,有以下两种方法:
      设置XML属性
    LayoutHeight="WrapContent"
    

    调用C++方法

    pView->SetLayoutHeight(WRAP_CONTENT);
    

    4.3.2.3设置组件高度为跟父组件同高

    • 将组件高度设为跟父组件同高,有以下两种方法:
      设置XML属性
    LayoutHeight="FillParent"
    

    调用C++方法

    pView->SetLayoutHeight(FILL_PARENT);
    

    4.3.3组件左边坐标

    设置以下三个条件中任意一个就可以确定组件左边坐标:

    4.3.3.1组件左边到父组件左边的距离

    • 设置组件左边到父组件左边的距离为50像素,有以下两种方法:
      设置XML属性
    AlignParentLeft="50"
    

    调用C++方法

    pView->SetLayoutAlignParentLeft(50);
    

    4.3.3.2组件左边到兄弟组件左边的距离

    • 设置组件左边到Id为1001的兄弟组件左边的距离为50像素,有以下两种方法:
      设置XML属性
    AlignLeftOf="1001,50"
    

    调用C++方法

    pView->SetLayoutAlignLeftOf(1001, 50);
    

    4.3.3.3组件左边到兄弟组件右边的距离

    • 设置组件左边到Id为1001的兄弟组件右边的距离为50像素,有以下两种方法:
      设置XML属性
    ToRightOf="1001, 50"
    

    调用C++方法

    pView->SetLayoutToRightOf(1001, 50);
    

    4.3.4组件上边坐标

    设置以下三个条件中任意一个就可以确定组件上边坐标:

    4.3.4.1组件上边到父组件上边的距离

    • 设置组件上边到父组件上边的距离为50像素,有以下两种方法:
      设置XML属性
    AlignParentTop="50"
    

    调用C++方法

    pView->SetLayoutAlignParentTop(50);
    

    4.3.4.2组件上边到兄弟组件上边的距离

    • 设置组件上边到Id为1001的兄弟组件上边的距离为50像素,有以下两种方法:
      设置XML属性
    AlignTopOf="1001,50"
    

    调用C++方法

    pView->SetLayoutAlignTopOf(1001, 50);
    

    4.3.4.3组件上边到兄弟组件下边的距离

    • 设置组件上边到Id为1001的兄弟组件下边的距离为50像素,有以下两种方法:
      设置XML属性
    ToBottomOf="1001, 50"
    

    调用C++方法

    pView->SetLayoutToBottomOf(1001, 50);
    

    4.3.5组件右边坐标

    设置以下三个条件中任意一个就可以确定组件右边坐标:

    4.3.5.1组件右边到父组件右边的距离

    • 设置组件右边到父组件右边的距离为50像素,有以下两种方法:
      设置XML属性
    AlignParentRight="50"
    

    调用C++方法

    pView->SetLayoutAlignParentRight(50);
    

    4.3.5.2组件右边到兄弟组件右边的距离

    • 设置组件右边到Id为1001的兄弟组件右边的距离为50像素,有以下两种方法:
      设置XML属性
    AlignRightOf="1001,50"
    

    调用C++方法

    pView->SetLayoutAlignRightOf(1001, 50);
    

    4.3.5.3组件右边到兄弟组件左边的距离

    • 设置组件右边到Id为1001的兄弟组件左边的距离为50像素,有以下两种方法:
      设置XML属性
    ToLeftOf="1001, 50"
    

    调用C++方法

    pView->SetLayoutToLeftOf(1001, 50);
    

    4.3.6组件下边坐标

    设置以下三个条件中任意一个就可以确定组件下边坐标:

    4.3.6.1组件下边到父组件下边的距离

    • 设置组件下边到父组件下边的距离为50像素,有以下两种方法:
      设置XML属性
    AlignParentBottom="50"
    

    调用C++方法

    pView->SetLayoutAlignParentBottom(50);
    

    4.3.6.2组件下边到兄弟组件下边的距离

    • 设置组件下边到Id为1001的兄弟组件下边的距离为50像素,有以下两种方法:
      设置XML属性
    AlignBottomOf="1001,50"
    

    调用C++方法

    pView->SetLayoutAlignBottomOf(1001, 50);
    

    4.3.6.3组件下边到兄弟组件上边的距离

    • 设置组件下边到Id为1001的兄弟组件上边的距离为50像素,有以下两种方法:
      设置XML属性
    ToTopOf="1001, 50"
    

    调用C++方法

    pView->SetLayoutToTopOf(1001, 50);
    

    4.3.7组件中心到父组件中心水平方向的距离

    可以设置水平方向组件中心和父组件中心重合,可以在父组件中心左边,也可以在父组件中心右边。

    4.3.7.1水平方向组件中心和父组件中心重合

    • 设置水平方向组件中心和父组件中心重合,有以下两种方法:
      设置XML属性
    AlignParentHorizontalCenter="0"
    

    调用C++方法

    pView->SetLayoutAlignParentHorizontalCenter(0);
    

    4.3.7.2水平方向组件中心在父组件中心左边

    • 设置水平方向组件中心在父组件中心左边10像素,有以下两种方法:
      设置XML属性
    AlignParentHorizontalCenter="-10"
    

    调用C++方法

    pView->SetLayoutAlignParentHorizontalCenter(-10);
    

    4.3.7.3水平方向组件中心在父组件中心右边

    • 设置水平方向组件中心在父组件中心右边10像素,有以下两种方法:
      设置XML属性
    AlignParentHorizontalenter="10"
    

    调用C++方法

    pView->SetLayoutAlignParentHorizontalCenter(10);
    

    4.3.8组件中心到父组件中心垂直方向的距离

    可以设置垂直方向组件中心和父组件中心重合,可以在父组件中心左边,也可以在父组件中心右边。

    4.3.7.1垂直方向组件中心和父组件中心重合

    • 设置垂直方向组件中心和父组件中心重合,有以下两种方法:
      设置XML属性
    AlignParentVerticalCenter="0"
    

    调用C++方法

    pView->SetLayoutAlignParentVerticalCenter(0);
    

    4.3.7.2垂直方向组件中心在父组件中心左边

    • 设置垂直方向组件中心在父组件中心左边10像素,有以下两种方法:
      设置XML属性
    AlignParentVerticalCenter="-10"
    

    调用C++方法

    pView->SetLayoutAlignParentVerticalCenter(-10);
    

    4.3.7.3垂直方向组件中心在父组件中心右边

    • 设置垂直方向组件中心在父组件中心右边10像素,有以下两种方法:
      设置XML属性
    AlignParentVerticalCenter="10"
    

    调用C++方法

    pView->SetLayoutAlignParentVerticalCenter(10);
    

    4.4帧布局

    帧布局由CSkinFrameLayout类来代表。帧布局会将容器里面组件的大小保持跟父组件一致。因此,帧布局通常和Tab页配合使用,帧布局容器的子组件的宽度为跟父组件同宽,高度为跟父组件同高。

    帧布局

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_LAYOUT_SHOW1" Animation="SizeChange" ThemeHeight="65">
        <SkinRadioGroup Id="100" LayoutWidth="210" LayoutHeight="30" AlignParentLeft="0" AlignParentTop="35">
            <SkinRelativeLayout LayoutWidth="FillParent" LayoutHeight="FillParent">
                <SkinRadioButton Id="101" LayoutWidth="100" LayoutHeight="FillParent" ChildText1="TabButton1" Image="TabButton.png" Layout="TabButton.xml" BindView="1100" AlignParentLeft="0" Checked="true"/>
                <SkinRadioButton Id="102" LayoutWidth="100" LayoutHeight="FillParent" ChildText1="TabButton2" Image="TabButton.png" Layout="TabButton.xml" BindView="1200" AlignParentLeft="100" Radius="5"/>
            </SkinRelativeLayout>
        </SkinRadioGroup>
        <SkinRelativeLayout AlignParentLeft="10" AlignParentTop="80" AlignParentRight="10" AlignParentBottom="10">
            <SkinFrameLayout Id="1000" AlignParentLeft="15" AlignParentTop="15" AlignParentRight="15" AlignParentBottom="15">
                <SkinTextView Id="1100" Text="IDS_CONTROL_SHOW_TEXT13" HorzAlignment="Center" VertAlignment="Center"/>
                <SkinTextView Id="1200" Text="IDS_CONTROL_SHOW_TEXT14" HorzAlignment="Center" VertAlignment="Center" Visible="false"/>
            </SkinFrameLayout>
        </SkinRelativeLayout>
    </SkinDialog>
    

    4.5网格布局

    网格布局由CSkinGridLayout类来代表。网格布局会将容器分为 m 行 n 列。m、n由属性【ColumnCount】决定。
    例如:

    • 设置网格布局为 5 列,有以下两种方法:
      设置XML属性
    ColumnCount="5"
    

    调用C++方法

    pView->SetColumnCount(5);
    

    至于行数,则由子组件的个数决定。网格布局会将容器里面的组件一个挨着一个地按 m 行 n 列排列起来。
    例如:网格布局为 5 列,子组件个数为 10 个,则为 2 行;网格布局为 5 列,子组件个数为 13 个,则为 3 行。

    网格布局容器的子组件必须能确定自己的布局宽度和布局高度。通常来说,会将子组件的布局宽度设置为跟父组件同宽 同高,否则需要利用属性【LayoutAlignment】确定子组件水平和垂直方向的坐标。

    网格布局

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_LAYOUT_SHOW2" Animation="SizeChange">
        <SkinGridLayout Id="1000" AlignParentLeft="15" AlignParentTop="15" AlignParentRight="15" AlignParentBottom="15" ColumnCount="3">
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="IDS_VIEW_CODE" Image="Button.png" Layout="Button.xml"/>
        </SkinGridLayout>
    </SkinDialog>
    

    上面的布局,九个SkinButton 分别占据一个单元格,根据默认的LayoutAlignment,显示在单元格中心。

    4.6水平比例布局

    水平比例布局由CSkinHorzPercentLayout类来代表。
    水平比例布局和水平布局类似,也会将容器里面的组件一个挨着一个地水平排列起来。

    子组件的布局高度设置为跟父组件高度相同, 子组件的宽度由子组件的布局宽度决定,此处的布局宽度表示占父组件宽度的百分比,最后一个子组件的宽度为剩余的宽度。

    水平比例布局

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_LAYOUT_SHOW5" Animation="SizeChange">
        <SkinHorzPercentLayout Id="1000" AlignParentLeft="15" AlignParentRight="15" LayoutHeight="30" AlignParentVerticalCenter="0">
            <SkinButton Id="11012" LayoutWidth="20" LayoutHeight="30" ChildText1="20%" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="30" LayoutHeight="30" ChildText1="30%" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="50" LayoutHeight="30" ChildText1="50%" Image="Button.png" Layout="Button.xml"/>
        </SkinHorzPercentLayout>
    </SkinDialog>
    

    上面的布局,第一个SkinButton的宽度占父组件宽度的20%,第二个SkinButton的宽度占父组件宽度的30%,第三个SkinButton的宽度占父组件宽度的50%。

    4.7垂直比例布局

    垂直比例布局由CSkinHorzPercentLayout类来代表。
    垂直比例布局和垂直布局类似,也会将容器里面的组件一个挨着一个地垂直排列起来。

    子组件的布局宽度设置为跟父组件宽度相同, 子组件的高度由子组件的布局高度决定,此处的布局高度表示占父组件高度的百分比,最后一个子组件的高度为剩余的高度。

    垂直比例布局

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_LAYOUT_SHOW5" Animation="SizeChange">
        <SkinVertPercentLayout Id="1000" AlignParentTop="45" AlignParentBottom="15" LayoutWidth="100" AlignParentHorizontalCenter="0">
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="20" ChildText1="20%" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="30" ChildText1="30%" Image="Button.png" Layout="Button.xml"/>
            <SkinButton Id="11012" LayoutWidth="100" LayoutHeight="50" ChildText1="50%" Image="Button.png" Layout="Button.xml"/>
        </SkinVertPercentLayout>
    </SkinDialog>
    

    上面的布局,第一个SkinButton的高度占父组件高度的20%,第二个SkinButton的高度占父组件高度的30%,第三个SkinButton的高度占父组件高度的50%。

    相关文章

      网友评论

        本文标题:4 第一组UI组件:布局管理器

        本文链接:https://www.haomeiwen.com/subject/riymuttx.html