Android Studio新手开发第六天

原创已于 2025-10-10 18:36:22 修改 · 1.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#android studio #android

于 2025-10-10 18:34:25 首次发布

Android Studio开发专栏收录该内容

35 篇文章

订阅专栏

1.网格布局GridLayout

GridLayout 容器自身的属性表

子视图的布局参数表

1.网格布局GridLayout

虽然线性布局能在水平或者垂直方向上排列视图，却只能单行或者单列的布局方式。而相对布局虽然能够实现所行多列但是代码较为复杂不易维护，若改变了其中一个视图的位置那么其他视图排列会混乱。若想实现多行多列且易实现可以使用网格布局GridLayout。

网格布局的排列顺序默认是从左到右、从上到下。先从左到右排列第一行再从第二行排列，以此往复直至所有视图放置完毕。那么又如何设置网格布局的行列数呢？在网格布局有两个重要属性：android:rowCount与android:columnCount。这两个属性分别设置了网格布局的行列数。

以下方代码为例，网格布局的行列数都为2，其中包含了四个视图。它们的分别背景颜色为红、黑、绿、紫。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="2"
    android:columnCount="2"
    tools:context=".SecondMainActivity">

    <TextView
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:background="@color/red"
        android:text="红色"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <TextView
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:background="@color/black"
        android:text="黑色"
        android:textColor="@color/white"
        android:textSize="17sp" />

    <TextView
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:background="@color/green"
        android:text="绿色"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <TextView
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:background="@color/purple_700"
        android:text="紫色"
        android:textColor="@color/white"
        android:textSize="17sp" />

</GridLayout>

上面代码的效果图如下：可以看到网格布局的默认填充方式是从左到右、从上到下的方式排列。那么如果想要指定某个视图在第几行第几列又该怎么做？其实网格布局还有两个重要属性android:layout_row与 android:layout_column。这两个属性其实是网格布局中的子视图的布局参数，分别对应行列的位置，例如android:layout_row="0"， android:layout_column="1"则代表该子视图位于网格布局中的第一行第二列。索引是从0开始的。

下面是代码实例。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="2"
    android:columnCount="2"
    tools:context=".SecondMainActivity">

    <TextView
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:background="@color/red"
        android:gravity="center"
        android:layout_row="1"
        android:layout_column="1"
        android:text="红色"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <TextView
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_row="1"
        android:layout_column="0"
        android:background="@color/black"
        android:text="黑色"
        android:textColor="@color/white"
        android:textSize="17sp" />

    <TextView
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_row="0"
        android:layout_column="1"
        android:background="@color/green"
        android:text="绿色"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <TextView
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_row="0"
        android:layout_column="0"
        android:background="@color/purple_700"
        android:text="紫色"
        android:textColor="@color/white"
        android:textSize="17sp" />

</GridLayout>

下面是上面代码的效果图。在代码中没有改变视图的顺序但是可以看出紫色与红色位置对换，绿色与黑色位置对换了。

GridLayout网格布局的属性可以分为布局容器本身以及容器中子视图的布局参数。下面两个表格分别展示两类属性的一些重要属性。

GridLayout 容器自身的属性表
属性	作用	示例/说明
`android:columnCount`	设置网格的列数。	`android:columnCount="4"` 表示网格有4列。这是最常用的属性之一，定义了网格的垂直结构。
`android:rowCount`	设置网格的行数。	`android:rowCount="3"` 表示网格有3行。行数通常可以不设置，由系统根据子视图自动计算。
`android:orientation`	设置网格的排列方向。	可选项为`horizontal`（水平）或`vertical`（垂直）。 • horizontal（默认）：添加子视图时，先填满一行，再换到下一行。 • vertical：添加子视图时，先填满一列，再换到下一列。
`android:useDefaultMargins`	是否使用默认边距。	设置为`true`时，系统会在子视图之间添加一些默认的边距，让布局看起来不那么紧凑。
`android:alignmentMode`	设置对齐模式。	例如，可以设置为`alignBounds`来对齐子视图的边界，或者`alignMargins`来对齐子视图的边距。
`android:rowOrderPreserved`	是否保留行序。	默认为`true`，表示行索引与屏幕上的Y轴顺序一致。通常不需要修改。
`android:columnOrderPreserved`	是否保留列序。	默认为`true`，表示列索引与屏幕上的X轴顺序一致。通常不需要修改。

子视图的布局参数表
属性	作用	示例/说明
`app:layout_column`	指定子视图从哪一列开始放置。	`app:layout_column="1"` 表示该视图从第1列开始（索引从0开始）。
`app:layout_row`	指定子视图从哪一行开始放置。	`app:layout_row="0"` 表示该视图从第0行开始。
`app:layout_columnSpan`	指定子视图横向跨越的列数。	`app:layout_columnSpan="2"` 表示该视图将占据2列的宽度。
`app:layout_rowSpan`	指定子视图纵向跨越的行数。	`app:layout_rowSpan="3"` 表示该视图将占据3行的高度。
`app:layout_gravity`	指定子视图在其分配的网格区域内的对齐方式。	这是非常重要的属性，用于控制视图的拉伸和对齐。 • `fill`：填充整个分配的网格区域。 • `fill_horizontal`：水平填充。 • `fill_vertical`：垂直填充。 • `center`：居中。 • `left`、`top`、`right`、`bottom`：靠左、上、右、下对齐。

下面代码是代码实例，主要添加了子视图的视图跨越以及视图填充。代码中紫色添加了三个属性android:layout_rowSpan="2"、 android:layout_columnSpan="2" 、android:layout_gravity="fill"，这分别代表着该视图跨越两行，跨越两列以及填充整个分配的网格区域。绿色添加了两个属性android:layout_rowSpan="3"与 android:layout_gravity="fill"，这分别代表着该视图跨越三列以及填充分配的网格区域。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="300dp"
    android:layout_height="180dp"
    android:rowCount="3"
    android:columnCount="3"
    tools:context=".SecondMainActivity">

    <TextView
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:background="@color/red"
        android:gravity="center"
        android:layout_row="2"
        android:layout_column="1"
        android:layout_rowSpan="1"
        android:text="红色"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_row="2"
        android:layout_column="0"
        android:background="@color/black"
        android:text="黑色"
        android:textColor="@color/white"
        android:textSize="17sp" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_row="0"
        android:layout_column="2"
        android:layout_rowSpan="3"
        android:layout_gravity="fill"
        android:background="@color/green"
        android:text="绿色"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_rowSpan="2"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:background="@color/purple_700"
        android:text="紫色"
        android:textColor="@color/white"
        android:textSize="17sp" />

</GridLayout>

下面是上面代码的效果图。可以看出紫色跨越了两行两列，绿色跨越了三列，黑色与红色没有跨越。

在使用子视图的android:layout_rowSpan与 android:layout_columnSpan这两个属性时要配合使用 android:layout_gravity来填充分配的网格区域，不然可能会达不到目的的显示效果。若将上面的代码中的紫色与绿色视图中的属性android:layout_gravity="fill"去掉则会出现下面图片所示的效果。可以看出紫色与绿色部分并没有按预期显示。因为已经设置了子视图的宽高那么在显示时默认使用已设定的宽高，这时候需要使用android:layout_gravity="fill"让GridLayout重新根据权重和跨度自动计算其实际宽度。