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

SkinUI的界面組件比較多含蓉，如果不理順?biāo)鼈兊膬?nèi)在關(guān)系频敛，孤立的學(xué)習(xí)、記憶這些組件馅扣，不僅學(xué)習(xí)起來(lái)事倍工半斟赚，而且不利于掌握它們之間的聯(lián)系。

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

4.1水平布局

水平布局由CSkinHorizontalLayout類來(lái)代表蓄喇。

水平布局會(huì)將容器里面的組件一個(gè)挨著一個(gè)地水平排列起來(lái)发侵。水平布局不會(huì)換行，當(dāng)組件一個(gè)挨一個(gè)地排列到頭之后妆偏，剩下的組件將不會(huì)被顯示出來(lái)刃鳄。

因此，水平布局容器的子組件必須能確定自己的布局寬度和布局高度钱骂。通常來(lái)說(shuō)叔锐，會(huì)將子組件的布局高度設(shè)置為跟父組件高度相同，否則需要利用屬性【LayoutAlignment】確定組件垂直方向的坐標(biāo)罐柳。

水平布局

布局文件如下：

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

上面的布局掌腰，按鈕一個(gè)挨著一個(gè)地水平排列狰住。

4.2垂直布局

垂直布局由CSkinVerticalLayout類來(lái)代表张吉。

垂直布局會(huì)將容器里面的組件一個(gè)挨著一個(gè)地垂直排列起來(lái)。SkinUI的垂直布局不會(huì)換列催植，當(dāng)組件一個(gè)挨一個(gè)地排列到頭之后肮蛹，剩下的組件將不會(huì)被顯示出來(lái)。

因此创南，垂直布局容器的子組件必須能確定自己的布局寬度和布局高度伦忠。通常來(lái)說(shuō)，會(huì)將子組件的布局寬度設(shè)置為跟父組件寬度相同稿辙，否則需要利用屬性【LayoutAlignment】確定組件水平方向的坐標(biāo)昆码。

垂直布局

布局文件如下：

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

上面的布局，按鈕一個(gè)挨著一個(gè)地垂直排列起來(lái)。

4.3相對(duì)布局

相對(duì)布局由CSkinRelativeLayout類來(lái)代表赋咽。

相對(duì)布局是SkinUI最重要的布局容器旧噪，幾乎所有的界面布局都可以由相對(duì)布局完成。相對(duì)布局容器的子組件位置由其父組件和兄弟組件的位置共同決定脓匿。

確定組件水平位置有以下兩種方法：

  • 給出組件寬度淘钟、組件左邊坐標(biāo)、組件右邊坐標(biāo)三個(gè)中任意兩個(gè)
  • 給出組件寬度和組件中心到父組件中心水平方向的距離

確定組件垂直位置有以下兩種方法：

  • 給出組件高度陪毡、組件上邊坐標(biāo)米母、組件下邊坐標(biāo)三個(gè)中任意兩個(gè)
  • 給出組件高度和組件中心到父組件中心垂直方向的距離

請(qǐng)看下面的示例：

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

上面的布局文件給出了以下四個(gè)條件：1. 組件的寬度；2. 組件的高度毡琉；3. 組件左邊到父組件左邊的距離铁瞒；4. 組件上邊到父組件上邊的距離

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

上面的布局文件給出了以下四個(gè)條件：1. 給出組件的寬度；2. 給出組件左邊到父組件左邊的距離绊起；3. 組件上邊到父組件上邊的距離精拟；4. 組件下邊到父組件下邊的距離

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

上面的布局文件給出了以下四個(gè)條件：1. 給出組件左邊到父組件左邊的距離；2. 組件上邊到父組件上邊的距離虱歪；3. 組件右邊到父組件右邊的距離蜂绎；4. 組件下邊到父組件下邊的距離

相對(duì)于父窗口

布局文件如下：

<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>
相對(duì)于兄弟窗口

布局文件如下：

