GridLayout(网格布局)

GridLayout 是 Android 开发中的一种 ViewGroup，用于以网格形式（行和列）组织子 View，适合规则的二维布局，如图片网格、计算器按钮或表单。与 TableLayout 类似，但更灵活，支持跨行跨列和动态调整。GridLayout 在 Android 4.0（API 14）引入，适合现代开发，但对于复杂或动态布局，推荐使用 ConstraintLayout 或 RecyclerView。本教程基于 Android Studio（截至 2025 年 9 月，Koala 2024.1.1），详细讲解 GridLayout 的概念、属性、使用方法、示例代码和最佳实践，适合初学者和需要深入理解的开发者。

---

1. GridLayout 概念

• 定义：GridLayout 是一个 ViewGroup，将子 View 排列在指定的行和列中，形成网格结构，子 View 可跨行或跨列。
• 特点：
• 灵活定位：通过 rowSpec 和 columnSpec 指定位置。
• 支持跨行/跨列（类似 HTML 的 rowspan/colspan）。
• 比 TableLayout 更现代，减少嵌套，性能较优。
• 适合规则网格，如图片库、键盘布局。
• 包：android.widget.GridLayout（API 14+）。
• 局限：
• 静态布局，动态内容适配不如 RecyclerView。
• 复杂布局配置繁琐，推荐 ConstraintLayout 替代。

---

2. GridLayout 核心属性

以下是 GridLayout 的常用 XML 属性（res/layout/ 中定义）：

属性	适用对象	描述	示例
android:rowCount	GridLayout	网格行数	android:rowCount="3"
android:columnCount	GridLayout	网格列数	android:columnCount="4"
android:layout_row	子 View	指定子 View 的行索引（从 0 开始）	android:layout_row="1"
android:layout_column	子 View	指定子 View 的列索引	android:layout_column="2"
android:layout_rowSpan	子 View	子 View 跨行数	android:layout_rowSpan="2"
android:layout_columnSpan	子 View	子 View 跨列数	android:layout_columnSpan="2"
android:layout_gravity	子 View	控制子 View 在单元格内的对齐	android:layout_gravity="fill"
android:padding	GridLayout	内边距	android:padding="8dp"

• 注意：
• 行/列索引从 0 开始。
• layout_gravity 可设置为 fill、center 等，控制单元格内对齐。
• 子 View 不需要包裹在类似 TableRow 的容器中，直接添加即可。

---

3. 使用 GridLayout

GridLayout 可以通过 XML 或代码定义，以下展示两种方式。

3.1 XML 布局中使用

以下是一个简单的计算器按钮网格，使用 GridLayout 排列数字按钮。

<!-- Row 0 -->
<Button
    android:id="@+id/button7"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="0"
    android:layout_column="0"
    android:layout_gravity="fill"
    android:text="7" />
<Button
    android:id="@+id/button8"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="0"
    android:layout_column="1"
    android:layout_gravity="fill"
    android:text="8" />
<Button
    android:id="@+id/button9"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="0"
    android:layout_column="2"
    android:layout_gravity="fill"
    android:text="9" />
<Button
    android:id="@+id/buttonDivide"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="0"
    android:layout_column="3"
    android:layout_gravity="fill"
    android:text="/" />

<!-- Row 1 -->
<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="1"
    android:layout_column="0"
    android:layout_gravity="fill"
    android:text="4" />
<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="1"
    android:layout_column="1"
    android:layout_gravity="fill"
    android:text="5" />
<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="1"
    android:layout_column="2"
    android:layout_gravity="fill"
    android:text="6" />
<Button
    android:id="@+id/buttonMultiply"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="1"
    android:layout_column="3"
    android:layout_gravity="fill"
    android:text="*" />

<!-- Row 2 -->
<Button
    android:id="@+id/button1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="2"
    android:layout_column="0"
    android:layout_gravity="fill"
    android:text="1" />
<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="2"
    android:layout_column="1"
    android:layout_gravity="fill"
    android:text="2" />
<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="2"
    android:layout_column="2"
    android:layout_gravity="fill"
    android:text="3" />
