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 的常用属性

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

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

• layout_row：界说子视图地点的行数。
  
• layout_column：界说子视图地点的列数。
  

例如，假如我们有一个 GridLayout，并盼望将一个按钮放置在第二行、第一列，可以如许举行设置：

1. <Button
2.     android:layout_width="wrap_content"
3.     android:layout_height="wrap_content"
4.     android:text="Button"
5.     app:layout_row="1"
6.     app:layout_column="0" />

复制代码

2. layout_rowSpan和layout_columnSpan

这两个属性用于界说子视图占据的行数或列数，即当你盼望某个子视图超过多个行或列时，可以使用这两个属性。

• layout_rowSpan：界说子视图占据的行数。
  
• layout_columnSpan：界说子视图占据的列数。
  

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

1. <Button
2.     android:layout_width="wrap_content"
3.     android:layout_height="wrap_content"
4.     android:text="Span Button"
5.     app:layout_row="0"
6.     app:layout_column="0"
7.     app:layout_columnSpan="2" />

复制代码

3. layout_gravity

layout_gravity 属性用于设置子视图在其单位格中的对齐方式。它界说了视图相对于其地点单位格的对齐方式。
常见的值包括：center、start、end、top、bottom、fill等。
例如，假如你盼望某个视图在网格中居中对齐，可以设置：

1. <Button
2.     android:layout_width="wrap_content"
3.     android:layout_height="wrap_content"
4.     android:text="Centered Button"
5.     app:layout_row="0"
6.     app:layout_column="1"
7.     app:layout_gravity="center" />

复制代码

4. orientation

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

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

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

例如，设置 3 列和 2 行：

1. <GridLayout
2.     android:layout_width="match_parent"
3.     android:layout_height="wrap_content"
4.     app:columnCount="3"
5.     app:rowCount="2">
6.     <!-- 子视图 -->
7. </GridLayout>

复制代码

6. layout_margin和layout_padding

这些属性用于控制子视图与网格单位格界限的间距。layout_margin控制外部间距，layout_padding控制内部间距。
例如：

1. <Button
2.     android:layout_width="wrap_content"
3.     android:layout_height="wrap_content"
4.     android:text="Margin Button"
5.     app:layout_row="1"
6.     app:layout_column="1"
7.     android:layout_margin="10dp" />

复制代码

GridLayout 的使用示例

在这个示例中，我们将使用 GridLayout 来创建一个底子的计算器界面。计算器将包罗一个表现区域和多少个数字及操纵符按钮，所有按钮都将按网格方式分列。

1. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     android:layout_width="wrap_content"
3.     android:layout_height="wrap_content"
4.     android:columnCount="4"
5.     android:rowCount="6"
6.     android:orientation="horizontal"
7.     android:layout_marginTop="200dp"
8.     android:id="@+id/main">
9. <!--第一行-->
10.     <TextView
11.         android:layout_columnSpan="4"
12.         android:layout_marginLeft="5dp"
13.         android:layout_marginRight="5dp"
14.         android:background="#999234"
15.         android:layout_gravity="fill"
16.         android:padding="16dp"
17.         android:text="0"
18.         android:textColor="#FFFFFF"
19.         android:textSize="36sp" />
21.     <!-- 第二行：回退，清空 -->
22.     <Button
23.         android:layout_columnSpan="2"
24.         android:layout_gravity="fill"
25.         android:text="回退"
26.         android:layout_margin="5dp"/>
27.     <Button
28.         android:layout_columnSpan="2"
29.         android:layout_gravity="fill"
30.         android:text="清空"
31.         android:layout_margin="5dp"
32.          />
33. <!-- 第三行 + 1 2 3-->
34.     <Button android:text="+"
35.         android:layout_margin="5dp"/>
36.     <Button android:text="1"
37.         android:layout_margin="5dp"/>
38.     <Button android:text="2"
39.         android:layout_margin="5dp"/>
40.     <Button android:text="3"
41.         android:layout_margin="5dp"/>
43.     <!-- 第三行：- 4, 5, 6, - -->
44.     <Button android:text="-"
45.         android:layout_margin="5dp"/>
46.     <Button android:text="4"
47.         android:layout_margin="5dp"/>
48.     <Button android:text="5"
49.         android:layout_margin="5dp"/>
50.     <Button android:text="6"
51.         android:layout_margin="5dp"/>
53.     <!-- 第四行：* 7, 8, 9, * -->
54.     <Button android:text="*"
55.         android:layout_margin="5dp"/>
56.     <Button android:text="7"
57.         android:layout_margin="5dp"/>
58.     <Button android:text="8"
59.         android:layout_margin="5dp"/>
60.     <Button android:text="9"
61.         android:layout_margin="5dp"/>
62.     <!-- 第五行：/ 0, ., =, / -->
63.     <Button android:text="/"
64.         android:layout_margin="5dp"/>
65.     <Button android:text="0"
66.         android:layout_margin="5dp"/>
67.     <Button android:text="."
68.         android:layout_margin="5dp"/>
69.     <Button android:text="="
70.         android:layout_margin="5dp"/>
71. </GridLayout>

复制代码

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

效果如下

结语

通过这次实现，我们展示了怎样使用 GridLayout 布局来创建一个简单而实用的计算器界面。GridLayout 提供了机动的网格系统，让我们能够轻松地安排和对齐每个按钮，确保布局既美观又符合用户的操纵习惯。
虽然我们实现的只是一个底子的计算器界面，但通过这种布局方式，开发者可以进一步扩展功能，比如添加更多的操纵符、实现历史记载、支持更多复杂的计算等。总的来说，GridLayout 是一个功能强大的布局工具，在许多需要精确对齐和分布的场景下都能大显身手。
盼望这篇文章能资助各人更好地理解和使用 GridLayout。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。