TableLayout简介

•简介

  Tablelayout 类以行和列的形式对控件进行管理,每一行为一个 TableRow 对象,或一个 View 控件。

  当为 TableRow 对象时,可在 TableRow 下添加子控件,默认情况下,每个子控件占据一列。

  当为View时,该 View 将独占一行。

•TableLayout行列数的确定

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

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

  TableRow 中的组件个数就决定了该行有多少列,而列的宽度由含有最多子控件的 TableRow 决定;

  TableRow 的 layout_width 属性,默认是 martch_parent 的,我们自己设置成其他的值也不会生效;

  但是 layout_height 默认是 wrap_content 的,我们可以自己设置大小;

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

  有多少行就要自己数啦,一个 TableRow 占一行,一个单独的 View 也占一行;

  多少列则是看 TableRow 中的组件个数,组件最多的就是 TableLayout 的列数;

  比如第一TableRow含2个子控件,第二个TableRow含3个,第三个TableRow含4个,那么该TableLayout的列数为4;

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试行数,列数"
android:textSize="26sp"/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"> <TableRow
android:layout_height="match_parent"> <Button
android:text="(1,1)"/>
<Button
android:text="(1,2)"/>
</TableRow>
<TableRow
android:layout_height="match_parent"> <Button
android:text="(2,1)"/>
<Button
android:text="(2,2)"/>
<Button
android:text="(2,3)"/>
</TableRow>
<TableRow
android:layout_height="match_parent"> <Button
android:text="(3,1)"/>
<Button
android:text="(3,2)"/>
<Button
android:text="(3,3)"/>
<Button
android:text="(3,4)"/>
</TableRow>
<TextView
android:layout_marginLeft="5dp"
android:text="我单独占一行"
android:textSize="20sp"/>
</TableLayout>
</LinearLayout>

运行效果:

  

  行数 = 三个<TableRow> + 一个<TextView> = 4行

  列数 = max{2,3,4} = 4列;


TableLayout属性详解

•简介

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

  以上这三个属性的列号都是从 0 开始算的,比如 stretchColunmns = "2",对应的是第 3 列;

  可以设置多个,用逗号隔开比如 stretchColunmns = "0,2";

  如果是所有列都生效,则用"*"号即可;

•stretchColumns

  android:stretchColumns : 设置可伸展的列,该列可以向行方向伸展,最多可占据一整行。

  先写出一个基础布局,在此基础上测试 strechColumns:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 stretchColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:text="(1,1)"/>
<Button
android:layout_width="wrap_content"
android:text="(1,2)"/>
</TableRow> </TableLayout>
</LinearLayout>

运行效果:

    

  如图可知,这两个 Button 并没有占满整行,如何通过设置将这两个控件均匀占满整行呢?

  添加语句 android:stretchColumns="0,1" :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 stretchColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,1">
<TableRow
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:text="(1,1)"/>
<Button
android:layout_width="wrap_content"
android:text="(1,2)"/>
</TableRow> </TableLayout>
</LinearLayout>

运行效果:

  

  当然,你也可以单独拉伸 (1,1);

  修改语句: android:stretchColumns="0" ;

运行效果:

  

•shrinkColumns

  同样先写出一个基础布局,在此基础上测试 shrinkColumns:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 shrinkColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="0"
android:shrinkColumns="2">
<TableRow
android:layout_height="match_parent">
<Button
android:id="@+id/btn_0"
android:layout_width="wrap_content"
android:text="(1,1)"/>
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:text="(1,2)"/>
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:text="(1,3)"/>
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:text="(1,4)"/>
</TableRow> </TableLayout>
</LinearLayout>

  可以看到,通过 android:stretchColumns="0" 将 btn_0 设置成 stretchColumns;

  通过 android:shrinkColumns="2" 将 btn_2 设置成 shrinkColumns;

运行效果:

  

  现在,我将 btn_0 设置的 Text 改为 (1,1)(1,1)(1,1)(1,1):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 shrinkColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="0"
android:shrinkColumns="2">
<TableRow
android:layout_height="match_parent">
<Button
android:id="@+id/btn_0"
android:layout_width="wrap_content"
android:text="(1,1)(1,1)(1,1)(1,1)"/>
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:text="(1,2)"/>
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:text="(1,3)"/>
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:text="(1,4)"/>
</TableRow> </TableLayout>
</LinearLayout>

运行效果:

  

  如果将  android:shrinkColumns="2"  这个语句去掉呢?

运行效果:

  

  对比一下,是不是很容易得知 shrinkColunms 的作用?

  如果不给 btn_2 设置这个属性,那么在 btn_0 拉伸的时候,将优先占用 btn_3 的空间;

  如果给 btn_2 设置这个属性,那么优先占用 btn_2 的空间。

collapseColumns

  同样,还是先写出一个基础布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 collapseColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="*">
<TableRow
android:layout_height="match_parent">
<Button
android:id="@+id/btn_0"
android:layout_width="wrap_content"
android:text="(1,1)"/>
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:text="(1,2)"/>
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:text="(1,3)"/>
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:text="(1,4)"/>
</TableRow> </TableLayout>
</LinearLayout>

