2.5 HarmonyOS developed the TableLayout

Author: Han Ru

Company: Program Ka (Beijing) Technology Co., LTD

Hong Meng Bus columnist

TableLayout Uses a table to delimit molecular components.

Supported XML attributes

The common XML attributes of the table inherit from: Component

The attribute name	Product description	The values	The values that	Use case
id	Control identity, used to identify different control objects, each control unique	The integer types	Can only be used to configure the ID of the control.	ohos:id=”$+id:component_id”
theme	style	reference	Only pattern resources can be referenced.	ohos:theme=”$pattern:button_pattern”
width	Width is mandatory	Type float, match_parent, match_content		ohos:width=”20″ ohos:width=”10vp” ohos:width=”$float:size_value”
height	Height is mandatory	Type float, match_parent, match_content		ohos:height=”20″ ohos:height=”20vp” ohos:height=”$float:size_value”
min_width	Minimum width	A float		ohos:min_width=”20″ ohos:min_width=”20vp” ohos:min_width=”$float:size_value”
min_height	The minimum height	A float		ohos:min_height=”20″ ohos:min_height=”20vp” ohos:min_height=”$float:size_value”
alpha	transparency	A float	The value ranges from 0 to 1.	Ohos: alpha = “0.86” ohos:alpha=”$float:value”
enabled	Whether to enable	Boolean type		ohos:enabled=”true” ohos:enabled=”$boolean:true”
visibility	visibility	Visible, invisible, hide		ohos:visibility=”visible”
padding	The distance between	A float
margin	From the outside	A float

Table ELayout’s own XML attributes are as follows:

Table 1 The own XML attributes of the table

The attribute name	Product description	The values	The values that	Use case
alignment_type	alignment	align_edges	Indicates that the components in the table are aligned by boundaries.	ohos:alignment_type=”align_edges”
		align_contents	Indicates that the components in the table are aligned by margins.	ohos:alignment_type=”align_contents”
column_count	The number of columns	The integer types	You can set integer values directly or refer to an INTEGER resource.	ohos:column_count=”3″ ohos:column_count=”$integer:count”
row_count	The number of rows	The integer types	You can set integer values directly or refer to an INTEGER resource.	ohos:row_count=”2″ ohos:row_count=”$integer:count”
orientation	An orientation	horizontal	Indicates a horizontal layout.	ohos:orientation=”horizontal”
		vertical	Indicates the vertical layout.	ohos:orientation=”vertical”

Use a table layout

2.1 By default, one column with multiple rows

TableLayout defaults to one column with multiple rows.

Let’s revise the layout file, project/entry/SRC/main/resources/base/layout/ability_main_layout file.

Delete the original code and create a TableLayout:


      
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:layout_alignment="horizontal_center"
    ohos:padding="8vp">
</TableLayout>
Copy the code

Then add four Text child controls inside:


      
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:layout_alignment="horizontal_center"
    ohos:padding="8vp">

    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="2"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="3"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</TableLayout>
Copy the code

Effect:

2.2 Setting multiple Rows and Columns

Set the number of rows and columns:

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

You only need to set the number of rows and columns in the TableLayout tag. The other contents need not be changed.

2.3 Setting the Alignment Mode

Set alignment in XML, using “align_contents” as an example:

<TableLayout
    .
    ohos:alignment_type="align_contents">.</TableLayout>
Copy the code

Sample code for demo1_table_layout.xml:

<? 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="#22AA0000"
    ohos:column_count="3"
    ohos:padding="8vp"> <! TableLayout provides two alignment methods, margin alignment "align_contents" and border alignment "align_edges", the default is margin alignment. --> <Text ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        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="#AA00AA"
        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="#AA00AA"
        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="#AA00AA"
        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="#AA00AA"
        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="#AA00AA"
        ohos:margin="8vp"
        ohos:padding="8vp"
        ohos:text="6"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>
</TableLayout>
Copy the code

Effect:

In the code above, change the alignment of the table to border alignment.

<TableLayout
    ...
    ohos:alignment_type="align_edges">... </TableLayout>Copy the code

Effect:

2.4 Setting row and Column properties for child Components (Merging cells)

The combined cells of the table are enabled by setting the column and column properties of the child components.

Now create a new XML layout file in the Layout directory: demo2_table_layout.xml

<? 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>
Copy the code

Background file in graphic directory: layout_borderline.xml

<? 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>
Copy the code

table_text_bg_element.xml

<? 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>
Copy the code

Preview effect:

Set the column and column property of the child component in Java code as follows:

package com.example.hanrutablelayout.slice;

import com.example.hanrutablelayout.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AttrHelper;
import ohos.agp.components.TableLayout;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo2_table_layout);

        Text text1 = (Text)findComponentById(ResourceTable.Id_text_one);
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));
        // Set table size: Returns an instance of a return specification based on the starting position of the element in the table layout and the size of the element.
        // 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.
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);


        text1.setLayoutConfig(tlc);



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

    @Override
    public void onActive(a) {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent); }}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.

Effect:

// Set table size: Returns an instance of a return specification based on the starting position of the element in the table layout and the size of the element.
// The first argument int start: indicates the starting position of the element in the table layout. The value cannot be less than 0.
// The second parameter int size: indicates the size of the element. The value cannot be less than 0.

public static TableLayout.Specification specification(int start, int size)
  
// The third parameter int alignment indicates the alignment mode of the element. ALIGN_EDGES indicates border alignment; ALIGN_CONTENTS indicates page margin alignment.
public static TableLayout.Specification specification(int start, int size, int alignment) 
Copy the code

