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

2017-01-08 本文已影响189人吴忠亮

官方网站：http://www.skinui.cn
下载地址：http://pan.baidu.com/s/1slKsMGt

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组件：布局管理器

4.1水平布局

4.2垂直布局

4.3相对布局

4.3.1组件布局宽度

4.3.1.1设置组件宽度为绝对值

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

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

4.3.2组件布局高度

4.3.2.1设置组件高度为绝对值

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

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

4.3.3组件左边坐标

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

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

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

4.3.4组件上边坐标

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

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

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

4.3.5组件右边坐标

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

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

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

4.3.6组件下边坐标

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

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

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

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

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

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

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

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

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

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

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

4.4帧布局

4.5网格布局

4.6水平比例布局

4.7垂直比例布局

猜你喜欢

热点阅读