运行效果:

  

  在上述代码中添加语句: android:collapseColumns="1,3" ,也即是隐藏 btn_1,btn_3:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试 collapseColumns 属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:collapseColumns="1,3">
<TableRow
android:layout_height="match_parent">
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:text="(1,1)"/>
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:text="(1,2)"/>
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:text="(1,3)"/>
<Button
android:id="@+id/btn_4"
android:layout_width="wrap_content"
android:text="(1,4)"/>
</TableRow> </TableLayout>
</LinearLayout>

运行效果:

  

  由图可知,虽然设置了  android:stretchColumns="*" 属性,但是btn_0,btn_2 并没有占据整个空间;

  这就充分说明了  android:collapseColumns="1,3"  仅仅是让 btn_1,btn_3 隐藏了,并没有销毁;


单元格属性

•简介

  • android:layout_column : 指定该单元格在第几列显示
  • android:layout_span : 指定该单元格占据的列数(未指定时,为1)

•布局代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:background="@color/teal_700"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="测试单元格属性"
android:textSize="26sp"/> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<Button android:text="第0列"/>
<Button android:text="第1列"/>
<Button android:text="第2列"/>
</TableRow> <TableRow>
<TextView
android:layout_column="1"
android:text="我被指定在第1列"
android:textSize="15sp"
/>
</TableRow> <TableRow>
<TextView
android:layout_column="1"
android:layout_span="2"
android:text="我跨1到2列,不信你看!"
android:textSize="15sp"
/>
</TableRow>
</TableLayout> </LinearLayout>

•运行效果

  

Android 之 TableLayout 布局详解的更多相关文章

  1. [置顶] Android系统五大布局详解Layout

    我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前,视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit等 ...

  2. Android系统五大布局详解Layout

    我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前, 视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit ...

  3. Android LinearLayout线性布局详解

    为了更好地管理Android应用的用户界面里的各组件,Android提供了布局管理器.通过使用布局管理器,Android应用图形用户界面具有良好的平台无关性.推荐使用布局管理器来管理组件的分布.大小, ...

  4. Android学习之基础知识六—Android四种布局详解

    一.Android基本布局 布局是一种可以放置多个控件的容器,它可以按照一定规律调整内部控件的位置,而且布局内部除了可以放置控件外,还可以放置布局,实现多层布局嵌套.布局和控件.布局和布局之间的关系如 ...

  5. android:TableLayout表格布局详解

    http://blog.csdn.net/justoneroad/article/details/6835915 这篇博文包括的内容:1.TableLayout简介2.TableLayout行列数的确 ...

  6. Android开发重点难点1:RelativeLayout(相对布局)详解

    前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出“重点难点”系列, ...

  7. Android布局详解之一:FrameLayout

      原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...

  8. Android 布局详解

    Android 布局详解 1.重用布局 当一个布局文件被多处使用时,最好<include>标签来重用布局. 例如:workspace_screen.xml的布局文件,在另一个布局文件中被重 ...

  9. Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

随机推荐

  1. Dart SDK All In One

    Dart SDK All In One Dart SDK archive https://dart.dev/tools/sdk/archive https://dart.dev/get-dart Th ...

  2. JavaScript interview Question - Create a Array with two papameters without using loop!

    JavaScript interview Question - Create a Array with two papameters without using loop! JavaScript - ...

  3. Nuxt.js SSR Optimizing Tips

    Nuxt.js SSR Optimizing Tips 性能优化 FP 首次绘制时间 FCP 首次渲染时间 FMP 首屏渲染时间 FI refs https://vueschool.io/articl ...

  4. ElasticSearch7.9.2设置密码

    1:设置ElasticSearch的密码 1.1:停止运行ElasticSearch,修改配置. vim elasticsearch-7.9.2/config/elasticsearch.yml 新增 ...

  5. su: Authentication failure解决方法

    su命令不能切换root,提示su: Authentication failure,需要sudo passwd root一次之后,下次再su的时候只要输入密码就可以成功登录.

  6. pdf转换成文本解决格式不统一问题

    pdf转换成文本解决格式不统一问题 懒得调OCR服务了,所以快速解决的方法是: pdf转png:https://pdf2png.com/zh/ png转统一格式pdf:adobe acrobat自带增 ...

  7. nginx+php-fpm docker镜像合二为一

    一.概述 在上一篇文章介绍了nginx+php-fpm,链接如下: https://www.cnblogs.com/xiao987334176/p/12918413.html nginx和php-fp ...

  8. javascript中的模块系统

    目录 简介 CommonJS和Nodejs AMD异步模块加载 CMD ES modules和现代浏览器 在HTML中使用module和要注意的问题 简介 在很久以前,js只是简单的作为浏览器的交互操 ...

  9. Vue.js 多选列表(Multi-Select)组件

    搬运公众号早前文章 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...

  10. PAT-1144(The Missing Number)set的使用,简单题

    The Missing Number PAT-1144 #include<iostream> #include<cstring> #include<string> ...