HarmonyOS應(yīng)用開發(fā)之Java UI框架

TableLayout使用表格的方式劃分子組件。

TableLayout的共有XML屬性繼承自：Component。

TableLayout的自有XML屬性見下表：

在XML中創(chuàng)建TableLayout，示例代碼如下：

在graphic文件夾下創(chuàng)建Text的背景table_text_bg_element.xml，示例代碼如下：

    ohos:radius="5vp"/>
    

在TableLayout布局中添加子組件。

xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:padding="8vp">
    ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>


    

TableLayout默認(rèn)一列多行。

設(shè)置行列數(shù)：

...
    ohos:row_count="2"
    ohos:column_count="2">

設(shè)置TableLayout的行為2，列為2效果。

在XML中設(shè)置布局排列方向，以“vertical”為例：

...
    ohos:orientation="vertical">
    ...

設(shè)置布局排列方向?yàn)椤皏ertical”的效果。

TableLayout提供兩種對(duì)齊方式，邊距對(duì)齊“align_contents”、邊界對(duì)齊“align_edges”，默認(rèn)為邊距對(duì)齊“align_contents”。代碼如下：

xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alignment_type="align_contents"
    ohos:background_element="$graphic:layout_borderline"
    ohos:column_count="3"
    ohos:padding="8vp">


    ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:padding="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>


    

邊距對(duì)齊效果：

將TableLayout的對(duì)齊方式修改為邊界對(duì)齊。

...
ohos:alignment_type="align_edges">
    ...

邊界對(duì)齊效果：

引用graphic文件夾下的背景資源文件為layout_borderline.xml，示例代碼如下：

TableLayout合并單元格的效果可以通過設(shè)置子組件的行列屬性來實(shí)現(xiàn)。

設(shè)置子組件的行列屬性均為2的效果展示：

在XML中創(chuàng)建TableLayout，并添加子組件，代碼如下：

xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alignment_type="align_edges"
    ohos:background_element="$graphic:layout_borderline"
    ohos:column_count="3"
    ohos:padding="8vp"
    ohos:row_count="3">


    ohos:id="$+id:text_one"
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>


    

在Java代碼中設(shè)置子組件的行列屬性，代碼如下：

@Override
    protected void onStart(Intent intent) {
        ...
        Component component = findComponentById(ResourceTable.Id_text_one);
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        component.setLayoutConfig(tlc);
    }


    private int vp2px(float vp) {
        return AttrHelper.vp2px(vp, getContext());
    }

在設(shè)置子組件的行列屬性時(shí)，TableLayout剩余的行數(shù)和列數(shù)必須大于等于該子組件所設(shè)置的行數(shù)和列數(shù)。

目前僅支持Java代碼設(shè)置TableLayout子組件的行列屬性。

在創(chuàng)建子組件的行列屬性時(shí)，還可設(shè)置子組件的對(duì)齊方式，修改上述Java代碼如下：

@Override
    protected void onStart(Intent intent) {
        ...
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        ...
    }

子組件的對(duì)齊方式設(shè)置為ALIGNMENT_FILL的效果：

設(shè)置子組件的權(quán)重，代碼如下：

@Override
    protected void onStart(Intent intent) {
        ...
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(0, vp2px(48));
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 1, 1.0f);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1);


        findComponentById(ResourceTable.Id_text_one).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_two).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_three).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_four).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_five).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_six).setLayoutConfig(tlc);
    }

上述代碼將子組件的寬度權(quán)重設(shè)置為1.0，每行子組件會(huì)均分TableLayout的寬度，所以需要設(shè)置TableLayout為固定寬度或match_parent。

ohos:width="match_parent"
    ...>


    ohos:id="$+id:text_one"
        .../>


    

將子組件的寬度權(quán)重設(shè)置為1.0的效果展示：

審核編輯：湯梓紅