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属性见下表：
| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
|---|---|---|---|---|
| alignment_type | 对齐方式 | align_edges | 表示TableLayout内的组件按边界对齐。 | ohos:alignment_type="align_edges" |
| 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" |
| vertical | 表示垂直方向布局。 | ohos:orientation="vertical" |
