父级:LinearLayout
因为继承与LinearLayout所以LinearLayout可以设置的属性在TableLayout中都可以使用,当时只能控制上下方向!!!
属性
XML中属性名称 | 对应的方法 | 说明 |
android:stretchColumns | setSstretchAllColumns(boolean) | 设置可以被拉伸列,多个值时,以","隔开,如:android:stretchColumns="0,1"表格中所有的第一列和第二列被拉伸 |
android:shrinkColumns | setShrinkAllColumns(boolean) | 设置可以被收缩的列,多个值时,以","隔开,如:android:shrinkColumns="0,1,2"表格中所有的第一列,第二列和第三列可以被收缩 |
android:collapseColumns | setColumnCollapse(int,boolean) | 设置被隐藏的列,用法和上述相似 |
在下面列举案例之前,先来个几个结论吧!
- TableLayout的直接子控件的宽度都为该表格的宽度,无法进行修改
- 表格中的行数是由TableRow和TableLayout的直接子控件的个数决定的
- 表格中的列数是由最多控件的一行中的控件数决定的,如:一个表格中最多控件的一行控件数为5,则该表格的最列数为5
- 表格的每一行的高度由该行高度最大的控件的宽度决定的,即:改行的宽度=宽度最大的控件的宽度
- 某一列控件的宽度等于表格中该列的宽度
- 最大拉伸的宽度等于表格中最多控件的该列宽度
- 最小收缩的宽度没有限制,直至该行可以在屏幕中完全显示(注意:当该列的宽度收缩到0时,可能该行还是无法全部显示)
首先我们来看下什么都没有设置时,布局界面时什么样子的
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.layout_001.MainActivity" >
<TableLayout
android:layout_width="200sp"
android:layout_height="wrap_content"
>
<TableRow>
<Button
android:text="button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow>
<Button
android:text="button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
</TableLayout>
</LinearLayout>
界面如下:
案例一(测试android:stretchColumns属性):
代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.layout_001.MainActivity" >
<TableLayout
android:layout_width="200sp"
android:layout_height="wrap_content"
android:stretchColumns="0"
>
<TableRow>
<Button
android:text="button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow>
<Button
android:text="button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow>
<Button
android:text="button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
</TableLayout>
</LinearLayout>
界面如下:
可以看到这时第三行中第一列的按钮宽度被拉伸至整个表格的宽度-其他列的宽度,即列数最多哪一行该列的宽度
案例二(测试android:shrinkColumns属性):
为添加该属性之前的代码:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.layout_001.MainActivity" >
<TableLayout
android:layout_width="200sp"
android:layout_height="wrap_content"
android:stretchColumns="0"
>
<TableRow>
<Button
android:text="button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
</TableLayout>
</LinearLayout>
界面如下:
可以看到第三个按钮和第四个按钮无法正常显示,好像被挤到表格之外去了!!
修改代码,将第一个按钮设置为可收缩:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.layout_001.MainActivity" >
<TableLayout
android:layout_width="200sp"
android:layout_height="wrap_content"
android:shrinkColumns="0"
>
<TableRow>
<Button
android:text="button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
</TableLayout>
</LinearLayout>
界面如下:
可以看到第一个按钮无法显示,第四个按钮显示不完整!!而且表格的高度被拉伸了,即使第一个按钮的宽度被收缩到0表格任然无法显示完整;表格的高度之所以被拉伸是因为第一个按钮的宽度被收缩的原因,而按钮无法显示完全时因为该TableLayout继承与LinearLayout android的无法自动换行显示。
继续修改代码,将第一,第二,第三列按钮都收缩显示
可以看到前三个按钮都收缩相同的尺度,且这个时候表格恰好能够完全显示!!
案例三(测试android:collapseColumn属性):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.layout_001.MainActivity" >
<TableLayout
android:layout_width="200sp"
android:layout_height="wrap_content"
>
<TableRow>
<Button
android:text="button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
</TableLayout>
</LinearLayout>
界面如下:
设置隐藏第一个按钮
界面如下:
可以看到这一个按钮已经被隐藏了
案例四(测试表格行的高度):
首先我们为TableRow设置高度和背景颜色试一试
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.layout_001.MainActivity" >
<TableLayout
android:layout_width="200sp"
android:layout_height="wrap_content"
android:background="#ffff00"
>
<TableRow
android:layout_height="200sp"
>
<Button
android:text="button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
</TableLayout>
</LinearLayout>
界面如下:
可以看到整个黄色所占的高度即是该行的高度,而该行的高度并没有改变,这说明我们无法直接指定表格中一行所占的高度!!
在为button2设置相同的高度试试
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.layout_001.MainActivity" >
<TableLayout
android:layout_width="200sp"
android:layout_height="wrap_content"
android:background="#ffff00"
>
<TableRow>
<Button
android:text="button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="button2"
android:layout_width="wrap_content"
android:layout_height="200sp"
/>
</TableRow>
</TableLayout>
</LinearLayout>
界面如下:
可以看到表格的行高改变了!!!,这说明表格的行的高度==改行高度最大的控件的高度!!
小弟菜鸟一个,如有说的不对的地方欢迎各路大神拍砖!!!