Android表格布局(Table Layout)

先来看布局管理器之间继承关系图:

图1

可知TableLayout继承了LinearLayout,所以表格布局本质上依然是线性管理器。

表格布局采用行、列的形式来管理组件,它并不需要明确地声明包含了多少行、多少列,而是通过添加TableRow、其他组件来控制表格的行数和列数。

每向TableLayout添加一个TableRow,该TableRow就是一个表格行,TableRow也是容器,因此它也可以不断地添加组件,每添加一个子组件该表格就添加一列。

TableLayout一般以下面两种方式实现:

(1)  自己作为最顶层父容器

  1. <!--定义一个TableLayout,有两行
  2. 第1列所有单元格的宽度可以被收缩,以保证该表格能适应父容器的宽度
  3. 第2列所有单元格的宽度可以拉伸,以保证能完全填满表格空余空间-->
  4. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  5. android:id="@+id/TableLayout1"
  6. android:layout_width="wrap_content"
  7. android:layout_height="wrap_content"
  8. android:shrinkColumns="1"
  9. android:stretchColumns="2">
  10.  
  11. <!--这是此TableLayout的第1行,没有使用TableRow,直接添加一个Button,那么次Button自己占用整行 -->
  12. <Button
  13. android:id="@+id/button1"
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:text="独自一行的按钮1"/>
  17.  
  18. <!-- 这是第2行,先添加一个TableRow,并为TableRow添加三个Button,也就是此行包含三列 -->
  19. <TableRow>
  20. <Button
  21. android:id="@+id/button2"
  22. android:layout_width="wrap_content"
  23. android:layout_height="wrap_content"
  24. android:text="普通按钮1"/>
  25.  
  26. <Button
  27. android:id="@+id/button3"
  28. android:layout_width="wrap_content"
  29. android:layout_height="wrap_content"
  30. android:text="被收缩的按钮1"/>
  31.  
  32. <Button
  33. android:id="@+id/button4"
  34. android:layout_width="wrap_content"
  35. android:layout_height="wrap_content"
  36. android:text="被拉伸的按钮1"/>
  37. </TableRow>
  38.  
  39. <!--这是此TableLayout的第3行,没有使用TableRow,直接添加一个Button,那么次Button自己占用整行 -->
  40. <Button
  41. android:id="@+id/button5"
  42. android:layout_width="wrap_content"
  43. android:layout_height="wrap_content"
  44. android:text="独自一行的按钮2"/>
  45.  
  46. <!-- 这是第4行,先添加一个TableRow,并为TableRow添加三个Button,也就是此行包含三列 -->
  47. <TableRow>
  48. <Button
  49. android:id="@+id/button6"
  50. android:layout_width="wrap_content"
  51. android:layout_height="wrap_content"
  52. android:text="普通按钮2"/>
  53.  
  54. <Button
  55. android:id="@+id/button7"
  56. android:layout_width="wrap_content"
  57. android:layout_height="wrap_content"
  58. android:text="被收缩的按钮2"/>
  59.  
  60. <Button
  61. android:id="@+id/button8"
  62. android:layout_width="wrap_content"
  63. android:layout_height="wrap_content"
  64. android:text="被拉伸的按钮2"/>
  65. </TableRow>
  66.  
  67. </TableLayout>

效果如下:

图2

这里只有一个TableLayout,如果我们想单独控制地4行,比如想把“普通按钮2”隐藏,也就是增加android:collapseColumns="0",这样会把“普通按钮1”,这一列也隐藏了,如下图:

图3

但如果要实现只“普通按钮2”这列,我们来看下面的实现

(2)  LinearLayout作为TableLayout的容器

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:orientation="vertical"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent">-->
  6.  
  7. <!--定义第1个TableLayout,有两行
  8. 第1列所有单元格的宽度可以被收缩,以保证该表格能适应父容器的宽度
  9. 第2列所有单元格的宽度可以拉伸,以保证能完全填满表格空余空间-->
  10. <TableLayout
  11. android:id="@+id/TableLayout1"
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:shrinkColumns="1"
  15. android:stretchColumns="2">
  16.  
  17. <!--这是此TableLayout的第1行,没有使用TableRow,直接添加一个Button,那么次Button自己占用整行 -->
  18. <Button
  19. android:id="@+id/button1"
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:text="独自一行的按钮1"/>
  23.  
  24. <!-- 这是第2行,先添加一个TableRow,并为TableRow添加三个Button,也就是此行包含三列 -->
  25. <TableRow>
  26. <Button
  27. android:id="@+id/button2"
  28. android:layout_width="wrap_content"
  29. android:layout_height="wrap_content"
  30. android:text="普通按钮1"/>
  31.  
  32. <Button
  33. android:id="@+id/button3"
  34. android:layout_width="wrap_content"
  35. android:layout_height="wrap_content"
  36. android:text="被收缩的按钮1"/>
  37.  
  38. <Button
  39. android:id="@+id/button4"
  40. android:layout_width="wrap_content"
  41. android:layout_height="wrap_content"
  42. android:text="被拉伸的按钮1"/>
  43. </TableRow>
  44.  
  45. </TableLayout>
  46. <!--定义第2个TableLayout,有两行
  47. 第1列所有单元格的宽度可以被收缩,以保证该表格能适应父容器的宽度
  48. 第2列所有单元格的宽度可以拉伸,以保证能完全填满表格空余空间-->
  49. <TableLayout
  50. android:id="@+id/TableLayout2"
  51. android:layout_width="wrap_content"
  52. android:layout_height="wrap_content"
  53. android:collapseColumns="0"
  54. android:shrinkColumns="1"
  55. android:stretchColumns="2">
  56.  
  57. <!--这是此TableLayout的第3行,没有使用TableRow,直接添加一个Button,那么次Button自己占用整行 -->
  58. <Button
  59. android:id="@+id/button5"
  60. android:layout_width="wrap_content"
  61. android:layout_height="wrap_content"
  62. android:text="独自一行的按钮2"/>
  63.  
  64. <!-- 这是第4行,先添加一个TableRow,并为TableRow添加三个Button,也就是此行包含三列 -->
  65. <TableRow>
  66. <Button
  67. android:id="@+id/button6"
  68. android:layout_width="wrap_content"
  69. android:layout_height="wrap_content"
  70. android:text="普通按钮2"/>
  71.  
  72. <Button
  73. android:id="@+id/button7"
  74. android:layout_width="wrap_content"
  75. android:layout_height="wrap_content"
  76. android:text="被收缩的按钮2"/>
  77.  
  78. <Button
  79. android:id="@+id/button8"
  80. android:layout_width="wrap_content"
  81. android:layout_height="wrap_content"
  82. android:text="被拉伸的按钮2"/>
  83. </TableRow>
  84.  
  85. </TableLayout>
  86.  
  87. </LinearLayout>

