一步一步学android之布局管理器——TableLayout

最新推荐文章于 2025-06-24 11:02:05 发布

Kay_pro

最新推荐文章于 2025-06-24 11:02:05 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：一步一步学android之布局篇一步一步学Android 文章标签： Android 布局 TableLayout

本文链接：https://blog.youkuaiyun.com/kaypro/article/details/10025175

一步一步学Android 同时被 2 个专栏收录

20 篇文章

订阅专栏

一步一步学android之布局篇

5 篇文章

订阅专栏

本文详细介绍了Android中的TableLayout布局管理器的使用方法，包括XML配置和Java代码实现，并通过实例展示了如何构建表格形式的UI。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天生病，博客没更新，今天接着学习第三个布局管理器TableLayout（表格布局），顾名思义就不难理解它是采用表格的形式对控件的布局进行管理的，在TableLayout布局中需要使用TableRow来对表格中的行进行控制，然后再把组件放在TableRow中，同样先来看看TableLayout的定义（http://developer.android.com/reference/android/widget/TableLayout.html）：

一般TableLayout布局一般用在对程序进行列表输出的操作上，下面写个例子来看看TableLayout的用法：

效果如下：

main.xml：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/TableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TableRow>

        <EditText
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="请输入你想查询的问题...." >
        </EditText>

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="查询" />
    </TableRow>

    <View
        android:layout_height="2px"
        android:background="#ff909090" />

    <TableRow>

        <TextView
            android:id="@+id/tx"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="请选择检索范围："
            android:textSize="15sp" />

        <RadioGroup
            android:id="@+id/choose"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkedButton="@+id/china"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/china"
                android:text="中国" />

            <RadioButton
                android:id="@+id/usa"
                android:text="美国" />
        </RadioGroup>
    </TableRow>

</TableLayout>

上面的代码首先选择TableLayout进行布局，然后定义两个TableRow，之后在第一行中加入一个EditText和Button，第二行中加入一个TextView和RadioGroup，这些控件在控件篇都已经使用过，程序为了看起来有区别，就在第一行和第二行之间加了条横线，就是view那个标签。

前面说到TableLayout比较适合输出列表数据，下面同样写个例子来看看：

main.xml：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/TableLayout01"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    >

    <TableRow>
        <TextView 
           	android:layout_column="0"
            android:text="ID"
            android:layout_gravity="center_horizontal"
            android:padding="8px"/><!-- 定义组件的大小 -->
        <TextView 
           	android:layout_column="1"
            android:text="姓名"
            android:layout_gravity="center_horizontal"
            android:padding="8px"/>
        <TextView 
           	android:layout_column="2"
            android:text="EMAIL"
            android:layout_gravity="center_horizontal"
            android:padding="8px"/>
        <TextView 
           	android:layout_column="3"
            android:text="地址"
            android:layout_gravity="center_horizontal"
            android:padding="8px"/>
    </TableRow>
    <View 
        android:layout_height="2px"
        android:background="#FF909090"/>
    <TableRow>
        <TextView 
            android:layout_column="0"
            android:text="优快云"
            android:gravity="center_horizontal"
            android:padding="3px"/>
        <TextView 
            android:layout_column="1"
            android:text="优快云博客"
            android:gravity="center_horizontal"
           android:padding="3px"/>
        <TextView 
            android:layout_column="2"
            android:text="youkuaiyun.com"
            android:gravity="center_horizontal"
            android:padding="3px"/>
        <TextView 
            android:layout_column="3"
            android:text="广东省广州市白云区河边"
            android:gravity="center_horizontal"
            android:padding="3px"/>
    </TableRow>
	<TableRow>
        <TextView 
            android:layout_column="0"
            android:text="ZLK"
            android:gravity="center_horizontal"
           android:padding="3px"/>
        <TextView 
            android:layout_column="1"
            android:text="KAY"
            android:gravity="center_horizontal"
           android:padding="3px"/>
        <TextView 
            android:layout_column="2"
            android:text="blog.youkuaiyun.com/Kaypro"
            android:gravity="center_horizontal"
            android:padding="3px"/>
        <TextView 
            android:layout_column="3"
            android:text="广州"
            android:gravity="center_horizontal"
            android:padding="3px"/>
    </TableRow>
</TableLayout>

效果图如下：

