Android | Abhi Android中的表格布局教程示例

Table Layout Tutorial With Example In Android

In Android, Table Layout is used to arrange the group of views into rows and columns. Table Layout containers do not display a border line for their columns, rows or cells. A Table will have as many columns as the row with the most cells.

A table can also leave the cells empty but cells can’t span the columns as they can in HTML(Hypertext markup language).

Table Of Contents

1 Important Points About Table Layout In Android:
2 Basic Table Layout code in XML:
3 Attributes of TableLayout in Android:
4 Android Studio中的TableLayout示例：

Important Points About Table Layout In Android:

For building a row in a table we will use the <表格行> element. Table row objects are the child views of a table layout.
Each row of the table has zero or more cells and each cell can hold only one view object like ImageView, TextView or any other view.
Total width of a table is defined by its parent container
Column can be both stretchable and shrinkable. If shrinkable then the width of column can be shrunk to fit the table into its parent object and if stretchable then it can expand in width to fit any extra space available.

Important Note: We cannot specify the width of the children’s of the Table layout. Here, width always match parent width. However, the height attribute can be defined by a child; default value of height attribute is wrap content.

Basic Table Layout code in XML:

<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android"
    android:layout\u width=“匹配父项”
    android:layout\u height=“match\u parent”
    android:collapseColumns=“0”><！--折叠表格行的第一列-->


    <!-- 表格布局的第一行-->
    <表格行
        android:id="@+id/row1"
        android:layout\u width=“填充父对象”
        android:layout\u height=“wrap\u content”>

        
        
    </表格行>
</表格布局>

Attributes of TableLayout in Android:

Now let’s we discuss some important attributes that help us to configure a table layout in XML file (layout).

1. id: id属性用于唯一标识表布局。

<表格布局
android:id=“@+id/simpleTableLayout”
android:layout\u width=“匹配父项”
android:layout\u height=“match\u parent/>

2、拉伸柱： “拉伸列”属性用于在表布局中更改列的默认宽度，该宽度设置为等于最宽列的宽度，但我们也可以使用该属性拉伸列以占用可用空间。分配给此属性的值可以是单个列编号，也可以是以逗号分隔的列编号列表（1、2、3…n）。

如果该值为1，则第二列将被拉伸以占用行中的任何可用空间，因为列号从0开始。

如果该值为0,1，则会拉伸表的第一列和第二列，以占用行中的可用空间。

如果值为“*”，则会拉伸所有列以占用可用空间。

下面是表格布局的“拉伸列”属性的示例代码，其中包含了拉伸布局第一列的说明。

<?xml版本=“1.0”编码=“utf-8”？>

    <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android"
        android:id=“@+id/simpleTableLayout”
        android:layout\u width=“匹配父项”
        android:layout\u height=“match\u parent”
        android:stretchColumns=“1”><！--拉伸布局的第二列-->

        <!-- 表格布局的第一行-->
        <表格行

            android:id=“@+id/第一行”
            android:layout\u width=“填充父对象”
            android:layout\u height=“wrap\u content”>

            <!-- 行的第一个元素-->
            <文本视图

                android:id=“@+id/simpleTextView”
                android:layout\u width=“包装内容”
                android:layout\u height=“包装内容”
                android:background=“#b0b0b0”
                android：padding=“18dip”
                android:text=“text 1”
                android:textColor=“#000”
                android:textSize=“12dp”/

            <文本视图

                android:id=“@+id/simpleTextView”
                android:layout\u width=“包装内容”
                android:layout\u height=“包装内容”
                android:background=“#FF0000”
                android：padding=“18dip”
                android:text=“文本2”
                android:textColor=“#000”
                android:textSize=“14dp”/>

        </表格行>
    </表格布局>

3、收缩柱： 收缩列属性用于收缩或减小列的宽度。我们可以为此属性指定单个列或以逗号分隔的列编号列表。指定列中的内容将自动换行以减小其宽度。

如果该值为0，则第一列的宽度会收缩或减小，方法是将其内容换行。

如果该值为0,1，则第一列和第二列都会收缩或通过文字环绕其内容而减少。

如果值为“*”，则所有列的内容都将进行字包装以缩小其宽度。

下面是表布局的收缩列属性的示例代码，其中包括我们收缩布局的第一列的说明。

