Android学习|布局——GridLayout 表格布局_(可行、列合并)

最新推荐文章于 2025-09-21 11:04:32 发布

原创最新推荐文章于 2025-09-21 11:04:32 发布 · 1w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#android #学习 #java

Android 专栏收录该内容

26 篇文章

订阅专栏

这篇博客详细介绍了Android中的GridLayout布局，包括其行、列的合并特性。讲解了GridLayout的常见属性如orientation、columnCount和rowCount，以及子控件属性如layout_row、layout_column、layout_rowSpan和layout_columnSpan等。通过实例演示了如何设置这些属性来实现布局效果，强调了layout_gravity的重要性，指出单纯的layout_rowSpan和layout_columnSpan设置需要配合layout_gravity才能生效。

Android学习|布局——GridLayout 表格布局

一、GridLayout 行、列都可以进行合并

TableLayout只能设置其占据几列(列合并)，而不能进行行的合并，要进行行的合并，可使用GridLayout布局。

二、常见属性

1、android:orientation ：设置水平显示还是垂直显示
2、android:columnCount ：设置行的显示个数
3、android:rowCount ：设置列的显示个数

一般：设置 columnCount 时，设置orientation 为水平显示 horizontal
设置 rowCount 数时，设置orientation 为垂直显示 vertical

三、子控件属性

1、android:layout_row：显示在第几行
2、android:layout_column：显示在第几列

3、android:layout_rowSpan：横向跨几行
4、android:layout_columnSpan：横向跨几列

5、android:layout_rowWeight ：纵向乘剩余空间分配方式
6、android:layout_columnWeight：横向剩余空间分配方式

7、android:layout_gravity：在网格中的显示位置

layout_rowSpan、layout_columnSpan设置后，不会有明显作用，还需要设置layout_gravity才能起作用。

四、Demo

1、常见属性Demo

GridLayout设置如下属性：

android:orientation=“horizontal”
android:columnCount=“3”

则表格每行3列、水平显示

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="horizontal"
    android:columnCount="3">
    
    <Button
        android:text="1"/>

    <Button
        android:text="2"/>

    <Button
        android:text="3"/>

    <Button
        android:text="4"/>

    <Button
        android:text="5"/>


</GridLayout>

请添加图片描述

2、子控件属性Demo

a、layout_row、layout_column

1-5五个button中
2设置在第1行第0列 (从0开始) (android:layout_row=“1”、android:layout_column=“0”)
5设置在第2行第0列 (从0开始) (android:layout_row=“2”、android:layout_column=“0”)

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:text="1" />

    <Button
        android:text="2"
        android:layout_row="1"
        android:layout_column="0"/>

    <Button
        android:text="3"/>

    <Button
        android:text="4"/>

    <Button
        android:text="5"
        android:layout_row="2"
        android:layout_column="0" />


</GridLayout>

请添加图片描述

b、layout_columnWeight、layout_rowWeight

上面图片中，4右边还有空白，设置4大小占据剩余空间，4的button中，添加android:layout_columnWeight=“2”

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="horizontal">

    <Button
        android:text="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:text="2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_row="1"
        android:layout_column="0" />

    <Button
        android:text="3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:text="4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="2"/>

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


</GridLayout>

请添加图片描述

c、layout_rowSpan、layout_columnSpan、layout_gravity

layout_rowSpan、layout_columnSpan设置后，不会有明显作用，还需要设置layout_gravity才能起作用。

例如:上面代码中，button5添加 android:layout_rowSpan=“2”(横向跨2列)，但是没有生效

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="horizontal">

    <Button
        android:text="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:text="2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_row="1"
        android:layout_column="0" />

    <Button
        android:text="3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:text="4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="2"/>

    <Button
        android:text="5"
        android:layout_row="2"
        android:layout_column="0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_rowSpan="2"/>




</GridLayout>

请添加图片描述
上面可以看出，单纯设置layout_rowSpan没有生效。添加layout_gravity属性 android:layout_gravity=“fill”

完整代码

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="horizontal">

    <Button
        android:text="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:text="2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_row="1"
        android:layout_column="0" />

    <Button
        android:text="3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:text="4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="2"/>

    <Button
        android:text="5"
        android:layout_row="2"
        android:layout_column="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


</GridLayout>