可以发现有些数据显示不完整（广东省广州市白云区河边），出现这个情况我们可以设置TableLayout的属性android:shrinkColumns="3"（0开始），这句话是定义为可收缩列。同时TableLayout还有android:collapseColumns="0,3"属性设置那列不显示，总体修改后的main.xml如下：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/TableLayout01"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:collapseColumns="0,3"
    android:shrinkColumns="3">
    

    <TableRow>
        <TextView 
           	android:layout_column="0"
            android:text="ID"
            android:layout_gravity="center_horizontal"
            android:padding="8px"/><!-- 定义组件的大小 -->
        <TextView 
           	android:layout_column="1"
            android:text="姓名"
            android:layout_gravity="center_horizontal"
            android:padding="8px"/>
        <TextView 
           	android:layout_column="2"
            android:text="EMAIL"
            android:layout_gravity="center_horizontal"
            android:padding="8px"/>
        <TextView 
           	android:layout_column="3"
            android:text="地址"
            android:layout_gravity="center_horizontal"
            android:padding="8px"/>
    </TableRow>
    <View 
        android:layout_height="2px"
        android:background="#FF909090"/>
    <TableRow>
        <TextView 
            android:layout_column="0"
            android:text="优快云"
            android:gravity="center_horizontal"
            android:padding="3px"/>
        <TextView 
            android:layout_column="1"
            android:text="优快云博客"
            android:gravity="center_horizontal"
           android:padding="3px"/>
        <TextView 
            android:layout_column="2"
            android:text="youkuaiyun.com"
            android:gravity="center_horizontal"
            android:padding="3px"/>
        <TextView 
            android:layout_column="3"
            android:text="广东省广州市白云区河边"
            android:gravity="center_horizontal"
            android:padding="3px"/>
    </TableRow>
	<TableRow>
        <TextView 
            android:layout_column="0"
            android:text="ZLK"
            android:gravity="center_horizontal"
           android:padding="3px"/>
        <TextView 
            android:layout_column="1"
            android:text="KAY"
            android:gravity="center_horizontal"
           android:padding="3px"/>
        <TextView 
            android:layout_column="2"
            android:text="blog.youkuaiyun.com/Kaypro"
            android:gravity="center_horizontal"
            android:padding="3px"/>
        <TextView 
            android:layout_column="3"
            android:text="广州"
            android:gravity="center_horizontal"
            android:padding="3px"/>
    </TableRow>
</TableLayout>

效果图如下（android:shrinkColumns=“3”这里我把第三行忽略掉了，看不见效果，后面会有，不用担心）

前面提到的Layout都可以代码实现，TableLayout也同样可以，MainActivity.java：

package com.example.tablelayoutdemo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;

@SuppressLint("ParserError")
public class MainActivity extends Activity {
	//定义好要显示的数据
	private String titleData[][] = new String[][] {
			{ "ID", "姓名", "EMAIL", "地址" },
			{ "优快云", "优快云", "youkuaiyun.com", "广东省广州市白云区河边" },
			{ "ZLK", "KAY", "blog.youkuaiyun.com/Kaypro", "广州" } };

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//新建TableLayout
		TableLayout t = new TableLayout(this);
		//定义TableLayout的宽和高
		TableLayout.LayoutParams layoutParam = new TableLayout.LayoutParams(
				ViewGroup.LayoutParams.FILL_PARENT,
				ViewGroup.LayoutParams.FILL_PARENT);
		//就是android:shrinkColumns="3"的意思
		t.setColumnShrinkable(3,true);
		//下面4行代码是对那条横线的定义
		View v = new View(this);
		v.setBackgroundColor(Color.BLACK);
		LayoutParams viewParams = new LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,2);
		v.setLayoutParams(viewParams);
		//设置表格的背景颜色
		t.setBackgroundColor(Color.YELLOW);
		//下面开始初始化
		for (int i = 0; i < this.titleData.length; i++) {
			//如果到了第二行就添加横线
			if(i==1){
				t.addView(v);
			}
			//创建表格行（第一层循环的作用就是行的建立）
			TableRow tr = new TableRow(this);
			for (int j = 0; j < this.titleData[i].length; j++) {
				//创建文本组件（第二层循环作用就是遍历行元素，建立textview，然后添加到当下循环下的tablerow中
				TextView tv = new TextView(this);
				tv.setText(this.titleData[i][j]);
				tr.addView(tv, j);
			}
			t.addView(tr);
		}
		setContentView(t, layoutParam);
	}
}

效果图如下：