效果如下:

图4

通过在第2个TableLayout中增加android:collapseColumns="0"实现,这里需要主要的是LinearLayout的android:orientation属性值的设置,如果没有这一项或是其值为horizontal,那么后面两行都看不到,因为是以水平方向排列的,后面两行显示在前两行的右边,看不到。

Android表格布局(Table Layout)的更多相关文章

  1. Android表格布局之设置边框

    Android表格布局本身没有边框,不过可以通过背景色的设置可以实现表格边框的显示. 首先可以设置TableRow的背景色,然后设置内容的背景色.根据它们的颜色差就出现了边框.只要微调Content与 ...

  2. Android线性布局(Linear Layout)

    Android线性布局(Linear Layout) LinearLayout是一个view组(view group),其包含的所有子view都以一个方向排列,垂直或是水平方向.我们能够用androi ...

  3. Android帧布局(Frame Layout)

    Android帧布局(Frame Layout) FrameLayout是最简单的一个布局管理器.FrameLayout为每个加入其中的组件创建一个空白区域(一帧),这些组件根据layout_grav ...

  4. [android] 表格布局和绝对布局

    /*****************2016年4月28日 更新*************************************/ 知乎:为什么Android没有像iOS一样提供autolay ...

  5. Android 表格布局<TableLayout>

    表格布局即,tableLayout,表格布局通过行.列的形式来管理UI组件,TablelLayout并不需要明确地声明包含多少行.多少列,而是通过TableRow,以及其他组件来控制表格的行数和列数, ...

  6. 有间距的表格布局 table布局

    1.先看有间距的布局效果: 2.少说多做,直接看代码(代码中有注释) <!DOCTYPE html> <html lang="zh"> <head&g ...

  7. Android 表格布局 TableLayout

    属性介绍 stretchColumns:列被拉伸 shrinkColumns:列被收缩 collapseColumns:列被隐藏 举例测试 <TableLayout android:id=&qu ...

  8. Android View 布局流程(Layout)完全解析

    前言 上一篇文章,笔者详细讲述了View三大工作流程的第一个,Measure流程,如果对测量流程还不熟悉的读者可以参考一下上一篇文章.测量流程主要是对View树进行测量,获取每一个View的测量宽高, ...

  9. AndroidのUI布局之layout weight

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

随机推荐

  1. Linux文件编辑命令详细整理

    刚接触Linux,前几天申请了个免费体验的阿里云服务器,选择的是Ubuntu系统,配置jdk环境变量的时候需要编辑文件. vi命令编辑文件,百度了一下,很多回答不是很全面,因此编辑文件话了一些时间. ...

  2. Quartz学习笔记1:Quartz概述

    Quartz是开源任务调度框架中的翘楚,它提供了强大的 任务调度机制.Quartz允许开发人员灵活的定义触发器的调度时间表,并可对触发器和任务进行关联映射.此外,Quartz提供了调度运行环境的持久化 ...

  3. solr界面

    1.1 界面功能介绍 1.1.1 Analysis

  4. PGM:无向图模型:马尔可夫网

    http://blog.csdn.net/pipisorry/article/details/52489321 马尔可夫网 马尔可夫网在计算机视觉领域通常称为马尔可夫随机场(Markov random ...

  5. Android开发基础规范(一)

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52602487 前言:Androi ...

  6. linu下C语言之BMP图片操作编程(下)

    前面提高了一个将BMP左转的程序,右转其实也是类似的操作,就不写了,这节,我们来实现,将一张BMP图进行灰度处理,代码贴上: #include <stdio.h> #include < ...

  7. 06_MyBatis,Spring,SpringMVC整合

     项目结构 Spring的配置: beans.xml <?xml version="1.0" encoding="UTF-8"?> <be ...

  8. Spark:大数据的电花火石!

    什么是Spark?可能你很多年前就使用过Spark,反正当年我四六级单词都是用的星火系列,没错,星火系列的洋名就是Spark. 当然这里说的Spark指的是Apache Spark,Apache Sp ...

  9. Android Service详解

    service作为四大组件值得我们的更多的关注 在Android中,Activity主要负责前台页面的展示,Service主要负责需要长期运行的任务.例如,一个从service播放音乐的音乐播放器,应 ...

  10. 【一天一道LeetCode】#235. Lowest Common Ancestor of a Binary Search Tree

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...