如何制作表格(一)——TableLayout

一、Android中能够用于网格布局的控件（制作各种这样的表格）

Android提供了四种方式来制作表格，分别为：

TableLayout、GridLayout、GridView、Recycler中的GridLayoutManager模式。

二、TableLayout的使用

来让我们们说说TableLayout好处都有啥<(￣ˇ￣)/~~

①、TableLayout的优点是布出来的局特别规整，行是行，列是列。

什么叫做行是行，列是列，稍安勿躁，我们先来证明什么叫行是行。

准备：我们先创建TableLayout布局，然后向里面添加两个TextView，并使用gravity。就像这样

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!--命名为TV一号-->
        <TextView
            android:layout_height="50dp"
            android:text="吼吼"
            android:gravity="center"/>
        <!--命名为TV二号-->
        <TextView
            android:layout_width="0dp"
            android:text="哈哈"
            android:gravity="center"/>
    </TableLayout>

看看屏幕发生了什么？(°o°；)，这不是设置了oriention="vertial"的LinearLayout了吗。也不对，我在TV一号中，明明设置了layout_width="0dp"为什么，还显示的出来， 还占满了屏幕的width。这..这..。

恩，这就是TableLayout行的效果，每个加入TableLayout的控件都被当做一行对待，所以width默认是占满屏幕的，改都改不掉，所以TV二号就不要白费力气了，跟TV一号学学吧。当然修改height是完全没问题的，就跟TV一号一样

氮素，氮素 - -，我做表格不可能每行只放一个控件吧，而且还占满了一整行。那么怎么设置列呢？

我们需要在<TableLayout/>标签中添加<TableRow>标签，<TableRow>表示为TableLayout中的一行（加入TableLayout的控件都被当做一行对待）

我们每往<TableRow>中添加一个控件，该控件就自成一列。来来来，动手了!!~~

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TableRow>
            <!--命名为TV一号-->
            <TextView
                android:layout_height="50dp"
                android:text="吼吼"
                android:gravity="center"/>
            <!--命名为TV二号-->
            <TextView
                android:layout_width="60dp"
                android:text="哈哈"
                android:gravity="center"/>
        </TableRow>
    </TableLayout>

偶，TV一二号，又出场了。。我们可以看到，这下width和height都能够设置了。跟LinearLayout的oriention="horizonal"功能完全一样了~~。

大家看，这样就将表格中的行和列分开来了。我们可以很好的知道，<TableLayout>下的每个标签都表示的是一行，不可能是某个列，列的设置都在<TableRow>这个标签内。

②、能够自由分配行数、列数。。。能够自由分配每行的高度和每列的宽度

1、如何利用TableLayout画表格

好好，我知道了什么叫行是行，列是列。画表格的时候，首先得画出表格的行和列吧，怎么画出表格的行和列呢。

不不不，这个想法是针对单元格相同的表格。对于tableLayout我们应该这样想，首先看表格的行，然后再看该行内有多少列。先将该行的列制作出来，然后再看下一行，以此类推，来绘制完表格。而不是先画张表，再向里面填充东西，应该是看到一行，先将一行填完，在进行下一行的填充。

2、如何设置TableLayout的行和列

哦是这样啊，但是那么画到最后，我们总得知道，这个表格有多少行多少列吧。

是这样没错，行数就是<TableLayout>在中添加多少了个控件。我们数一数<TableLayout有多少个标签就可以了。。

（注：是TableLayout下的控件，不包括TalbeRow内的控件）

列数就是 <TableRow>标签中添加多少个控件。（这个就叫做自由分配行数、列数。因为：行、列都是由加入的控件决定的，而不是TableLayotu指定行数或者列数）

但是每个<TableRow>添加的控件数量都是不同的呀，比如说我在Row1中有3个，在Row2中有5个，怎么能判定列是多少？         按最多的数量为TableLayout的列。就是5个

（注：可以看做Row1的列数为5，但是剩下的两个隐藏了）

3、如何设置TableLayout各行、各列的宽高

哦，我表格已经画出来了，但是无法控制每行、每列的宽度和高度，怎么办？

每行的高度：根据该行控件的最大高度决定的（假如在TableRow加入了三个控件 A高20 B高30 C高40，那么该行的高度就是40，然后A，B默认是剧中与表格显示。）

注：

这就是为什么没必要对TableRow设置宽高的原因，宽度被TableLayout控制了，高度被子View控制了。

如果有D没有设置layout_height，那么它的高度就为最大高度，也就是40

每列的宽度：同样是根据该列控件的最高宽度决定的。同上，就不解释了。

