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
是否立即使用?