20.HarmonyOS App(JAVA)表格布局Layout使用方法-编程知识

ability_main.xml，实现计算器键盘按钮

<?xml version="1.0" encoding="utf-8"?>
<TableLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:row_count="6"ohos:column_count="4"><Buttonohos: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"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "7"ohos:background_element="#FF7BA4CF"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "8"ohos:background_element="#FF7BA4CF"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "9"ohos:background_element="#FF7BA4CF"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "/"ohos:background_element="#FF7BA4CF"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "4"ohos:background_element="#FF59EC23"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "5"ohos:background_element="#FF59EC23"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "6"ohos:background_element="#FF59EC23"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "*"ohos:background_element="#FF59EC23"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "1"ohos:background_element="#FF7BA4CF"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "2"ohos:background_element="#FF7BA4CF"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "3"ohos:background_element="#FF7BA4CF"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "-"ohos:background_element="#FF7BA4CF"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "0"ohos:background_element="#FF59EC23"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "."ohos:background_element="#FF59EC23"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "+"ohos:background_element="#FF59EC23"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos:height="35vp"ohos:width="65vp"ohos:text = "="ohos:background_element="#FF59EC23"ohos:text_size="20fp"ohos:margin="6vp"/><Buttonohos: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 {@Overridepublic 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() {@Overridepublic void onClick(Component component) {new ToastDialog(getContext()).setText("点击了清除按钮").setAlignment(LayoutAlignment.CENTER).show();}});}@Overridepublic void onActive() {super.onActive();}@Overridepublic 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"