Android 布局系列（五）：GridLayout 网格布局的使用
布局系列Android 布局系列（一）：LinearLayout 使用指南-CSDN博客Android 布局系列（二）：FrameLayout 布局的应用-CSDN博客Android 布局系列（三）：RelativeLayout 使用指南_relativelayout布局怎样使用-CSDN博客Android 布局系列（四）：ConstraintLayout 使用指南-CSDN博客Android 布局系列（五）：GridLayout 网格布局的使用-CSDN博客Android布局系列（六）：TableLayout 表格布局的使用-CSDN博客引言
在 Android 开发中，布局管理是 UI 设计中的重要环节。随着应用界面的复杂性增加，开发者需要把握各种布局方式来应对不同的需求。除了常见的 LinearLayout、RelativeLayout和ConstraintLayout，Android还提供了一个非常使用的布局 -- GridLayout。
GridLayout 布局答应我们将界面元素按网格的方式举行分列，像表格一样分列分行。它为开发者提供了更高的机动性，尤其是在需要精确控制多个子视图在行列中的位置时。尽管 GridLayout 在 Android开发中并不像LinearLayout和ConstraintLayout那样普遍使用，但在特定的场景下，它却能发挥巨大的作用，比如表单、计算器、日历等布局。
本文将深入介绍 GridLayout 布局的根本概念、常用属性、现实应用以及怎样在 Android 开发中充分使用它，资助你更好地应对复杂布局的挑战。
GridLayout 的根本概念
GridLayout 将视图放置在一个由行和列组成的网格中，可以精确控制每个视图的位置和大小。开发者可以根据需求设置网格的行数和列数。每个子视图都可以被放置在特定的行和列中，而且可以超过多个行或列。这种布局方式特别适用于需要多个元素按规则分列的场景，如表单、计算器、日历等。
GridLayout 的常用属性
https://i-blog.csdnimg.cn/direct/b2d8162b919548deb9693d77f9cafb7b.png
GridLayout 布局通过多个关键属性来控制子视图的分列和行为。下面介绍一些常用的属性，它们对于精确控制网格布局至关重要。
1. layout_row 和 layout_column
这两个属性用于指定视图地点的行和列。每个子视图都可以通过 layout_row 和 layout_column 来指定位置。
[*]layout_row：界说子视图地点的行数。
[*]layout_column：界说子视图地点的列数。
例如，假如我们有一个 GridLayout，并盼望将一个按钮放置在第二行、第一列，可以如许举行设置：
<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：界说子视图占据的列数。
例如，假如你想让一个视图横跨两列，可以设置：
<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等。
例如，假如你盼望某个视图在网格中居中对齐，可以设置：
<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 行：
<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控制内部间距。
例如：
<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 来创建一个底子的计算器界面。计算器将包罗一个表现区域和多少个数字及操纵符按钮，所有按钮都将按网格方式分列。
<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个按钮。
效果如下
https://i-blog.csdnimg.cn/direct/ddf4bea3b88848da84408bc763cbd1fa.png
结语
通过这次实现，我们展示了怎样使用 GridLayout 布局来创建一个简单而实用的计算器界面。GridLayout 提供了机动的网格系统，让我们能够轻松地安排和对齐每个按钮，确保布局既美观又符合用户的操纵习惯。
虽然我们实现的只是一个底子的计算器界面，但通过这种布局方式，开发者可以进一步扩展功能，比如添加更多的操纵符、实现历史记载、支持更多复杂的计算等。总的来说，GridLayout 是一个功能强大的布局工具，在许多需要精确对齐和分布的场景下都能大显身手。
盼望这篇文章能资助各人更好地理解和使用 GridLayout。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]