如何制作表格(一)——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"/>
  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值