当前位置：theitroad>Android TableLayout

Android TableLayout

时间：2020-02-23 14:29:20 　来源:igfitidea点击:

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

Android TableLayout

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

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

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

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

在XML中定义TableLayout

下面的示例演示如何在布局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>

输出：

  • TableRow元素的默认对齐方式在左侧。

  • 在中间的TableRow中，我们将重力设为"中心"。

  • TableLayout将其行对齐到顶部。

第三个TableRow由5列组成，第五列从屏幕中消失。

如何解决这个问题？

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

在Android TableLayout中调整表列的大小

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

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

  • android：stretchColumns用于拉伸列。

  • android：shrinkColumns用于缩小列。

  • android：collapseColumns用于折叠列。

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

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

在单元格内部，我们可以使用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>

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

1. android：stretchColumns

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

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

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

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>

输出：

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

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

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

2. android：shrinkColumns

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

输出：

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

3. android：collapseColumns

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>

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

Android表布局权重

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

需要在TableLayout上设置" android：weightSum"，并在每个TableRows上设置" android：layout_weight"。

如何以编程方式创建TableLayout？

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

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>

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

}

在for循环中，"直到"创建一系列不包含右侧数字的索引。

相关推荐

Android ScrollView

Android ScrollView

使用DataBinding的Android SearchView示例教程

使用DataBinding的Android SearchView示例教程

Android SeekBar和RatingBar示例教程

Android SeekBar和RatingBar示例教程

Android SeekBar示例

Android SeekBar示例