Android 布局系列（五）：GridLayout 网格布局的使用

引言

在 Android 开发中，布局管理是 UI 设计中的重要环节。随着应用界面的复杂性增加，开发者需要掌握各种布局方式来应对不同的需求。除了常见的 LinearLayout、RelativeLayout和ConstraintLayout，Android还提供了一个非常使用的布局 -- GridLayout。

GridLayout 布局允许我们将界面元素按网格的方式进行排列，像表格一样分列分行。它为开发者提供了更高的灵活性，尤其是在需要精确控制多个子视图在行列中的位置时。尽管 GridLayout 在 Android开发中并不像LinearLayout和ConstraintLayout那样普遍使用，但在特定的场景下，它却能发挥巨大的作用，比如表单、计算器、日历等布局。

本文将深入介绍 GridLayout 布局的基本概念、常用属性、实际应用以及如何在 Android 开发中充分利用它，帮助你更好地应对复杂布局的挑战。

GridLayout 的基本概念

GridLayout 将视图放置在一个由行和列组成的网格中，可以精确控制每个视图的位置和大小。开发者可以根据需求设置网格的行数和列数。每个子视图都可以被放置在特定的行和列中，并且可以跨越多个行或列。这种布局方式特别适用于需要多个元素按规则排列的场景，如表单、计算器、日历等。

GridLayout 的常用属性

GridLayout 布局通过多个关键属性来控制子视图的排列和行为。下面介绍一些常用的属性，它们对于精确控制网格布局至关重要。

1. layout_row 和 layout_column

这两个属性用于指定视图所在的行和列。每个子视图都可以通过 layout_row 和 layout_column 来指定位置。

layout_row：定义子视图所在的行数。
layout_column：定义子视图所在的列数。

例如，如果我们有一个 GridLayout，并希望将一个按钮放置在第二行、第一列，可以这样进行设置：

XML 复制代码

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_row="1"
    app:layout_column="0" />

2. layout_rowSpan和layout_columnSpan

这两个属性用于定义子视图占据的行数或列数，即当你希望某个子视图跨越多个行或列时，可以使用这两个属性。

layout_rowSpan：定义子视图占据的行数。
layout_columnSpan：定义子视图占据的列数。

例如，如果你想让一个视图横跨两列，可以设置：

XML 复制代码

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Span Button"
    app:layout_row="0"
    app:layout_column="0"
    app:layout_columnSpan="2" />

3. layout_gravity

layout_gravity 属性用于设置子视图在其单元格中的对齐方式。它定义了视图相对于其所在单元格的对齐方式。

常见的值包括：center、start、end、top、bottom、fill等。

例如，如果你希望某个视图在网格中居中对齐，可以设置：

XML 复制代码

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Centered Button"
    app:layout_row="0"
    app:layout_column="1"
    app:layout_gravity="center" />

4. orientation

GridLayout中的orientation属性，决定了子元素自动排布的方向，是横向还是纵向。

5. columnCount 和 rowCount

这两个属性控制整个 GridLayout 的行列数量，通常需要在布局的根元素中进行设置。

columnCount：设置GridLayout的列数。
rowCount：设置GridLayout的行数。

例如，设置 3 列和 2 行：

XML 复制代码

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:columnCount="3"
    app:rowCount="2">
    <!-- 子视图 -->
</GridLayout>

6. layout_margin和layout_padding

这些属性用于控制子视图与网格单元格边界的间距。layout_margin控制外部间距，layout_padding控制内部间距。

例如：

XML 复制代码

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Margin Button"
    app:layout_row="1"
    app:layout_column="1"
    android:layout_margin="10dp" />

GridLayout 的使用示例

在这个示例中，我们将使用 GridLayout 来创建一个基础的计算器界面。计算器将包含一个显示区域和若干个数字及操作符按钮，所有按钮都将按网格方式排列。

XML 复制代码

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:rowCount="6"
    android:orientation="horizontal"
    android:layout_marginTop="200dp"
    android:id="@+id/main">
<!--第一行-->
    <TextView
        android:layout_columnSpan="4"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#999234"
        android:layout_gravity="fill"
        android:padding="16dp"
        android:text="0"
        android:textColor="#FFFFFF"
        android:textSize="36sp" />

    <!-- 第二行：回退，清空 -->
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="回退"
        android:layout_margin="5dp"/>
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="清空"
        android:layout_margin="5dp"
         />
<!-- 第三行 + 1 2 3-->
    <Button android:text="+"
        android:layout_margin="5dp"/>
    <Button android:text="1"
        android:layout_margin="5dp"/>
    <Button android:text="2"
        android:layout_margin="5dp"/>
    <Button android:text="3"
        android:layout_margin="5dp"/>

    <!-- 第三行：- 4, 5, 6, - -->
    <Button android:text="-"
        android:layout_margin="5dp"/>
    <Button android:text="4"
        android:layout_margin="5dp"/>
    <Button android:text="5"
        android:layout_margin="5dp"/>
    <Button android:text="6"
        android:layout_margin="5dp"/>

    <!-- 第四行：* 7, 8, 9, * -->
    <Button android:text="*"
        android:layout_margin="5dp"/>
    <Button android:text="7"
        android:layout_margin="5dp"/>
    <Button android:text="8"
        android:layout_margin="5dp"/>
    <Button android:text="9"
        android:layout_margin="5dp"/>
    <!-- 第五行：/ 0, ., =, / -->
    <Button android:text="/"
        android:layout_margin="5dp"/>
    <Button android:text="0"
        android:layout_margin="5dp"/>
    <Button android:text="."
        android:layout_margin="5dp"/>
    <Button android:text="="
        android:layout_margin="5dp"/>
</GridLayout>

计算机的布局共有6行4列。
显示区域，位于第一行，使用TextView展示计算结果，横跨4列，填充方式layout_gravity设置为fill 充满单元格。
功能按钮，包括"回退"、"清空"的功能按钮，分布在第二行，每个按钮横跨2列。
数字与运算符按钮，从第三行到第五行，每行最多4个按钮。

效果如下

结语

通过这次实现，我们展示了如何利用 GridLayout 布局来创建一个简单而实用的计算器界面。GridLayout 提供了灵活的网格系统，让我们能够轻松地安排和对齐每个按钮，确保布局既美观又符合用户的操作习惯。

虽然我们实现的只是一个基础的计算器界面，但通过这种布局方式，开发者可以进一步扩展功能，比如添加更多的操作符、实现历史记录、支持更多复杂的计算等。总的来说，GridLayout 是一个功能强大的布局工具，在很多需要精确对齐和分布的场景下都能大显身手。

希望这篇文章能帮助大家更好地理解和使用 GridLayout。