<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è)置為絕對(duì)值，也可以設(shè)置為適應(yīng)內(nèi)容的寬度笋鄙，還可以設(shè)置為跟父組件同寬师枣。

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

  • 將組件寬度設(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è)置為絕對(duì)值，也可以設(shè)置為適應(yīng)內(nèi)容的高度找岖，還可以設(shè)置為跟父組件同高陨倡。

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

  • 將組件高度設(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組件左邊坐標(biāo)

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

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組件上邊坐標(biāo)

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

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組件右邊坐標(biāo)

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

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組件下邊坐標(biāo)

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

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類來(lái)代表坞笙。幀布局會(huì)將容器里面組件的大小保持跟父組件一致。因此荚虚，幀布局通常和Tab頁(yè)配合使用薛夜，幀布局容器的子組件的寬度為跟父組件同寬，高度為跟父組件同高版述。

幀布局

布局文件如下：

<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類來(lái)代表梯澜。網(wǎng)格布局會(huì)將容器分為 m 行 n 列。m渴析、n由屬性【ColumnCount】決定晚伙。
例如：

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

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

pView->SetColumnCount(5);

至于行數(shù)俭茧，則由子組件的個(gè)數(shù)決定咆疗。網(wǎng)格布局會(huì)將容器里面的組件一個(gè)挨著一個(gè)地按 m 行 n 列排列起來(lái)。
例如：網(wǎng)格布局為 5 列母债，子組件個(gè)數(shù)為 10 個(gè)午磁，則為 2 行；網(wǎng)格布局為 5 列场斑，子組件個(gè)數(shù)為 13 個(gè)漓踢，則為 3 行牵署。

網(wǎng)格布局容器的子組件必須能確定自己的布局寬度和布局高度漏隐。通常來(lái)說(shuō)，會(huì)將子組件的布局寬度設(shè)置為跟父組件同寬 同高奴迅，否則需要利用屬性【LayoutAlignment】確定子組件水平和垂直方向的坐標(biāo)青责。

網(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>

上面的布局挺据，九個(gè)SkinButton 分別占據(jù)一個(gè)單元格，根據(jù)默認(rèn)的LayoutAlignment脖隶，顯示在單元格中心扁耐。

4.6水平比例布局

水平比例布局由CSkinHorzPercentLayout類來(lái)代表。
水平比例布局和水平布局類似产阱，也會(huì)將容器里面的組件一個(gè)挨著一個(gè)地水平排列起來(lái)婉称。

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

水平比例布局

布局文件如下：

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

上面的布局庄敛，第一個(gè)SkinButton的寬度占父組件寬度的20%俗壹，第二個(gè)SkinButton的寬度占父組件寬度的30%，第三個(gè)SkinButton的寬度占父組件寬度的50%藻烤。

4.7垂直比例布局

垂直比例布局由CSkinHorzPercentLayout類來(lái)代表绷雏。
垂直比例布局和垂直布局類似，也會(huì)將容器里面的組件一個(gè)挨著一個(gè)地垂直排列起來(lái)怖亭。

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

垂直比例布局

布局文件如下：

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

上面的布局，第一個(gè)SkinButton的高度占父組件高度的20%峭跳，第二個(gè)SkinButton的高度占父組件高度的30%膘婶，第三個(gè)SkinButton的高度占父組件高度的50%。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末蛀醉，一起剝皮案震驚了整個(gè)濱河市悬襟，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌拯刁，老刑警劉巖脊岳，帶你破解...
    沈念sama閱讀 216,496評(píng)論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異垛玻，居然都是意外死亡割捅，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門帚桩，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)亿驾，“玉大人，你說(shuō)我怎么就攤上這事账嚎∧玻” “怎么了儡蔓？”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)疼邀。 經(jīng)常有香客問我喂江，道長(zhǎng)，這世上最難降的妖魔是什么旁振？ 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任获询，我火速辦了婚禮，結(jié)果婚禮上拐袜，老公的妹妹穿的比我還像新娘筐付。我一直安慰自己，他們只是感情好阻肿，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布瓦戚。 她就那樣靜靜地躺著，像睡著了一般丛塌。 火紅的嫁衣襯著肌膚如雪较解。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,165評(píng)論 1贊 299
  • 城市分裂傳說(shuō)
    那天赴邻，我揣著相機(jī)與錄音印衔，去河邊找鬼。 笑死姥敛，一個(gè)胖子當(dāng)著我的面吹牛奸焙，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播彤敛，決...
    沈念sama閱讀 40,052評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼与帆，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了墨榄？” 一聲冷哼從身側(cè)響起玄糟，我...
    開封第一講書人閱讀 38,910評(píng)論 0贊 274
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎袄秩，沒想到半個(gè)月后阵翎，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡之剧，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年郭卫，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片背稼。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡贰军，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出雇庙，到底是詐尸還是另有隱情谓形，我是刑警寧澤，帶...
    沈念sama閱讀 35,424評(píng)論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布疆前，位于F島的核電站寒跳，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏竹椒。R本人自食惡果不足惜童太，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3贊 326
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望胸完。 院中可真熱鬧书释，春花似錦、人聲如沸赊窥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)锨能。三九已至扯再，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間址遇，已是汗流浹背熄阻。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留倔约，地道東北人秃殉。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2贊 368
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像浸剩，于是被迫代替她去往敵國(guó)和親钾军。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2贊 353

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