20.HarmonyOS App(JAVA)表格布局Layout使用方法

ability_main.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:row_count="6"
    ohos:column_count="4"
   >
    <Button
        ohos:id="$+id:btn_table"
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "表格布局_计算器键盘"
        ohos:background_element="#FF374FF1"
        ohos:text_size="20fp"
        ohos:text_color="#FFFDFCFC"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "7"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "8"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "9"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "/"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />

    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "4"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "5"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "6"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "*"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "1"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "2"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "3"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "-"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "0"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "."
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "+"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "="
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:id="$+id:btn_clear"
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "clear"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />

</TableLayout>

MainAbilitySlice.java

点击按钮，toast消息提示,设置按钮控件跨列效果

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.TableLayout;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;

import static ohos.agp.components.TableLayout.*;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Button button_table = (Button) findComponentById(ResourceTable.Id_btn_table);
        Button button_clear = (Button) findComponentById(ResourceTable.Id_btn_clear);
        TableLayout.LayoutConfig config = new TableLayout.LayoutConfig(TableLayout.specification(0,1),TableLayout.specification(0,4));
        //TableLayout.specification(4,1),行规范
        //TableLayout.specification(0,4),列规范
        //设置宽度
        config.width = button_table.getWidth()*4 + button_table.getMarginLeft()*6;
        //设置高度
        config.height = button_table.getHeight();

        //设置外边框
        config.setMargins(button_table.getMarginLeft(),button_table.getMarginTop(),button_table.getMarginRight(),button_table.getMarginBottom());
        button_table.setLayoutConfig(config);


        TableLayout.LayoutConfig config2 = new TableLayout.LayoutConfig(TableLayout.specification(5,1),TableLayout.specification(0,4));
        //TableLayout.specification(4,1),行规范
        //TableLayout.specification(0,4),列规范
        //设置宽度
        config2.width = button_clear.getWidth()*4 + button_clear.getMarginLeft()*6;
        //设置高度
        config2.height = button_clear.getHeight();

        //设置外边框
        config2.setMargins(button_clear.getMarginLeft(),button_clear.getMarginTop(),button_clear.getMarginRight(),button_clear.getMarginBottom());
        button_clear.setLayoutConfig(config2);

        button_clear.setClickedListener(new ClickedListener() {
            @Override
            public void onClick(Component component) {
                new ToastDialog(getContext())
                        .setText("点击了清除按钮")
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();
            }
        });


    }

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

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

TableLayout的自有XML属性见下表：

表1 TableLayout的自有XML属性
属性名称	中文描述	取值	取值说明	使用案例
alignment_type	对齐方式	align_edges	表示TableLayout内的组件按边界对齐。	ohos:alignment_type="align_edges"
alignment_type	对齐方式	align_contents	表示TableLayout内的组件按边距对齐。	ohos:alignment_type="align_contents"
column_count	列数	integer类型	可以直接设置整型数值，也可以引用integer资源。	ohos:column_count="3" ohos:column_count="$integer:count"
row_count	行数	integer类型	可以直接设置整型数值，也可以引用integer资源。	ohos:row_count="2" ohos:row_count="$integer:count"
orientation	排列方向	horizontal	表示水平方向布局。	ohos:orientation="horizontal"
orientation	排列方向	vertical	表示垂直方向布局。	ohos:orientation="vertical"