2.5「HarmonyOS鸿蒙开发」表格布局TableLayout(补充更新)
2.5【
HarmonyOS鸿蒙开发】表格布局TableLayout
作者：韩茹
公司：程序咖（北京）科技有限公司
鸿蒙巴士专栏作家
TableLayout使用表格的方式划分子组件。
一、支持的XML属性 TableLayout的共有XML属性继承自：Component
| 属性名称
| 中文描述
| 取值
| 取值说明
| 使用案例
|
| id
| 控件identity，用以识别不同控件对象，每个控件唯一
| integer类型
| 仅可用于配置控件的id。
| ohos:id="$ id:component_id"
|
| theme
| 样式
| 引用
| 仅可引用pattern资源。
| ohos:theme="$pattern:button_pattern"
|
| width
| 宽度，必填项
| float类型，match_parent，match_content
|
| ohos:width="20" ohos:width="10vp" ohos:width="$float:size_value"
|
| height
| 高度，必填项
| float类型，match_parent，match_content
|
| ohos:height="20" ohos:height="20vp" ohos:height="$float:size_value"
|
| min_width
| 最小宽度
| float类型
|
| ohos:min_width="20" ohos:min_width="20vp" ohos:min_width="$float:size_value"
|
| min_height
| 最小高度
| float类型
|
| ohos:min_height="20" ohos:min_height="20vp" ohos:min_height="$float:size_value"
|
| alpha
| 透明度
| float类型
| 取值范围在0~1。
| ohos:alpha="0.86" ohos:alpha="$float:value"
|
| enabled
| 是否启用
| boolean类型
|
| ohos:enabled="true" ohos:enabled="$boolean:true"
|
| visibility
| 可见性
| visible，invisible，hide
|
| ohos:visibility="visible"
|
| padding
| 内间距
| float类型
|
|
|
| margin
| 外边距
| float类型
|
|
|
TableLayout的自有XML属性见下表：
表1 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"
|
二、使用表格布局2.1 默认一列多行 TableLayout默认一列多行。
我们先修改一下布局文件，项目/entry/src/main/resources/base/layout/下的ability_main_layout文件。
删除原来的代码，创建TableLayout：
<?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:background_element="#87CEEB" ohos:layout_alignment="horizontal_center" ohos:padding="8vp"></TableLayout> 然后在里面添加4个Text子控件：
<?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: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> 效果图：
2.2 设置多行多列 设置行数和列数：
<TableLayout ... ohos:row_count="2" ohos:column_count="2"> 只需要在TableLayout标签中设置好行数和列数，其他的内容不用改，效果图：
2.3 设置对齐方式 在XML中设置对齐方式，以”align_contents“为例：
<TableLayout ... ohos:alignment_type="align_contents"> ...</TableLayout> 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提供两种对齐方式，边距对齐“align_contents”、边界对齐“align_edges”，默认为边距对齐。--> <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> 效果图：
如上代码，将TableLayout的对齐方式修改为边界对齐。
<TableLayout ... ohos:alignment_type="align_edges"> ... </TableLayout> 效果图：
2.4 设置子组件的行列属性(合并单元格) TableLayout的合并单元格的功能可以通过设置子组件的行列属性来实现。
现在layout目录下新建一个xml布局文件：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> graphic目录下的背景文件：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> 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> 预览效果：
在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.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)); // 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。 // TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。 tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2); tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2); text1.setLayoutConfig(tlc); } // vp转为px private int vp2px(float vp) { return AttrHelper.vp2px(vp, getContext()); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }} 注意：在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
效果图：
// 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。// 第一个参数int start：表示元素在表格布局中的起始位置。值不能小于0。// 第二个参数int size：表示元素大小。值不能小于0。public static TableLayout.Specification specification(int start, int size) // 第三个参数int alignment：指示元素的对齐模式。ALIGN_EDGES表示边界对齐；ALIGN_CONTENTS表示页边距对齐。public static TableLayout.Specification specification(int start, int size, int alignment) 如果我们尝试再加一个参数：
public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_demo2_table_layout); //获取表格布局对象// 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)); // 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。 // TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。 // tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2); // tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2); // 第三个参数表示对齐方式： // ALIGN_EDGES表示边界对齐；ALIGN_CONTENTS表示页边距对齐。 // 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); } ...} 效果：
再改一下：
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); 效果图：
三、写个例子 我们设计一个简易计算器的界面：
首先我们先创建一个xml布局文件：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="删除" ohos:text_size="30fp" /><!-- 第三行：789/--> <Button ohos:id="$ id:btn7" ohos:height="100vp" ohos:width="80vp" ohos:background_element="#3A3C39" ohos:text="7" 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="/"/> <!-- 第四行：456X--> <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"/> <!-- 第五行：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="-"/> <!-- 第六行：.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> 然后我们在slice下新建一个AbilitySlice文件：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(); // 调整页面布局 TableLayout.LayoutConfig tlc1 = new TableLayout.LayoutConfig(vp2px(80), vp2px(80)); // 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。 // TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。 // 第三个参数表示对齐方式： // ALIGN_EDGES表示边界对齐；ALIGN_CONTENTS表示页边距对齐。 // 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转为px private int vp2px(float vp) { return AttrHelper.vp2px(vp, getContext()); } private void initComponent(){ textShow = (Text) findComponentById(ResourceTable.Id_text_show); btn_o = (Button) findComponentById(ResourceTable.Id_btn_o); }} 修改一下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()); }} 然后运行即可。
花粉社群VIP加油站
恭喜你，领取到一张面值 0 元的优惠券
只有购买全集内容 0.00 元，才可抵扣使用。
有效期截止于：2020-12-12 23:59
是否立即使用？
