花粉乐分享平台宣传视频
> 华为资讯 > 华为资讯 > 鸿蒙编程 > 2.5「HarmonyOS鸿蒙开发」表格布局TableLayout(补充更新)
2.5「HarmonyOS鸿蒙开发」表格布局TableLayout(补充更新)
来源:RubyHan
2022-07-01 12:24:27
1016
管理
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加油站

1
点赞
赏礼
赏钱
0
收藏
免责声明:本文仅代表作者个人观点,与花粉乐分享无关。其原创性以及文中陈述文字和内容未经本网证实,对本文以及其中全部或者 部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
凡本网注明 “来源:XXX(非花粉乐分享)”的作品,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对 其真实性负责。
如因作品内容、版权和其它问题需要同本网联系的,请在一周内进行,以便我们及时处理。
QQ:2443165046 邮箱:info@hflfx.com
关于作者
华为绍天(采蜜高手)
文章
540
主题
0
关注
0
粉丝
0
点击领取今天的签到奖励!
签到排行
随手拍
54个圈友 0个话题
华为手机随手拍,记录生活点滴之美好
华为P30pro
51个圈友 0个话题
这里是华为P30pro手机交流圈,欢迎华为P30pro用户进群交流
体验官
60个圈友 2个话题
华为花粉体验官,体验官专属的交流群
登录后查看您创建的圈子
登录后查看您创建的圈子
所有圈子
杭州互联网违法和不良信息举报平台 网络110报警服务 浙ICP备17046585号
1
0
分享
请选择要切换的马甲:

个人中心

每日签到

我的消息

内容搜索