<?xml版本=“1.0”编码=“utf-8”？>
<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android"
    android:layout\u width=“匹配父项”
    android:layout\u height=“match\u parent”
    android:shrinkColumns=“0”><！--收缩布局的第一列-->


    <!-- 表格布局的第一行-->
    <表格行
        android:id=“@+id/第一行”
        android:layout\u width=“填充父对象”
        android:layout\u height=“wrap\u content”>

        <!-- 第一行的第一个元素-->
        <文本视图
            android:layout\u width=“包装内容”
            android:layout\u height=“包装内容”
            android:background=“#b0b0b0”
            android：padding=“18dip”
            android:text=“收缩列示例”
            android:textColor=“#000”
            android:textSize=“18dp”/>

    </表格行>
</表格布局>

4、折叠生态柱： collapse columns属性用于折叠或不可见表布局的列。这些列是表信息的一部分，但不可见。

如果值为0，则第一列显示为折叠，即它是表的一部分，但不可见。

下面是折叠列的示例代码，其中包含解释，我们折叠表的第一列意味着第一列是表的一部分，但它不可见，因此您只能在屏幕截图中看到第二列。

<?xml版本=“1.0”编码=“utf-8”？>
<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android"
    android:layout\u width=“匹配父项”
    android:layout\u height=“match\u parent”
    android:collapseColumns=“0”><！--折叠表格行的第一列-->


    <!-- 表格布局的第一行-->
    <表格行
        android:id=“@+id/simpleTableLayout”
        android:layout\u width=“填充父对象”
        android:layout\u height=“wrap\u content”>

        <!-- 作为表的一部分但不可见的行的第一个元素-->
        <文本视图
            android:layout\u width=“包装内容”
            android:layout\u height=“包装内容”
            android:background=“#b0b0b0”
            android：padding=“18dip”
            android:text=“列1”
            android:textColor=“#000”
            android:textSize=“18dp”/>

        <!-- 屏幕截图中显示的行的第二个元素-->
        <文本视图
            android:layout\u width=“包装内容”
            android:layout\u height=“包装内容”
            android:background=“#b0b0b0”
            android：padding=“18dip”
            android:text=“第2列”
            android:textColor=“#000”
            android:textSize=“18dp”/>
    </表格行>
</表格布局>

Android Studio中的TableLayout示例：

下面是Android中的一个表格布局示例，其中显示一个登录表单，其中包含两个字段用户名和密码，以及一个登录按钮每当用户点击按钮将使用Toast显示消息。

下面您可以下载项目代码，请参阅最终输出和示例的逐步说明：

下载代码 ?

步骤1： 创建新项目并将其命名为TableLayoutExample

第2步： 打开res->布局->activity\u main。xml（或）main。xml 并添加以下代码：

在此步骤中，我们打开 xml 文件（activity\u main。xml )并使用添加用于显示用户名和密码字段的代码文本视图和编辑文本只需一次登录按钮.

<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android"
    android:layout\u width=“匹配父项”
    android:layout\u height=“match\u parent”
    android：背景=“#000”
    android：方向=“垂直”
    android:stretchColumns=“1”>

    <TableRow android:padding=“5dip”>

        <文本视图
            android:layout\u height=“包装内容”
            android:layout\u marginBottom=“20dp”
            android:layout\u span=“2”
            android:gravity=“center\u horizontal”
            android:text=“@字符串/登录表单”
            android:textColor=“#0ff”
            android:textSize=“25sp”
            android:textStyle=“bold”/>
    </表格行>

    <表格行>

        <文本视图
            android:layout\u height=“包装内容”
            android:layout\u column=“0”
            android:layout\u marginLeft=“10dp”
            android:text=“@字符串/用户名”
            android:textColor=“#fff”
            android:textSize=“16sp”/>

        <编辑文本
            android:id=“@+id/用户名”
            android:layout\u height=“包装内容”
            android:layout\u column=“1”
            android:layout\u marginLeft=“10dp”
            android：背景=“#fff”
            android:hint=“@字符串/用户名”
            android：padding=“5dp”
            android:textColor=“#000”/>
    </表格行>

    <表格行>

        <文本视图
            android:layout\u height=“包装内容”
            android:layout\u column=“0”
            android:layout\u marginLeft=“10dp”
            android:layout\u marginTop=“20dp”
            android:text=“@字符串/密码”
            android:textColor=“#fff”
            android:textSize=“16sp”/>

        <编辑文本
            android:id=“@+id/密码”
            android:layout\u height=“包装内容”
            android:layout\u column=“1”
            android:layout\u marginLeft=“10dp”
            android:layout\u marginTop=“20dp”
            android：背景=“#fff”
            android:hint=“@字符串/密码”
            android：padding=“5dp”
            android:textColor=“#000”/>
    </表格行>


    <TableRow android:layout\u marginTop=“20dp”>

        <按钮
            android:id=“@+id/登录”
            android:layout\u height=“包装内容”
            android:layout\u gravity=“中心”
            android:layout\u span=“2”
            android:background=“#0ff”
            android:text=“@字符串/登录”
            android:textColor=“#000”
            android:textSize=“20sp”
            android:textStyle=“bold”/>
    </表格行>
