Android布局深究(三)——TableLayout(表格布局)

Android布局深究系列文章目录

Android布局深究(一)——LinearLayout(线性布局)
Android布局深究(二)——RelativeLayout(相对布局)
Android布局深究(三)——TableLayout(表格布局)
Android布局深究(四)——FrameLayout(帧布局)
Android布局深究(五)——GridLayout(网格布局)
Android布局深究(六)——AbsoluteLayout(绝对布局)

---

---

前言

作为一名大前端工程师，相信各位对HTML中的<table>标签已经有所了解了，在安卓开发中同样也是支持表格布局的。本篇文章将研究安卓表格布局最常用的几个属性，并通过表格布局完成登陆界面的开发。

---

一、TableLayout(表格布局)的定义

表格布局就是类似于excel中的表格，每个“单元格”的位置都是由行与列共同决定，最后组件元素放入某个“单元格”进行布局定位，以达到最终的布局效果。

---

二、表格布局常用属性的分析

属性	作用
collapseColumns	设置需要被隐藏的列的列序号
shrinkColumns	设置允许被收缩的列的列序号
stretchColumns	设置允许被拉伸的列的列序号
layout_column	设置跳过指定的列，组件元素从下一列开始显示
layout_span	合并指定列数的单元格

为了演示效果，我们在表格布局中创建5个TextView组件:

我们可以明显的看到：最后一个TextView组件因为屏幕所剩宽度不够，而超出屏幕的显示区域。
注意：列的序号从0开始算

效果演示

---

android:collapseColumns="2,3"

android:shrinkColumns="0, 3"

android:stretchColumns="0,1"(前提:只有当剩余宽度有余时，才会拉伸宽度)

android:layout_column="3"(five为第二行，需参考当前表格布局中已确定列数)

android:layout_span="4"(five为第二行，需参考当前表格布局中已确定列数)

---

三、实战：登录界面

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:gravity="center"
    >

    //第一行
    <TableRow
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用户名："
            android:textSize="40px"
            />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="200px"
            android:textSize="40px"
            />
    </TableRow>

    //第二行
    <TableRow
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密  码："
            android:textSize="40px"
            />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="200px"
            android:textSize="40px"
            android:inputType="textPassword"
            />
    </TableRow>

    //第三行
    <TableRow
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登 录"
            android:textSize="40px"
            android:layout_marginRight="20dp"
            android:background="#00BCD4"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="注 册"
            android:textSize="40px"
            android:background="#FFC107"
            />

    </TableRow>

</TableLayout>