TableLayout(表格布局)基础知识点详解

前面我们已经学习了平时实际开发中用得较多的线性布局(LinearLayout)与相对布局(RelativeLayout), 其实学完这两个基本就够用了,笔者在实际开发中用得比较多的也是这两个,当然作为一个好学的程序猿, 都是喜欢刨根问题的,所以虽说用得不多,但是还是有必要学习一下基本的用法的,说不定哪一天能用得上呢! 你说是吧,学多点东西没什么的,又不吃亏!好了,扯淡就扯到这里,开始这一节的学习吧,这一节我们会学习 Android中的第三个布局:TableLayout(表格布局)!

1.本节学习路线图

路线图分析: 从上面的路线图,可以看出TableLayout的用法还是很简单的,无非就是确定表格的行数,以及使用那三个属性来设置每一行中的第某列的元素隐藏,拉伸,或者收缩即可!

2.TableLayout的介绍

相信学过HTML的朋友都知道,我们可以通过< table >< tr >< td >就可以生成一个HTML的表格, 而Android中也允许我们使用表格的方式来排列组件,就是行与列的方式,就说我们这节的TableLayout! 但却不像我们后面会讲到的Android 4.0后引入的GridLayout(网格)布局一样,直接就可以设置多少行与多少列!

3.如何确定行数与列数

①如果我们直接往TableLayout中添加组件的话,那么这个组件将占满一行!!!

②如果我们想一行上有多个组件的话,就要添加一个TableRow的容器,把组件都丢到里面!

③tablerow中的组件个数就决定了该行有多少列,而列的宽度由该列中最宽的单元格决定

④tablerow的layout_width属性,默认是fill_parent的,我们自己设置成其他的值也不会生效!!!但是layout_height默认是wrapten——content的,我们却可以自己设置大小!

⑤整个表格布局的宽度取决于父容器的宽度(占满父容器本身)

⑥有多少行就要自己数啦,一个tablerow一行,一个单独的组件也一行!多少列则是看tableRow中的组件个数,组件最多的就是TableLayout的列数

4.三个常用属性

android:collapseColumns:设置需要被隐藏的列的序号
android:shrinkColumns:设置允许被收缩的列的列序号
android:stretchColumns:设置运行被拉伸的列的列序号

以上这三个属性的列号都是从0开始算的,比如shrinkColunmns = "2",对应的是第三列!
可以设置多个,用逗号隔开比如"0,2",如果是所有列都生效,则用"*"号即可
除了这三个常用属性,还有两个属性,分别就是跳格子以及合并单元格,这和HTML中的Table类似:

android:layout_column="2":表示的就是跳过第二个,直接显示到第三个格子处,从1开始算的!
android:layout_span="4":表示合并4个单元格,也就说这个组件占4个单元格

属性使用示例:

①collapseColumns(隐藏列)

流程:在TableRow中定义5个按钮后,接着在最外层的TableLayout中添加以下属性: android:collapseColumns = "0,2",就是隐藏第一与第三列,代码如下:

<TableLayout
 android:id="@+id/TableLayout2"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:collapseColumns="0,2" > 

 <TableRow> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="one" /> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="two" /> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="three" /> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="four" /> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="five" />
 </TableRow>
</TableLayout>

运行效果图:

②stretchColumns(拉伸列)

流程:在TableLayout中设置了四个按钮,接着在最外层的TableLayout中添加以下属性: android:stretchColumns = "1"

设置第二列为可拉伸列,让该列填满这一行所有的剩余空间,代码如下:

<TableLayout
 android:id="@+id/TableLayout2"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:stretchColumns="1" > 

 <TableRow> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="one" /> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="two" /> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="three" /> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="four" />
 </TableRow>
</TableLayout> 

运行效果图:

③shrinkColumns(收缩列)

步骤:这里为了演示出效果,设置了5个按钮和一个文本框,在最外层的TableLayout中添加以下属性: android:shrinkColumns = "1"

设置第二个列为可收缩列,代码如下:

<TableLayout
 android:id="@+id/TableLayout2"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:shrinkColumns="1" > 

 <TableRow> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="one" /> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="two" /> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="three" /> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="four" /> 

  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="five" /> 

  <TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="文本XX" />
 </TableRow>
</TableLayout>

运行截图:

从图中我们可以看到two这个按钮被挤压成条条状,这个就是收缩,为了保证表格能适应父容器的宽度!至于另外两个属性就不讲解了,用法和HTML相同!有兴趣的可以研究下!

