An overview of the

Table = Table As the name implies, a TableLayout layout is a table of molecular components. As shown below:

Use of TableLayout layout

TableLayout common XML attribute (*)

attribute describe The values
alignment_type alignment Align_edges: indicates that the components in the table are aligned according to boundaries. Align_contents: Indicates that components in the TableLayout are aligned by margin.
column_count The number of columns You can set integer values directly or refer to an INTEGER resource.
row_count The number of rows You can set integer values directly or refer to an INTEGER resource.
orientation An orientation Horizontal: indicates a horizontal layout. Vertical: indicates the vertical layout.

2. Use of TableLayout

2.1. Routine use

1) Create TableLayout code in the XML file as follows:

    <TableLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#87CEEB"
        ohos:center_in_parent="true"
        ohos:padding="8vp">

    </TableLayout>
Copy the code

2) add the following component code to the TableLayout layout:

    <TableLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#87CEEB"
        ohos:center_in_parent="true"
        ohos:padding="8vp">
        <Text
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:shape_bottom_bg"
            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:shape_bottom_bg"
            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:shape_bottom_bg"
            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:shape_bottom_bg"
            ohos:margin="8vp"
            ohos:text="4"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
    </TableLayout>
Copy the code

The running results are as follows:

2.2 advanced use of TableLayout layout

As you can see in the above example, a TableLayout defaults to one column with multiple rows. Now let’s look at the other properties of the table.

2.2.1. Set the number of rows and columns

We set the number of rows and columns for the TableLayout using row_count and column_COUNT. The code is as follows:

<TableLayout
    ...
    ohos:row_count="2"
    ohos:column_count="2">
Copy the code

The running results are as follows:

Note: the TableLayout will display all the child controls, such as in the example above. If you set row_count to 1, it will display 2 rows and 2 columns instead of 1 row and 2 columns.

2.2.2. Set the alignment

TableLayout provides two alignment methods, one is edge alignment (algin_contents) and one is edge alignment (algin_edges). Margin alignment is the default. Let’s take a look at the advantages of these two alignments.

1. Align the margins

The effect is as follows:

The code is as follows:

<TableLayout ohos:height="match_parent" ohos:width="match_parent" ohos:alignment_type="align_contents" ohos:background_element="#87CEEB" ohos:center_in_parent="true" ohos:column_count="3" ohos:padding="8vp"> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="8vp" ohos:padding="8vp" ohos:text="1" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="16vp" ohos:padding="8vp" ohos:text="2"  ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="32vp" ohos:padding="8vp" ohos:text="3" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="32vp" ohos:padding="8vp" ohos:text="4" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="16vp" ohos:padding="8vp" ohos:text="5" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="8vp" ohos:padding="8vp" ohos:text="6" ohos:text_alignment="center" ohos:text_size="20fp"/> </TableLayout>Copy the code

2. Align borders

Based on the margin alignment code above, change the alignment of the table to border alignment. The code is as follows:

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

    ...
        
</TableLayout>

Copy the code

Border alignment looks like this:

Note: border alignment is done in line and column units. In this example, the alignment baseline for the first line is the child control with the highest top_margin value, control 3, whose top_margin value is 32vp. Similarly, take the second column as an example, its alignment baseline is the child control with the highest right_margin+left_margin value, which is control 5, and its value is 32VP +16vp.

2.3. Use code to set the row and column properties of child components

The combined cells of the table are enabled by setting the column and column properties of the child components. The implementation effect is as follows:

Private void testTableLayout(){Component Component = findComponentById(resourcetable.id_text_one); private void testTableLayout(){Component Component = findComponentById(resourcetable.id_text_one); TableLayout.LayoutConfig config = new TableLayout.LayoutConfig(); config.columnSpec = TableLayout.specification(TableLayout.DEFAULT,2,TableLayout.Alignment.ALIGNMENT_FILL); config.rowSpec = TableLayout.specification(TableLayout.DEFAULT,2,TableLayout.Alignment.ALIGNMENT_FILL); component.setLayoutConfig(config); } XML code:  <TableLayout ohos:height="match_parent" ohos:width="match_parent" ohos:alignment_type="align_edges" ohos:background_element="#87CEEB" ohos:center_in_parent="true" ohos:row_count="3" ohos:column_count="3"> <Text ohos:id="$+id:text_one" ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="16vp" ohos:padding="8vp" ohos:text="1" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="16vp" ohos:padding="8vp" ohos:text="2" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="16vp" ohos:padding="8vp" ohos:text="3"  ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="16vp" ohos:padding="8vp" ohos:text="4" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="16vp" ohos:padding="8vp" ohos:text="5" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:margin="16vp" ohos:padding="8vp" ohos:text="6" ohos:text_alignment="center" ohos:text_size="20fp"/> </TableLayout>Copy the code

The above example uses Java code to set the column and column properties of the child component. Using the TableLayout. Alignment. ALIGNMENT_FILL fill 2 row 2 column to make the child component. We can specify the width and height as follows:

        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);
Copy the code

Note: When setting the column property of the subcomponent, the number of remaining rows and columns on the table must be greater than or equal to the number of rows and columns set for the subcomponent.

2.4 summary

In this section we focus on the common XML attributes of the TableLayout, including alginment_type, ROW_count, column_count, and orientation. We then talked about the general use of the TableLayout, then set the number of rows and columns in the table and set the alignment. There are two alignment methods, one is edge alignment (algin_contents) and the other is edge alignment (algin_edges). The default is edge alignment. Finally, we used Java code to set the column and column properties of the child component. Need to be aware of is the use of a TableLayout. Config object to set up the procession, through the TableLayout. Specification () to set the attribute values, can let its fill or set a fixed size.

Thinking summary

  1. What are the common XML attributes on the table?
  2. What are the TableLayout alignment methods? How do I set the number of rows and columns?
  3. How do I use Java code to set the row and column properties of a child component?
  4. Can a TableLayout child be a container layout, such as DirectionalLayout? Does the size of the child control conform to a table arrangement?