android tablelayout 标题安卓tablelayout

转载

bingfeng 2023-07-03 14:03:02

文章标签 android xml 控件 文章分类 Android 移动开发

父级：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 tablelayout 标题安卓tablelayout_android

案例一（测试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 tablelayout 标题安卓tablelayout_xml_02

可以看到这时第三行中第一列的按钮宽度被拉伸至整个表格的宽度-其他列的宽度，即列数最多哪一行该列的宽度

案例二（测试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>

界面如下：

android tablelayout 标题安卓tablelayout_android_03

可以看到第三个按钮和第四个按钮无法正常显示，好像被挤到表格之外去了！！

修改代码，将第一个按钮设置为可收缩：

<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>

界面如下：

android tablelayout 标题安卓tablelayout_android_04

可以看到第一个按钮无法显示，第四个按钮显示不完整！！而且表格的高度被拉伸了，即使第一个按钮的宽度被收缩到0表格任然无法显示完整；表格的高度之所以被拉伸是因为第一个按钮的宽度被收缩的原因，而按钮无法显示完全时因为该TableLayout继承与LinearLayout android的无法自动换行显示。

继续修改代码，将第一，第二，第三列按钮都收缩显示

android tablelayout 标题安卓tablelayout_控件_05

可以看到前三个按钮都收缩相同的尺度，且这个时候表格恰好能够完全显示！！

案例三（测试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>

界面如下：

android tablelayout 标题安卓tablelayout_控件_06

设置隐藏第一个按钮

界面如下：

android tablelayout 标题安卓tablelayout_android_07

可以看到这一个按钮已经被隐藏了

案例四（测试表格行的高度）：

首先我们为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>

界面如下：

android tablelayout 标题安卓tablelayout_xml_08

可以看到整个黄色所占的高度即是该行的高度，而该行的高度并没有改变，这说明我们无法直接指定表格中一行所占的高度！！

在为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>

界面如下：

android tablelayout 标题安卓tablelayout_控件_09