5.使用实例

使用TableLayout来完成简单的登录界面,运行效果图如下:

流程解析:

①调用gravity属性,设置为center_vertical,让布局里面的组件在竖直方向上居中

②将TableLayout中的第一和第四列设置为可拉伸

③在每个TableRow中添加两个TextView,用于拉伸填满该行,这样可以让表格水平居中

android:stretchColumns="0,3" 设置为0.3,是为了让两边都充满,那么中间部分就可以居中了

详细代码如下:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/TableLayout1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity"
 android:stretchColumns="0,3"
 android:gravity="center_vertical"
 android:background="#66FF66"
 > 

 <TableRow>
  <TextView />
  <TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="用户名:"/>
  <EditText
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:minWidth="150dp"/>
  <TextView />
 </TableRow> 

 <TableRow>
  <TextView />
  <TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="密 码:"
  />
  <EditText
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:minWidth="150dp"
  />
  <TextView />
 </TableRow> 

 <TableRow>
  <TextView />
  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="登陆"/>
  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="退出"/>
  <TextView />
 </TableRow> 

</TableLayout>

6.发现的问题

相信大家在使用这个这TableLayout的TableRow的时候会遇到这个警告:

当然,程序还是可以运行的,不过或许你是强迫症患者,看到黄色感叹号你就不爽的话!而解决这个警告的方法也是很奇葩的:只要你的TableLayout里面有2个或以上的TableRow就可以了!

本节小结:

好的,关于Android的第三个布局:TableLayout就到这里~无非就是五个属性的使用而已,实际开发表格布局我们用的不多,知道简单的用法就可以了!感谢大家的学习和对我们的支持,如果在学习中有任何问题也可以给我们留言。

(0)