③、能够对每列设置参数

TableLayout有三个属性：

android:stretchColumns    设置可伸展的列。该列可以向行方向伸展，最多可占据一整行。（相当于对该列设置了layout_weight="1"占据剩余的控件，这不就时刻实现平均分割的效果了，吼吼）
android:shrinkColumns     设置可收缩的列。当该列子控件的内容太多，已经挤满所在行，那么该子控件的内容将往列方向显示。（当View长度超出了单元格的长度，就会将超出部分向下显示，会扩大行的高度）
android:collapseColumns 设置要隐藏的列。

示例：
android:stretchColumns="0"           第0列可伸展
android:shrinkColumns="1,2"         第1,2列皆可收缩
android:collapseColumns="*"         隐藏所有行

④、能够设置控件显示的位置

android:layout_column    指定该单元格在第几列显示
android:layout_span        指定该单元格占据的列数（未指定时，为1）
示例：
android:layout_column="1"    该控件显示在第1列
android:layout_span="2"        该控件占据2列

但是这么使用是由前提条件的。就是当前列是存在的。  什么叫当前列是存在的？

因为TableLayout的列是根据TableRow中的最大View数控制的。所以必须让显示的列在最大项之内，比如：现在TableLayout最大为5，但是我显示在第6列，这肯定是不可能的。

例：

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="2">
        <TableRow>
            <!--TV一号-->
            <TextView
                android:layout_height="50dp"
                android:text="吼吼"

                />
            <!--TV二号-->
            <TextView
                android:layout_width="60dp"
                android:layout_height="80dp"
                android:text="哈哈"
                android:gravity="center"/>
            <Button
                android:layout_height="30dp"
                android:text="按时打算"/>
        </TableRow>
        <TableRow>
            <Button
                android:layout_height="80dp"
                android:layout_column="2"
                android:text="按时打算"/>
        </TableRow>
    </TableLayout>

到这里，TableLayout的使用就完成。大伙可以用TableLayout制作一个计算器~~~（源码可以自己查找。。）

等等等等。。你还没有讲怎么设置表格的分割线，就想逃。。。没有分割线，看起来一点都不像一个正常的表格

额，抱歉，抱歉，疏忽了。。。

三、TableLayout的问题

本人查找了好多篇文章，都没有找到TableLayout能够使用自身的属性来设置其分割线的。所以只能使用曲线救国的方法。。。

①、制作：TableLayout的边框

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/transparent"/>  //内部设置为透颜色  #00000000
    <stroke android:color="@color/blue" //这里设置边框   #378BE0
        android:width="1dp"/>
</shape>

设置为TableLayout的background。

②、设置单元格的分割线：

第一种设置分割线的方式，添加View控件然后 分割线的背景

缺点：View本身占了一个col，使用的时候需要小心。

<View 
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:background="@color/blue"/>

通过这两个步骤，我们就能做出一行单元格了

<span style="font-size:18px;">    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/table_frame"
        android:stretchColumns="0,2,4">
        <TableRow>
            <TextView
                android:layout_height="30dp"
                android:gravity="center"
                android:text="啦啦"/>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/blue"/>

            <TextView
                android:layout_height="30dp"
                android:gravity="center"
                android:text="吼吼"/>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/blue"/>

            <TextView
                android:layout_height="30dp"
                android:gravity="center"
                android:text="哈哈"/>
        </TableRow>
    </TableLayout></span>

第二种设置分割线的方式是使用drawable的layer_list然后设为背景。

缺点：背景颜色固定，不为透明

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/holo_blue_light"/>
        </shape>
    </item>

    <item android:right="1dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</layer-list>

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/table_frame"
        android:stretchColumns="0,1,2">
        <TableRow>
            <TextView
                android:layout_height="30dp"
                android:gravity="center"
                android:text="啦啦"
                android:background="@drawable/table_divider"/>

            <TextView
                android:layout_height="30dp"
                android:gravity="center"
                android:text="吼吼"
                android:background="@drawable/table_divider"/>

            <TextView
                android:layout_height="30dp"
                android:gravity="center"
                android:text="哈哈"
                android:background="@drawable/table_divider"/>
        </TableRow>
    </TableLayout>

第三种方式：自己用ps制作一张png.9图片作为背景。。。

缺点：自己作图，还要设计为.9图片

代码就不展示了，只是换张图而已

效果：

如果我要制作两行单元格呢？
同样是添加一行分割线，效果图就不上传了
<View 
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/blue"/>

如果我要制作两行单元格呢？

同样是添加一行分割线，效果图就不上传了

<View 
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/blue"/>