<Button
    android:id="@+id/buttonMinus"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="2"
    android:layout_column="3"
    android:layout_gravity="fill"
    android:text="-" />

<!-- Row 3 -->
<Button
    android:id="@+id/button0"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="3"
    android:layout_column="0"
    android:layout_columnSpan="2"
    android:layout_gravity="fill"
    android:text="0" />
<Button
    android:id="@+id/buttonEqual"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="3"
    android:layout_column="2"
    android:layout_gravity="fill"
    android:text="=" />
<Button
    android:id="@+id/buttonPlus"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_row="3"
    android:layout_column="3"
    android:layout_gravity="fill"
    android:text="+" />

• 资源文件（res/values/strings.xml）：

  <resources>
      <string name="app_name">GridLayout App</string>
  </resources>

• Activity（MainActivity.kt）：

  package com.example.myapp

  import android.os.Bundle
  import android.widget.Button
  import androidx.appcompat.app.AppCompatActivity

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

          // 示例：为等于按钮添加点击事件
          findViewById<Button>(R.id.buttonEqual).setOnClickListener {
              // 处理计算逻辑
          }
      }
  }

• 效果：
• 4×4 网格，显示数字和运算符按钮。
• 0 按钮跨两列（layout_columnSpan="2"）。
• 按钮宽度通过 layout_width="0dp" 和 layout_gravity="fill" 平均分配。

3.2 代码中使用

动态创建 GridLayout 和按钮：

package com.example.myapp

import android.os.Bundle
import android.widget.Button
import android.widget.GridLayout
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 创建 GridLayout
        val gridLayout = GridLayout(this).apply {
            layoutParams = GridLayout.LayoutParams(
                GridLayout.LayoutParams.MATCH_PARENT,
                GridLayout.LayoutParams.MATCH_PARENT
            )
            rowCount = 4
            columnCount = 4
            setPadding(16, 16, 16, 16)
        }

        // 按钮标签
        val buttons = listOf("7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", "0", "=", "+")
        var index = 0

        // 创建 4x4 网格按钮
        for (row in 0 until 4) {
            for (col in 0 until 4) {
                if (index < buttons.size) {
                    val button = Button(this).apply {
                        text = buttons[index]
                        layoutParams = GridLayout.LayoutParams().apply {
                            width = 0
                            height = GridLayout.LayoutParams.WRAP_CONTENT
                            rowSpec = GridLayout.spec(row)
                            columnSpec = GridLayout.spec(col, 1f)
                            if (text == "0") { // 0 按钮跨两列
                                columnSpec = GridLayout.spec(col, 2, 1f)
                                col + 1 // 跳过下一列
                            }
                        }
                    }
                    gridLayout.addView(button)
                    index++
                }
            }
        }

        // 设置布局
        setContentView(gridLayout)
    }
}

---

4. GridLayout 与其他布局对比

布局类型	优点	缺点	使用场景
GridLayout	灵活网格，减少嵌套	动态内容适配差，配置复杂	静态网格（如计算器）
ConstraintLayout	灵活，性能优，支持复杂定位	学习曲线稍陡	复杂 UI、响应式设计
TableLayout	简单表格布局	灵活性低，跨行/列复杂	静态表单
RecyclerView	动态列表/网格，高效	需要适配器	动态网格、长列表

• 推荐：GridLayout 适合静态网格布局（如计算器、图片预览）。动态或复杂布局推荐 RecyclerView 或 ConstraintLayout。

---

5. 示例：图片网格布局

以下是一个图片网格界面，使用 GridLayout 显示 2×2 图片。

