鸿蒙开发之表格布局(TableLayout)
一、描述
表格布局可以实现行列式摆放组件 ， 也就是说可以把组件放在不同的单元格内进行布局呈现 。
它既可以通过xml代码实现也可以通过java代码实现 ， 我们这里主要介绍xml实现方式。
二、表格布局重要的属性
我们知道html重点表格的框架的基本样式或结构也是通过table的基本属性实现的 ， 然而在鸿蒙中也不例外。下面列出来鸿蒙表格布局的重要属性。
| 属性名称 | 取值 | 描述 |
|
alignment_type 对齐方式 |
align_edges | 表示布局里的各个组件按边界对齐 |
| align_contents | 表示布局里的组件按边距对齐 | |
| column_count | 数值 | 规定表格布局的列数 |
| row_count | 数值 | 规定表格布局的行数 |
|
orientation 排列方式 |
horizontal | 规定表格水平排列 |
| vertical | 规定表格垂直排列 |
注意：排列方式所指对象是表格单元或者内容按照规定的排列顺序排列。如果排列方式是垂直 则先排列垂直方向在排列水平方向 否则 反之。
三、完整案例
话不多说 先给个完整代码 ：
<?xml version="1.0" encoding="utf-8"?>
<TableLayoutohos:height="match_content"ohos:width="match_content"ohos:orientation="vertical"ohos:row_count="3"ohos:column_count="2"xmlns:ohos="http://schemas.huawei.com/res/ohos"><Buttonohos:height="match_content"ohos:width="match_parent"ohos:text_size="30vp"ohos:text="按钮"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:text_color="#FFFFFF"ohos:background_element="black"/><Buttonohos:height="match_content"ohos:width="match_parent"ohos:text_size="30vp"ohos:text="按钮"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:text_color="#FFFFFF"ohos:background_element="black"/><Buttonohos:height="match_content"ohos:width="match_parent"ohos:text_size="30vp"ohos:text="按钮"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:text_color="#FFFFFF"ohos:background_element="black"/><Buttonohos:height="match_content"ohos:width="match_parent"ohos:text_size="30vp"ohos:text="按钮"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:text_color="#FFFFFF"ohos:background_element="black"/><Buttonohos:height="match_content"ohos:width="match_parent"ohos:text_size="30vp"ohos:text="按钮"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:text_color="#FFFFFF"ohos:background_element="black"/><Buttonohos:height="match_content"ohos:width="match_parent"ohos:text_size="30vp"ohos:text="按钮"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:text_color="#FFFFFF"ohos:background_element="black"/></TableLayout>效果图：
四、排列方式的区别：
如果排列方式是水平排列 ， 即：orientation ： horizontal
<?xml version="1.0" encoding="utf-8"?>
<TableLayoutohos:height="match_content"ohos:width="match_content"ohos:orientation="horizontal"ohos:row_count="3"ohos:column_count="2"xmlns:ohos="http://schemas.huawei.com/res/ohos"><Buttonohos:height="match_content"ohos:width="match_parent"ohos:text_size="30vp"ohos:text="按钮"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:text_color="#FFFFFF"ohos:background_element="black"/><Buttonohos:height="match_content"ohos:width="match_parent"ohos:text_size="30vp"ohos:text="按钮"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:text_color="#FFFFFF"ohos:background_element="black"/></TableLayout>效果：
如果排列方式是水平排列 ， 即：orientation ： vertical
<?xml version="1.0" encoding="utf-8"?>
<TableLayoutohos:height="match_content"ohos:width="match_content"ohos:orientation="vertical"ohos:row_count="3"ohos:column_count="2"xmlns:ohos="http://schemas.huawei.com/res/ohos"><Buttonohos:height="match_content"ohos:width="match_parent"ohos:text_size="30vp"ohos:text="按钮"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:text_color="#FFFFFF"ohos:background_element="black"/><Buttonohos:height="match_content"ohos:width="match_parent"ohos:text_size="30vp"ohos:text="按钮"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:text_color="#FFFFFF"ohos:background_element="black"/></TableLayout>效果：
鸿蒙开发之表格布局(TableLayout)相关推荐
- android 动态生成tablelayout,Android 表格布局TableLayout示例详解
一.表格布局 TableLayout 表格布局TableLayout以行列的形式管理子元素,每一行是一个TableRow布局对象,当然也可以是普通的View对象,TableRow离每放一个元素就是一列 ...
- 表格布局(TableLayout)及重要属性
TableLayout属性: android:collapseColumns:将TableLayout里面指定的列隐藏,若有多列需要隐藏,请用逗号将需要隐藏的列序号隔开. androi ...
- 9 表格布局——TableLayout
学完了 Android 两个经典布局,是不是觉得已经可以应对大多数场景了?我记得当我学完 LinearLayout 和 RelativeLayout 之后,我觉得 UI 布局已经可以出师了,在本人从事 ...
- 【Android开发学习24】界面布局之表格布局TableLayout+TableRow
一.基础知识: TableLayout置底,TableRow在TableLayout的上面,而Button.TextView等控件就在TableRow之上, 另外,TableLayout之上也可以单独 ...
- android 底部表格布局TableLayout
添加依赖 compile 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar' 置于底部布局(最外层必须是RelativeLayout) <?xm ...
- 表格布局(tablelayout)
- TableLayout 表格布局,FrameLaout 帧布局 ，AbsoluteLayout绝对布局的分析
这三个布局就放在一起来写了他们用的比较少,不过为了写这遍 博客我换特意去复习了下, 第一个表格布局TableLayout 表格布局顾名思义 就是与表格类似,以行,列形式来管理其中的组件的, 它是< ...
- 常见界面布局之TableLayout(表格布局)
1.什么是TableLayout(表格布局) TableLayout (表格布局)采用行.列的形式来管理控件,它不需要明确声明包含多少行.多少列,面是通过在TableLayout布局中添加TableR ...
- android表格布局bottom,Android基础_2 Activity线性布局和表格布局
在activity的布局中,线性布局和表格布局是最简单的,这次分别从线性布局,表格布局以及线性布局和表格混合布局做了实验,实验中只需要编写 相应的xml的代码,java代码不需要更改,因为我们这里只是 ...
最新文章
- Python快速学习02：基本数据类型 序列
- cic曲线是什么_贝塞尔曲线基本用法
- 简单定制自己的Centos系统（第三版）
- mysql 优化rand_mysql优化--巧用rand(),with rollup,help__update2014.1.13
- dump mysql database,Mysql Database 逻辑备份： mysqldump
- 2018蓝桥杯A组：星期一（年份判断）
- 全网首发：彻底搞清楚了下划线的规则
- 计算机网络的产生与发展可分为哪四个阶段,计算机网络形成与发展大致分为如下4个阶段...
- 希腊字母在数学或物理中代表的意思各是什么
- 如何做一场视频投票活动
- Unity打造科技风智慧城市夜景教程
- c# 去掉字符串最后一个逗号
- D3.js 绘制立体柱状图
- CallKit详解(来电提醒+骚扰拦截)
- java 跳格子_HDU 1208 跳格子题（很经典，可以有很多变形）
- c#量化交易_量化交易从入门到放弃（1）
- CCF C³活动第二期主题“智能家居”，与CTO聚首小米科技园！
- 2020年全球及中国动物模型（模式动物）行业发展现状及竞争格局分析，行业增速较快，发展前景良好「图」
- 6491. 【GDOI2020模拟03.04】铺路
- 计算机监控盘柜采用什么接地,dcs机柜是什么 dcs机柜接地规范