If we try to add another argument:


    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo2_table_layout);

        // Get the table layout object
// TableLayout tableLayout1 = (TableLayout)findComponentById(ResourceTable.Id_tablelayout1);

// tablelayout. CellSpan CellSpan = new tablelayout. CellSpan(1,3);

        Text text1 = (Text)findComponentById(ResourceTable.Id_text_one);
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));
        // Set table size: Returns an instance of a return specification based on the starting position of the element in the table layout and the size of the element.
        // 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.
        // tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        // tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);

        // The third argument indicates the alignment:
        // ALIGN_EDGES indicates border alignment; ALIGN_CONTENTS indicates page margin alignment.
        / / TableLayout. Alignment. ALIGNMENT_FILL,
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_BOTTOM); text1.setLayoutConfig(tlc); }... }Copy the code

Effect:

Change it again:

        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        text1.setLayoutConfig(tlc);
Copy the code

Effect:

Write an example

We designed a simple calculator interface:

Let’s start by creating an XML layout file: demo3_calculator.xml

<? 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:orientation="horizontal"
    ohos:row_count="4"
    ohos:column_count="4"
    ohos:alignment_type="align_edges"
    ohos:id="$+id:tablelayout1"
    ohos:background_element="# 000000"> <! --> <Text ohos:id="$+id:text_show"
        ohos:height="80vp"
        ohos:width="80vp"
        ohos:background_element="#EEEEEE"
        ohos:margin="5vp"
        ohos:text_alignment="right|vertical_center"
        ohos:text_size="60fp"
        ohos:padding="5vp"
        ohos:text_color="# 000000"
        ohos:text="0"/ > <! <Button ohos:id="$+id:btn_o"
        ohos:height="80vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:margin="5vp"
        ohos:text_color="# 000000"
        />
    <Button
        ohos:id="$+id:btn_delete"
        ohos:height="80vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:margin="5vp"
        ohos:text_color="#ffffff"
        ohos:text="Delete"
        ohos:text_size="30fp"/ > <! -- Line 3:789/-->
    <Button
        ohos:id="$+id:btn7"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="Seven"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn8"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="8"/>
    <Button
        ohos:id="$+id:btn9"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="9"/>
    <Button
        ohos:id="$+id:btn_div"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="/"/ > <! <Button ohos:id="$+id:btn4"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="4"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn5"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="5"/>
    <Button
        ohos:id="$+id:btn6"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="6"/>
    <Button
        ohos:id="$+id:btn_mul"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="X"/ > <! -- Line 5:123- -->
    <Button
        ohos:id="$+id:btn1"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="1"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn2"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="2"/>
    <Button
        ohos:id="$+id:btn3"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="3"/>
    <Button
        ohos:id="$+id:btn_sub"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="-"/ > <! -- Line 6:. 0=+ -->
    <Button
        ohos:id="$+id:btn_dot"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="."
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn0"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="0"/>
    <Button
        ohos:id="$+id:btn_equ"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="="/>
    <Button
        ohos:id="$+id:btn_add"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="+"/>
</TableLayout>
Copy the code

Then we create a new AbilitySlice under slice file: CalculatorAbilitySlice. Java

package com.example.hanrutablelayout.slice;

import com.example.hanrutablelayout.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AttrHelper;
import ohos.agp.components.Button;
import ohos.agp.components.TableLayout;
import ohos.agp.components.Text;

public class CalculatorAbilitySlice extends AbilitySlice {
    private Text textShow;
    private Button btn_o;
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo3_calculator);
        initComponent();
        // Adjust the page layout
        TableLayout.LayoutConfig tlc1 = new TableLayout.LayoutConfig(vp2px(80), vp2px(80));
        // Set table size: Returns an instance of a return specification based on the starting position of the element in the table layout and the size of the element.
        // 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.
        // The third argument indicates the alignment:
        // ALIGN_EDGES indicates border alignment; ALIGN_CONTENTS indicates page margin alignment.
        / / TableLayout. Alignment. ALIGNMENT_FILL,
        tlc1.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 4, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc1.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1, TableLayout.Alignment.ALIGNMENT_FILL);
        textShow.setLayoutConfig(tlc1);

        TableLayout.LayoutConfig tlc2 = new TableLayout.LayoutConfig(vp2px(80), vp2px(80));
        tlc2.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 3, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc2.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1, TableLayout.Alignment.ALIGNMENT_FILL);
        btn_o.setLayoutConfig(tlc2);





    }
    // vp becomes px
    private int vp2px(float vp) {
        return AttrHelper.vp2px(vp, getContext());
    }
    private void initComponent(a){ textShow = (Text) findComponentById(ResourceTable.Id_text_show); btn_o = (Button) findComponentById(ResourceTable.Id_btn_o); }}Copy the code

Modify MainAbility:

package com.example.hanrutablelayout;

import com.example.hanrutablelayout.slice.CalculatorAbilitySlice;
import com.example.hanrutablelayout.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // super.setMainRoute(MainAbilitySlice.class.getName());
        super.setMainRoute(CalculatorAbilitySlice.class.getName()); }}Copy the code

And then run it.

2.5 HarmonyOS developed the TableLayout

Supported XML attributes

Use a table layout

2.1 By default, one column with multiple rows

2.2 Setting multiple Rows and Columns

2.3 Setting the Alignment Mode

2.4 Setting row and Column properties for child Components (Merging cells)

Write an example

Related Posts

Effective practice of grayscale monitoring of front-end quality

JS easy to wrong point knowledge accumulation

React Expiration Time