一、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: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列
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"/>