• 布局文件（res/layout/activity_gallery.xml）：

  <GridLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:rowCount="2"
      android:columnCount="2"
      android:padding="8dp">

      <ImageView
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_row="0"
          android:layout_column="0"
          android:layout_gravity="fill"
          android:src="@drawable/image1"
          android:contentDescription="@string/image1_desc" />

      <ImageView
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_row="0"
          android:layout_column="1"
          android:layout_gravity="fill"
          android:src="@drawable/image2"
          android:contentDescription="@string/image2_desc" />

      <ImageView
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_row="1"
          android:layout_column="0"
          android:layout_gravity="fill"
          android:src="@drawable/image3"
          android:contentDescription="@string/image3_desc" />

      <ImageView
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_row="1"
          android:layout_column="1"
          android:layout_gravity="fill"
          android:src="@drawable/image4"
          android:contentDescription="@string/image4_desc" />

  </GridLayout>

• 资源文件（res/values/strings.xml）：

  <resources>
      <string name="image1_desc">Image 1</string>
      <string name="image2_desc">Image 2</string>
      <string name="image3_desc">Image 3</string>
      <string name="image4_desc">Image 4</string>
  </resources>

• Activity（GalleryActivity.kt）：

  package com.example.myapp

  import android.os.Bundle
  import androidx.appcompat.app.AppCompatActivity

  class GalleryActivity : AppCompatActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContentView(R.layout.activity_gallery)
      }
  }

• 效果：
• 2×2 网格显示四张图片。
• ImageView 使用 layout_gravity="fill" 填充单元格。

---

6. 最佳实践

• 优先 RecyclerView/ConstraintLayout：GridLayout 适合静态网格，动态内容推荐 RecyclerView，复杂布局用 ConstraintLayout。
• 清晰命名：为 View 设置有意义的 ID（如 @+id/button7）。
• 可访问性：
• 添加 contentDescription：
  xml <Button android:contentDescription="Number 7" ... />
• 确保文本大小和对比度符合 WCAG 标准.
• 响应式设计：
• 使用 dp 和 sp 单位。
• 测试多屏幕适配（Android Studio 的 Layout Editor）。
• 版本控制：
• 将布局文件纳入 Git，添加 .gitignore：
  /build /.idea
• 性能优化：
• 避免过多子 View，检查 Overdraw（Layout Inspector）。

---

7. 常见问题与解决方案

问题	解决方法
View 未显示	检查 layout_row/layout_column 是否正确；确保 layout_width/layout_height 合理。
网格不对齐	使用 layout_gravity="fill" 或调整 rowCount/columnCount。
动态内容不适应	切换到 RecyclerView 或 GridView。
跨行/列失效	确保 layout_rowSpan/layout_columnSpan 设置正确，且不冲突。

---

8. 进阶提示

• 迁移到 ConstraintLayout：

  <androidx.constraintlayout.widget.ConstraintLayout ...>
      <Button app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" ... />
      <Button app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toEndOf="@id/button7" ... />
  </androidx.constraintlayout.widget.ConstraintLayout>

• Jetpack Compose 替代：

  @Composable
  fun CalculatorGrid() {
      LazyVerticalGrid(
          columns = GridCells.Fixed(4),
          modifier = Modifier.padding(16.dp),
          contentPadding = PaddingValues(8.dp)
      ) {
          items(listOf("7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", "0", "=", "+")) { text ->
              Button(
                  onClick = {},
                  modifier = Modifier.padding(4.dp)
              ) {
                  Text(text)
              }
          }
      }
  }

• 动态添加 View：

  val button = Button(this).apply {
      text = "New"
      layoutParams = GridLayout.LayoutParams().apply {
          rowSpec = GridLayout.spec(4)
          columnSpec = GridLayout.spec(0)
          width = 0
          height = GridLayout.LayoutParams.WRAP_CONTENT
      }
  }
  gridLayout.addView(button)

---

9. 总结

GridLayout 是一种灵活的网格布局 ViewGroup，适合规则的静态网格，如计算器按钮或图片展示。通过 layout_row、layout_column 和 layout_span 实现精确排列。相比 TableLayout，它更现代且减少嵌套，但动态内容或复杂布局推荐使用 RecyclerView 或 ConstraintLayout。结合 Material Design 和最佳实践，GridLayout 可快速构建规则网格界面。

如果需要更复杂示例（如动态网格、Compose 迁移）、特定场景指导，或其他 Android 相关问题（如 RecyclerView 对比），请告诉我！