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

SkinUI的界面組件比較多，如果不理順它們的內(nèi)在關(guān)系，孤立的學習、記憶這些組件，不僅學習起來事倍工半，而且不利于掌握它們之間的聯(lián)系。

為了幫助開發(fā)者更好的掌握界面組件的關(guān)系，本文將這些界面組件按照它們的關(guān)系分為幾組進行介紹。本章介紹的是第一組組件：以CSkinLayout為基類派生的布局管理器。

4.1水平布局

水平布局由CSkinHorizontalLayout類來代表。

水平布局會將容器里面的組件一個挨著一個地水平排列起來。水平布局不會換行，當組件一個挨一個地排列到頭之后，剩下的組件將不會被顯示出來。

因此，水平布局容器的子組件必須能確定自己的布局寬度和布局高度。通常來說，會將子組件的布局高度設(shè)置為跟父組件高度相同，否則需要利用屬性【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的垂直布局不會換列，當組件一個挨一個地排列到頭之后，剩下的組件將不會被顯示出來。

因此，垂直布局容器的子組件必須能確定自己的布局寬度和布局高度。通常來說，會將子組件的布局寬度設(shè)置為跟父組件寬度相同，否則需要利用屬性【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組件布局寬度

組件布局寬度可以設(shè)置為絕對值，也可以設(shè)置為適應(yīng)內(nèi)容的寬度，還可以設(shè)置為跟父組件同寬。

4.3.1.1設(shè)置組件寬度為絕對值

  • 將組件寬度設(shè)為100像素，有以下兩種方法：
    設(shè)置XML屬性
LayoutWidth="100"

調(diào)用C++方法

pView->SetLayoutWidth(100);

4.3.1.2設(shè)置組件寬度為適應(yīng)內(nèi)容的寬度

  • 將組件寬度設(shè)為適應(yīng)內(nèi)容的寬度，有以下兩種方法：
    設(shè)置XML屬性
LayoutWidth="WrapContent"

調(diào)用C++方法

pView->SetLayoutWidth(WRAP_CONTENT);

4.3.1.3設(shè)置組件寬度為跟父組件同寬

  • 將組件寬度設(shè)為跟父組件同寬，有以下兩種方法：
    設(shè)置XML屬性
LayoutWidth="FillParent"

調(diào)用C++方法

pView->SetLayoutWidth(FILL_PARENT);

4.3.2組件布局高度

組件布局高度可以設(shè)置為絕對值，也可以設(shè)置為適應(yīng)內(nèi)容的高度，還可以設(shè)置為跟父組件同高。

4.3.2.1設(shè)置組件高度為絕對值

  • 將組件高度設(shè)為100像素，有以下兩種方法：
    設(shè)置XML屬性
LayoutHeight="100"

調(diào)用C++方法

pView->SetLayoutHeight(100);

4.3.2.2設(shè)置組件寬度為適應(yīng)內(nèi)容的高度

  • 將組件高度設(shè)為適應(yīng)內(nèi)容的高度，有以下兩種方法：
    設(shè)置XML屬性
LayoutHeight="WrapContent"

調(diào)用C++方法

pView->SetLayoutHeight(WRAP_CONTENT);

4.3.2.3設(shè)置組件高度為跟父組件同高

  • 將組件高度設(shè)為跟父組件同高，有以下兩種方法：
    設(shè)置XML屬性
LayoutHeight="FillParent"

調(diào)用C++方法

pView->SetLayoutHeight(FILL_PARENT);

4.3.3組件左邊坐標

設(shè)置以下三個條件中任意一個就可以確定組件左邊坐標：

4.3.3.1組件左邊到父組件左邊的距離

  • 設(shè)置組件左邊到父組件左邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
AlignParentLeft="50"

調(diào)用C++方法

pView->SetLayoutAlignParentLeft(50);

4.3.3.2組件左邊到兄弟組件左邊的距離

  • 設(shè)置組件左邊到Id為1001的兄弟組件左邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
AlignLeftOf="1001,50"

調(diào)用C++方法

pView->SetLayoutAlignLeftOf(1001, 50);

4.3.3.3組件左邊到兄弟組件右邊的距離

  • 設(shè)置組件左邊到Id為1001的兄弟組件右邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
ToRightOf="1001, 50"

調(diào)用C++方法

pView->SetLayoutToRightOf(1001, 50);

4.3.4組件上邊坐標

設(shè)置以下三個條件中任意一個就可以確定組件上邊坐標：

4.3.4.1組件上邊到父組件上邊的距離

  • 設(shè)置組件上邊到父組件上邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
AlignParentTop="50"

調(diào)用C++方法

pView->SetLayoutAlignParentTop(50);

4.3.4.2組件上邊到兄弟組件上邊的距離

  • 設(shè)置組件上邊到Id為1001的兄弟組件上邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
AlignTopOf="1001,50"

調(diào)用C++方法

pView->SetLayoutAlignTopOf(1001, 50);

4.3.4.3組件上邊到兄弟組件下邊的距離

  • 設(shè)置組件上邊到Id為1001的兄弟組件下邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
ToBottomOf="1001, 50"

調(diào)用C++方法

pView->SetLayoutToBottomOf(1001, 50);

4.3.5組件右邊坐標

設(shè)置以下三個條件中任意一個就可以確定組件右邊坐標：

4.3.5.1組件右邊到父組件右邊的距離

  • 設(shè)置組件右邊到父組件右邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
AlignParentRight="50"

調(diào)用C++方法

pView->SetLayoutAlignParentRight(50);

4.3.5.2組件右邊到兄弟組件右邊的距離

  • 設(shè)置組件右邊到Id為1001的兄弟組件右邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
