Development of HarmonyOS Learning Road—Java UI Framework (TableLayout)

TableLayout

TableLayout uses tables to divide subcomponents.

Supported XML attributes

The common XML attributes of TableLayout are inherited from: Component

TableLayout's own XML attributes are shown in the following table:

attribute name	Chinese description	value	Value description	Use Cases
alignment_type	alignment	align_edges	Indicates that the components within the TableLayout are aligned on the border.	ohos:alignment_type="align_edges"
		align_contents	Indicates that the components within the TableLayout are aligned by margins.	ohos:alignment_type="align_contents"
column_count	Number of columns	integer type	Integer values ​​can be set directly, or integer resources can be referenced.	ohos:column_count="3" ohos:column_count="$integer:count"
row_count	Number of lines	integer type	Integer values ​​can be set directly, or integer resources can be referenced.	ohos:row_count="2" ohos:row_count="$integer:count"
orientation	Arrangement direction	horizontal	Indicates a horizontal layout.	ohos:orientation="horizontal"
		vertical	Indicates a vertical layout.	ohos:orientation="vertical"

TableLayout creation

• Create TableLayout in XML, the sample code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:padding="8vp">
</TableLayout>

• Add child components

a. Create the background table_text_bg_element.xml of Text in the graphic folder, the sample code is as follows

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="5vp"/>
    <stroke
        ohos:width="1vp"
        ohos:color="gray"/>
    <solid
        ohos:color="#00BFFF"/>
</shape>

b. Add child components to the TableLayout layout.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:padding="8vp">
    <Text
        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"/>

    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:text="2"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>

    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:text="3"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>

    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</TableLayout>

TableLayout defaults to one column with multiple rows

 Set the number of rows and columns

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

 Set the behavior of TableLayout to 2, and the effect of column 2

Set the layout alignment direction

Set the layout direction in XML, take "vertical" as an example:

<TableLayout
    ...
    ohos:orientation="vertical">
    ...
</TableLayout>

The effect of setting the layout direction to "vertical"

set alignment

TableLayout provides two alignment methods, margin alignment "align_contents" and border alignment "align_edges". The default is margin alignment "align_contents".

• margin alignment

code show as below:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    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">

    <Text
        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"/>

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

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

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

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

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

Margin Alignment Effect

•  border alignment

Modify the alignment of TableLayout to border alignment.

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

    ...
        
</TableLayout>

 border alignment effect

Refer to the background resource file under the graphic folder as layout_borderline.xml, and the sample code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="5vp"/>
    <stroke
        ohos:width="1vp"
        ohos:color="gray"/>
</shape>

 Set the row and column properties of the child component

Achieve the effect of merging cells

The effect of TableLayout merging cells can be achieved by setting the row and column properties of the child components.

The effect of setting the row and column attributes of the subcomponent to 2

 Create TableLayout in XML and add subcomponents, the code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<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">

    <Text
        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"/>

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

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

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

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

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="6"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>
</TableLayout>

Set the row and column properties of the subcomponent in the Java code, the code is as follows:

    @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());
    }

• illustrate

When setting the row and column properties of a subcomponent, the number of rows and columns remaining in the TableLayout must be greater than or equal to the number of rows and columns set by the subcomponent.

Currently, only Java code is supported to set the row and column attributes of TableLayout subcomponents.

When creating the row and column attributes of a subcomponent, you can also set the alignment of the subcomponent, and modify the above Java code as follows:

    @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);
        ...
    }

The alignment of the subcomponent is set to the effect of ALIGNMENT_FILL

 Set the weight of the child component

code show as below:

 @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);
    }

The above code sets the width weight of the subcomponents to 1.0, and each row of subcomponents will share the width of the TableLayout equally, so you need to set the TableLayout to a fixed width or match_parent.

<TableLayout
    ohos:width="match_parent"
    ...>

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

    <Text
        ohos:id="$+id:text_two"
        .../>

    <Text
        ohos:id="$+id:text_three"
        .../>

    <Text
        ohos:id="$+id:text_four"
        .../>

    <Text
        ohos:id="$+id:text_five"
        .../>

    <Text
        ohos:id="$+id:text_six"
        .../>
</TableLayout>

Display of the effect of setting the width weight of the child component to 1.0