</表格布局>

步骤3： 打开src->包-> 主要活动。Java语言

在这一步中，我们打开MainActivity并添加代码来启动编辑文本和按钮，然后在按钮上执行click事件，并使用Toast显示消息。

包示例。阿比安德里德。tablelayoutexample；

导入android。支持v7.app。AppCompatActivity；
导入android。操作系统。捆
导入android。看法菜单
导入android。看法菜单项；
导入android。看法看法
导入android。小装置。按钮
导入android。小装置。干杯

公共类MainActivity扩展了AppCompatActivity{

    @覆盖
    创建时受保护的void（Bundle savedInstanceState）{
        超级的onCreate（savedInstanceState）；
        setContentView（R.layout.activity\u main）；
        //启动按钮
        按钮登录按钮=（按钮）findViewById（R.id.loginBtn）；
        //在按钮上执行click事件
        登录按钮。setOnClickListener（新视图。OnClickListener（）{
            @覆盖
            公共void onClick（视图v）{
                干杯makeText（getApplicationContext（），“Hello AbhiAndroid….！！！”，干杯LENGTH\u LONG）。show（）；//显示toast消息
            }
        });
    }

    
}

第4步： 打开res->值-> 串。xml

在这一步中，我们打开字符串文件，该文件用于存储应用程序的字符串数据。

<资源>
    表格布局示例
    你好，世界</字符串>
    设置
    登录表单
    用户名
    密码
    登录
</资源>

输出：

现在运行该应用程序，您将看到我们在Table Layout中设计的登录表单UI。

关于“Android中表格布局示例教程”的五点思考

埃里克·林科林 说：

2021 12月30日上午5:36

我真的需要知道我将被迫使用表格布局的情况

回复
奥萨马 说：

2019年4月16日上午5:14

我的老师从这个网站复制代码，仍然无法运行或解释它。

回复
奥萨马 说：

2019年4月16日上午5:09

我的老师从这个站点复制了代码，但仍然无法运行它XD

回复
阿克沙尔·卡希亚普 说：

2018年12月22日凌晨4:37

继续，先生。

回复
苏拉答 说：

2018年1月16日上午11:00

谢谢你，先生，这个指导对我的应用程序真的很有帮助

回复

留下答复取消回复

另请阅读：

Premium Project Source Code:

Let’s Connect

Hi, I'm Abhishek, founder and owner of this site. I believe in team work and there is a experienced developer team working on AbhiAndroid with a mission to simplify learning of Android App Development.
CONNECT WITH ME:
FACEBOOK | INSTAGRAM

学习Android UI

Table Layout Tutorial With Example In Android

Important Points About Table Layout In Android:

Basic Table Layout code in XML:

Attributes of TableLayout in Android:

Android Studio中的TableLayout示例：

关于“Android中表格布局示例教程”的五点思考

留下答复取消回复

Let’s Connect

Connect With AbhiAndroid

学习Android UI

Table Layout Tutorial With Example In Android

Important Points About Table Layout In Android:

Basic Table Layout code in XML:

Attributes of TableLayout in Android:

Android Studio中的TableLayout示例：

DOWNLOAD THIS FREE eBook!

关于“Android中表格布局示例教程”的五点思考

留下答复 取消回复

DOWNLOAD THIS FREE eBook!

Let’s Connect

Connect With AbhiAndroid

DOWNLOAD THIS FREE eBook!

DOWNLOAD THIS FREE eBook!

DOWNLOAD THIS FREE eBook!

See How AbhiAndroid Step By Step Video Training Helps You Master Android App Development

留下答复取消回复

See How AbhiAndroid　Step By Step　Video Training Helps You Master Android App Development