AlignRightOf="1001,50"

調(diào)用C++方法

pView->SetLayoutAlignRightOf(1001, 50);

4.3.5.3組件右邊到兄弟組件左邊的距離

  • 設(shè)置組件右邊到Id為1001的兄弟組件左邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
ToLeftOf="1001, 50"

調(diào)用C++方法

pView->SetLayoutToLeftOf(1001, 50);

4.3.6組件下邊坐標

設(shè)置以下三個條件中任意一個就可以確定組件下邊坐標：

4.3.6.1組件下邊到父組件下邊的距離

  • 設(shè)置組件下邊到父組件下邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
AlignParentBottom="50"

調(diào)用C++方法

pView->SetLayoutAlignParentBottom(50);

4.3.6.2組件下邊到兄弟組件下邊的距離

  • 設(shè)置組件下邊到Id為1001的兄弟組件下邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
AlignBottomOf="1001,50"

調(diào)用C++方法

pView->SetLayoutAlignBottomOf(1001, 50);

4.3.6.3組件下邊到兄弟組件上邊的距離

  • 設(shè)置組件下邊到Id為1001的兄弟組件上邊的距離為50像素，有以下兩種方法：
    設(shè)置XML屬性
ToTopOf="1001, 50"

調(diào)用C++方法

pView->SetLayoutToTopOf(1001, 50);

4.3.7組件中心到父組件中心水平方向的距離

可以設(shè)置水平方向組件中心和父組件中心重合，可以在父組件中心左邊，也可以在父組件中心右邊。

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

  • 設(shè)置水平方向組件中心和父組件中心重合，有以下兩種方法：
    設(shè)置XML屬性
AlignParentHorizontalCenter="0"

調(diào)用C++方法

pView->SetLayoutAlignParentHorizontalCenter(0);

4.3.7.2水平方向組件中心在父組件中心左邊

  • 設(shè)置水平方向組件中心在父組件中心左邊10像素，有以下兩種方法：
    設(shè)置XML屬性
AlignParentHorizontalCenter="-10"

調(diào)用C++方法

pView->SetLayoutAlignParentHorizontalCenter(-10);

4.3.7.3水平方向組件中心在父組件中心右邊

  • 設(shè)置水平方向組件中心在父組件中心右邊10像素，有以下兩種方法：
    設(shè)置XML屬性
AlignParentHorizontalenter="10"

調(diào)用C++方法

pView->SetLayoutAlignParentHorizontalCenter(10);

4.3.8組件中心到父組件中心垂直方向的距離

可以設(shè)置垂直方向組件中心和父組件中心重合，可以在父組件中心左邊，也可以在父組件中心右邊。

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

  • 設(shè)置垂直方向組件中心和父組件中心重合，有以下兩種方法：
    設(shè)置XML屬性
AlignParentVerticalCenter="0"

調(diào)用C++方法

pView->SetLayoutAlignParentVerticalCenter(0);

4.3.7.2垂直方向組件中心在父組件中心左邊

  • 設(shè)置垂直方向組件中心在父組件中心左邊10像素，有以下兩種方法：
    設(shè)置XML屬性
AlignParentVerticalCenter="-10"

調(diào)用C++方法

pView->SetLayoutAlignParentVerticalCenter(-10);

4.3.7.3垂直方向組件中心在父組件中心右邊

  • 設(shè)置垂直方向組件中心在父組件中心右邊10像素，有以下兩種方法：
    設(shè)置XML屬性
AlignParentVerticalCenter="10"

調(diào)用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網(wǎng)格布局

網(wǎng)格布局由CSkinGridLayout類來代表。網(wǎng)格布局會將容器分為 m 行 n 列。m、n由屬性【ColumnCount】決定。
例如：

  • 設(shè)置網(wǎng)格布局為 5 列，有以下兩種方法：
    設(shè)置XML屬性
ColumnCount="5"

調(diào)用C++方法

pView->SetColumnCount(5);

至于行數(shù)，則由子組件的個數(shù)決定。網(wǎng)格布局會將容器里面的組件一個挨著一個地按 m 行 n 列排列起來。
例如：網(wǎng)格布局為 5 列，子組件個數(shù)為 10 個，則為 2 行；網(wǎng)格布局為 5 列，子組件個數(shù)為 13 個，則為 3 行。

網(wǎng)格布局容器的子組件必須能確定自己的布局寬度和布局高度。通常來說，會將子組件的布局寬度設(shè)置為跟父組件同寬 同高，否則需要利用屬性【LayoutAlignment】確定子組件水平和垂直方向的坐標。

網(wǎng)格布局

布局文件如下：

<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 分別占據(jù)一個單元格，根據(jù)默認的LayoutAlignment，顯示在單元格中心。

4.6水平比例布局

水平比例布局由CSkinHorzPercentLayout類來代表。
水平比例布局和水平布局類似，也會將容器里面的組件一個挨著一個地水平排列起來。

子組件的布局高度設(shè)置為跟父組件高度相同， 子組件的寬度由子組件的布局寬度決定，此處的布局寬度表示占父組件寬度的百分比，最后一個子組件的寬度為剩余的寬度。

水平比例布局

布局文件如下：

<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類來代表。
垂直比例布局和垂直布局類似，也會將容器里面的組件一個挨著一個地垂直排列起來。

子組件的布局寬度設(shè)置為跟父組件寬度相同， 子組件的高度由子組件的布局高度決定，此處的布局高度表示占父組件高度的百分比，最后一個子組件的高度為剩余的高度。

垂直比例布局

布局文件如下：

<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%。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容