SkinUI入门教程（四） 第一组UI组件：布局管理器

• 官方网站：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%。