Android TableLayout

最新推荐文章于 2024-05-02 02:01:11 发布

cunchi4221

最新推荐文章于 2024-05-02 02:01:11 发布

阅读量1.3k

点赞数 1

文章标签： android 操作系统 css java html

原文链接：https://www.journaldev.com/136/android-tablelayout

版权

Android TableLayout is used to create grids on the screen. It’s one of the ViewGroup classes, which is used to create a table on the screen.

Android TableLayout用于在屏幕上创建网格。它是ViewGroup类之一，用于在屏幕上创建表。

Android TableLayout (Android TableLayout)

As the name suggests, TableLayout is used to create a layout in the form of rows and columns. It’s similar to tables or the excel sheets.

顾名思义，TableLayout用于创建行和列形式的布局。它类似于表格或Excel工作表。

The TableLayout container consists of child views in the form of tablerow.

TableLayout容器由tablerow形式的子视图组成。

A TableRow default layout_width is match_parent and layout_height is wrap_content.

TableRow的默认layout_width是match_parent，而layout_height是wrap_content。

We can define child views inside the TableRow element. Each of the child view is similar to a cell in the excel sheet.

我们可以在TableRow元素内定义子视图。每个子视图都类似于excel工作表中的单元格。

在XML中定义TableLayout (Defining TableLayout in XML)

The following example show how to define a TableLayout in the layout XML file.

下面的示例演示如何在布局XML文件中定义TableLayout。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 1" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 1 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 3" />
    </TableRow>

    <TableRow android:gravity="center">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 3" />


        <Button
            
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 4" />


        <Button
            android:background="@android:color/holo_red_dark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="R 3 C 5" />
    </TableRow>
</TableLayout>

Output:

输出：

The default alignment of TableRow elements is to the left.
TableRow元素的默认对齐方式在左侧。
In the middle TableRow we’ve set the gravity as center.
在中间的TableRow中，我们将重心设置为center 。
The TableLayout aligns its rows to the top.
TableLayout将其行对齐到顶部。

The third TableRow consists of 5 columns and the fifth column goes out of the screen.

第三个TableRow由5列组成，第五列离开屏幕。

How to fix this?

如何解决这个问题？

We have to define the size of the columns to avoid overflow outside the screen.

我们必须定义列的大小，以避免屏幕外的溢出。

在Android TableLayout中调整表列的大小 (Sizing Table Columns in Android TableLayout)

The number of columns in the TableLayout is equal to the highest number of cells in a TableRow. The width of a column is defined by the row with the widest cell in that column.

TableLayout中的列数等于TableRow中的最大单元格数。列的宽度由该列中具有最宽单元格的行定义。

However, we can set the columns to stretch, shrink or collapse as per our requirements.

但是，我们可以根据需要将列设置为拉伸，收缩或折叠。

android:stretchColumns is used to stretch the columns.
android：stretchColumns用于拉伸列。
android:shrinkColumns is used to shrink the columns.
android：shrinkColumns用于缩小列。
android:collapseColumns is used to collapse the columns.
android：collapseColumns用于折叠列。

The columns are present inside a TableRow. Every TableRow has the same number of columns = Highest number of columns.

这些列位于TableRow内部。每个TableRow具有相同的列数=最高列数。

Column numbers start from 0,1,2….

列号从0,1,2…开始。

Inside the cell, we can assign the column number using the layout_column attribute.

在单元格内部，我们可以使用layout_column属性分配列号。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 1" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 1 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 3" />
    </TableRow>

    <TableRow android:gravity="center">
        

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:layout_column="3"
            android:text="R 2 C 1" />
    </TableRow>

</TableLayout>

The second TableRow has the Button placed in the third column. The first and second columns would be empty.

第二个TableRow将Button放在第三列中。第一和第二列将为空。

1. android：stretchColumns (1. android:stretchColumns)

The column number entered would take up the available free space in the TableRows, if any.

输入的列号将占用TableRows中的可用空间（如果有）。

android:stretchColumns = 0 means the first column takes up the free space.

android：stretchColumns = 0表示第一列占用可用空间。

android:stretchColumns = 0,1 means the first and second columns take up the free space.

android：stretchColumns = 0,1表示第一和第二列占用可用空间。

android:strechColumns =”*” means all columns would take up the free space.

android：strechColumns =“ *”表示所有列都将占用可用空间。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*">

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 1" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 1 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 3" />
    </TableRow>

    <TableRow android:gravity="center">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 2" />

    </TableRow>
</TableLayout>

Output:

输出：

If we remove the stretchColumns attribute in the above XML layout, it’ll produce the following output.

如果我们在上述XML布局中删除了StretchColumns属性，它将产生以下输出。

So the stretchColumns would take as much space as it is taken in the row with the most number of columns.

因此，stretchColumns将占用与列数最多的行一样多的空间。

If any of the TableRow has cells that take up ALL the space, then none of the columns in none of the TableRows would be stretched.