相关推荐

  • Android布局之表格布局TableLayout详解

    本文实例为大家分享了Android表格布局TableLayout的具体代码,供大家参考,具体内容如下 1.TableLayout TableLayout表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象, 当然也可以使一个View的对象 2.TableLayout的属性(全局属性) android:collapseColumns="1,2" 隐藏从0开始的索引列,列之间必须用逗号隔开1,2 android:shrinkColumns="1,2"

  • Android布局之TableLayout表格布局

    Tablelayout类以行和列的形式对控件进行管理,每一行为一个TableRow对象,或一个View控件.当为TableRow对象时,可在TableRow下添加子控件,默认情况下,每个子控件占据一列. 当为View时,该View将独占一行. 三个常用的属性 android:collapseColumns:设置需要被隐藏的列的序号 android:shrinkColumns:设置允许被收缩的列的列序号 android:stretchColumns:设置运行被拉伸的列的列序号 学习导图 (1)Ta

  • Android 表格布局TableLayout示例详解

    一.表格布局 TableLayout 表格布局TableLayout以行列的形式管理子元素,每一行是一个TableRow布局对象,当然也可以是普通的View对象,TableRow离每放一个元素就是一列,总列数由列数最多的那一行决定. 我们看一个例子: <?xml version="1.0″ encoding="utf-8″?> <TableLayout android:id="@+id/TableLayout01″ android:layout_width=

  • 详解Android TableLayout表格布局

    表格布局的标签是TableLayout,TableLayout继承了LinearLayout.所以它依然是一个线性布局. 前言: 1.TableLayout简介 2.TableLayout行列数的确定 3.TableLayout可设置的属性详解 4.一个包含4个TableLayout布局的实例及效果图 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="h

  • Android开发之TableLayout表格布局

    表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象,当然也可以是一个View的对象.TableRow可以添加子控件,每添加一个为一列. TableLayout属性: android:collapseColumns:将TableLayout里面指定的列隐藏,若有多列需要隐藏,请用逗号将需要隐藏的列序号隔开. android:stretchColumns:设置指定的列为可伸展的列,以填满剩下的多余空白空间,若有多列需要设置为可伸展,请用逗号将需要伸展的列序号隔开. android

  • TableLayout(表格布局)基础知识点详解

    前面我们已经学习了平时实际开发中用得较多的线性布局(LinearLayout)与相对布局(RelativeLayout), 其实学完这两个基本就够用了,笔者在实际开发中用得比较多的也是这两个,当然作为一个好学的程序猿, 都是喜欢刨根问题的,所以虽说用得不多,但是还是有必要学习一下基本的用法的,说不定哪一天能用得上呢! 你说是吧,学多点东西没什么的,又不吃亏!好了,扯淡就扯到这里,开始这一节的学习吧,这一节我们会学习 Android中的第三个布局:TableLayout(表格布局)! 1.本节学习

  • R语言决策基础知识点详解

    决策结构要求程序员指定要由程序评估或测试的一个或多个条件,以及如果条件被确定为真则要执行的一个或多个语句,如果条件为假则执行其他语句. 以下是在大多数编程语言中的典型决策结构的一般形式 R提供以下类型的决策语句. 单击以下链接以检查其详细信息. Sr.No. 声明和描述 1 if语句 if语句由一个布尔表达式后跟一个或多个语句组成. 2 if ... else语句 if语句后面可以有一个可选的else语句,当布尔表达式为false时执行. 3 switch语句 switch语句允许根据值列表测试

  • java二进制运算基础知识点详解

    一.二进制位运算 1. 按位与(&) 位运算实质是将参与运算的数字转换为二进制,而后逐位对应进行运算. 按位与运算为:两位全为1,结果为1,即1&1=1,1&0=0,0&1=0,0&0=0. 例如51 & 5 -> 00110011 & 00000101 = 00000001 -> 51 & 5 = 1 特殊用法: (1)与0相与可清零. (2)与1相与可保留原值,可从一个数中取某些位.例如需要取10101110中的低四位,101

  • JavaSwing基础之Layout布局相关知识详解

    一.View layout方法 首先,还是从ViewRootImpl说起,界面的绘制会触发performMeasure.performLayout方法,而在performLayout方法中就会调用mView的layout方法开始一层层View的布局工作. private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth, int desiredWindowHeight) { final View ho

  • C语言 数据存储方式知识点详解

    C语言 数据存储方式 一.源码 一个数的原码(原始的二进制码)有如下特点: 最高位做为符号位,0表示正,为1表示负 其它数值部分就是数值本身绝对值的二进制数 负数的原码是在其绝对值的基础上,最高位变为1 下面数值以1字节的大小描述: 十进制数 原码 +15 0000 1111 -15 1000 1111 +0 0000 0000 -0 1000 0000 注:原码表示法简单易懂,与带符号数本身转换方便,只要符号还原即可,但当两个正数相减或不同符号数相加时,必须比较两个数哪个绝对值大,才能决定谁减

  • Linux netfilter/iptables知识点详解

    Netfilter Netfilter是Linux内核中的一个数据包处理模块,它可以提供数据包的过滤.转发.地址转换NAT功能.Iptables是一个工具,可以用来在Netfilter中增加.修改.删除数据包处理规则. Netfilter是位于网卡和内核协议栈之间的一堵墙,是一种免费的软件防火墙. Netfilter中有三个主要的概念:规则.表.链,等级依次递增. 规则是对特定报文的处理说明,包括匹配字段和action. 链是一组规则的集合. 表是链中相同功能的规则集合. 规则 链 链可以看作网

  • VSCODE配置Markdown及Markdown基础语法详解

    一,VSCODE配置Markdown 打开左侧的extensions,或者使用 Ctrl+Shift+X,输入Markdown (1)Markdown all in one :是一个组合包,把最常用的Markdown优化都可以安装好. (2)Markdown preview GitHub styling :Github使用的Markdown渲染样式,使用这个样式,在本地就能预览Markdown文件最终在Github Pages中显示的效果. 二,Markdown基础语法 1,VSCODE中新建一

  • java伪泛型知识点详解

    说明 1.Java中的泛型是伪泛型.这种泛型实现方法称为类型擦除 ,基于这种方法实现的泛型称为伪泛型. 2.由于Java的泛型只在编译阶段发挥作用,因此在写代码时,起到了检查的作用,当代码运行时,它的内部并没有泛型. 实例 List<String> l1 = new ArrayList<String>(); List<Integer> l2 = new ArrayList<Integer>(); System.out.println(l1.getClass(

  • Python知识点详解之正则表达式语法

    目录 Python 正则表达式是什么 怎么用 正则表达式语法 re 库基本用法 re.search 函数 re.match 函数 re.findall 函数 re.split 函数 re.finditer 函数 re.sub 函数 re 库其它函数 扩展知识 总结 Python 正则表达式是什么 学习 Python 正则表达式离不开 re 模块,所以本篇博客会配合 re 模块进行编写. re 库是 Python 中处理正则表达式的标准库,本篇博客介绍 re 库的同时,会简单介绍一下正则表达式语法

随机推荐