如果任何TableRow的单元格都占据了所有空间，则没有TableRows中的任何列都不会被拉伸。

2. android：shrinkColumns (2. android:shrinkColumns)

This works in the opposite way of android:stretchColumns. It shrinks the columns to give you free space.

这与android：stretchColumns相反。它会缩小列以为您提供可用空间。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:shrinkColumns="*"
    android:layout_height="match_parent">

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:layout_column="0"
            android:text="R 1 C 1" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 1 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 3" />
    </TableRow>

    <TableRow android:gravity="center">

        <ImageView
            android:layout_column="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_column="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 3" />


        <Button

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 4" />


        <Button
            android:background="@android:color/holo_red_dark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="R 3 C 5" />


        <Button
            android:background="@android:color/holo_green_dark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="R 3 C 6" />
    </TableRow>
</TableLayout>

Output:

输出：

As you see our first issue in which the columns went beyond the screen is fixed. The shrinkColumns shrinks each column width specified in the attribute by the same amount. Since we’ve set *, it shrinks all by the same. The shrinkColumns attribute is used to fit ALL cells in the screen.

正如您所看到的，我们解决了列超出屏幕范围的第一个问题。 rinkleColumns将属性中指定的每个列宽度缩小相同的数量。既然我们设置了*，它会全部缩小。 rinkleColumns属性用于拟合屏幕中的所有单元格。

3. android：collapseColumns (3. android:collapseColumns)

The android:collapseColumns is used to collapse the specified columns. It means the specified columns would be invisible in the TableRow.

android：collapseColumns用于折叠指定的列。这意味着指定的列在TableRow中将不可见。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:collapseColumns="1,4,5"
    android:layout_height="match_parent">

    <TableRow>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:layout_column="0"
            android:text="R 1 C 1" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 1 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 1 C 3" />
    </TableRow>

    <TableRow android:gravity="center">

        <ImageView
            android:layout_column="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_column="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:text="R 3 C 3" />


        <Button

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="R 3 C 4" />


        <Button
            android:background="@android:color/holo_red_dark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="R 3 C 5" />


        <Button
            android:background="@android:color/holo_green_dark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="R 3 C 6" />
    </TableRow>
</TableLayout>

The first, fifth and sixth columns are collapsed.

第一，第五和第六列已折叠。

Android表布局权重 (Android Table Layout Weights)

We can specify the weights on the TableRow to set the percentage height of the TableRow with respect to the TableLayout.

我们可以在TableRow上指定权重，以设置TableRow相对于TableLayout的百分比高度。

The android:weightSum needs to be set on the TableLayout and android:layout_weight on each of the TableRows.

需要在TableLayout上设置android:weightSum ，在每个TableRows上设置android:layout_weight 。

如何以编程方式创建TableLayout？ (How to Create TableLayout Programmatically?)

We can create a TableLayout as well as TableRows programmatically. In the following application, we’ll create a TableLayout that will dynamically create a Grid of X rows and Y Columns.

我们可以通过编程方式创建TableLayout和TableRows。在下面的应用程序中，我们将创建一个TableLayout，它将动态创建一个X行Y列的网格。

The activity_main.xml layout looks like this:

activity_main.xml布局如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

The code for the MainActivity.kt class is given below:

MainActivity.kt类的代码如下：

package net.androidly.androidlylayouts


import android.app.ActionBar
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import kotlinx.android.synthetic.main.activity_main.*
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.TableLayout
import android.widget.TableRow
import kotlinx.android.synthetic.main.activity_main.view.*
import android.widget.TextView


class MainActivity : AppCompatActivity() {

    val ROWS = 10
    val COLUMNS = 5
    val tableLayout by lazy { TableLayout(this) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        textView.text = "ROWS : $ROWS COLUMNS: $COLUMNS"


        val lp = TableLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
        tableLayout.apply {
            layoutParams = lp
            isShrinkAllColumns = true
        }


        createTable(ROWS, COLUMNS)


    }

    fun createTable(rows: Int, cols: Int) {

        for (i in 0 until rows) {

            val row = TableRow(this)
            row.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT)

            for (j in 0 until cols) {

                val button = Button(this)
                button.apply {
                    layoutParams = TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT,
                            TableRow.LayoutParams.WRAP_CONTENT)
                    text = "R $i C $j"
                }
                row.addView(button)
            }
            tableLayout.addView(row)
        }
        linearLayout.addView(tableLayout)
    }

}

In the for loop until creates a range of indexes that doesn’t include the right-hand side number.

在for循环中， until创建不包含右侧数字的索引范围。

Output:

输出：

AndroidlyLayouts AndroidlyLayouts

翻译自: https://www.journaldev.com/136/android-tablelayout

cunchi4221

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android TableLayout

Android TableLayout is used to create grids on the screen. It’s one of the ViewGroup classes, which is used to create a table on the screen. Android TableLayout用于在屏幕上创建网格。它是ViewGroup类之一，用于在屏幕上创建表。 ...
复制链接

扫一扫