GridLayout（网格布局）

Posted 2020-06-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了GridLayout（网格布局）相关的知识，希望对你有一定的参考价值。

分类：C#、android、VS2015；

创建日期：2016-02-10

一、简介

Android 4.0（API 14）开始提供的GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。

GridLayout使用与LinearLayout类似的API，只不过是修改了一下相关的标签而已。

1、默认布局方式—先行后列

GridLayout默认按先行后列的方式依次显示，子元素默认按照wrap_content的方式显示。如果不希望子元素显式指定其所在的行列位置，此时只需要在GridLayout中仅指定列数（columnCount）即可，不需要指定所占的行数。

2、将布局改为先列后行

如果需要改变子元素默认的布局方式，比如改为先列后行，此时应该在GridLayout的开始标记内指定，而不是在子元素中指定。

要按先列后行的方式显示，且子元素也不需要指定其所在的行列位置，此时只需要在GridLayout中仅指定行数（rowCount）即可，不需要指定所占的列数。

3、平均分布各行内的单元格

如果希望平均分布各行内的单元格，而且希望其占满该行屏幕，只需要在每一行嵌入一个LinearLayout即可。

4、平均分布各行内的单元格且单元格之间分隔一定的外边距

设置子元素的margin即可。

5、Space、rowSpan、columnSpan

如果需要设置某控件跨越多行或多列，只需将该子控件的android:layout_rowSpan或者layout_columnSpan属性设置为数值，再设置其layout_gravity属性即可，前一个设置表明该控件跨越的行数或列数，后一个设置表明该控件填满所跨越的整行或整列。

要让子元素占据空白的单元格（比如以后再填充它），此时可以使用称为Space的子元素。

Space的另一个用途是用它指定行间距或者列间距。比如，对于一个4行3列的网格布局，如果希望第0行和第1行之间的间距是20dp，此时不需要对每个子元素都添加间距，只需要添加一个Space，将其columnSpan设置为3，然后一次性指定间距即可。

6、子元素显式指定其所在的单元格位置

如果希望某控件显示在固定的行或列，只需设置该控件的android:layout_row和android:layout_column属性即可，注意：行、列序号都是从0开始。

例如：

<GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rowCount="2"
        android:columnCount="3"
        android:useDefaultMargins="true"
        android:background="#FFE4C4">
        <TextView
            android:text="元素0"
            android:layout_row="0"
            android:layout_column="0"
            android:textSize="20dp" />
        <TextView
            android:text="元素1"
            android:layout_row="0"
            android:layout_column="1"
            android:textSize="20dp" />
        <TextView
            android:text="元素2"
            android:layout_row="0"
            android:layout_column="2"
            android:textSize="20dp" />
        <TextView
            android:text="元素3"
            android:layout_row="1"
            android:layout_column="0"
            android:textSize="20dp" />
        <TextView
            android:text="元素4"
            android:layout_row="1"
            android:layout_column="1"
            android:textSize="20dp" />
        <TextView
            android:text="元素5"
            android:layout_row="1"
            android:layout_column="2"
            android:textSize="20dp" />
    </GridLayout>

二、示例—Demo02GridLayout

1、设计界面

再次提醒一下，当控件太多时，利用文档大纲选择某个控件，然后通过【属性】窗口设置其属性，是最简单和方便的办法。

2、运行效果

3、添加Demo02GridLayout.axml文件

在layout文件夹下添加该文件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="（1）默认排列方式--先行后列"
      android:layout_margin="5dp" />
  <GridLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:columnCount="3"
      android:useDefaultMargins="true"
      android:background="#FFE4C4">
    <TextView
        android:text="元素0" />
    <TextView
        android:text="元素1" />
    <TextView
        android:text="元素2" />
    <TextView
        android:text="元素3" />
    <TextView
        android:text="元素4" />
    <TextView
        android:text="元素5" />
  </GridLayout>
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="（2）指定排列方式--按先列后行排列"
      android:layout_margin="5dp" />
  <GridLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:useDefaultMargins="true"
      android:rowCount="2"
      android:background="#FFE4C4">
    <TextView
        android:text="元素0" />
    <TextView
        android:text="元素1" />
    <TextView
        android:text="元素2" />
    <TextView
        android:text="元素3" />
    <TextView
        android:text="元素4" />
    <TextView
        android:text="元素5" />
  </GridLayout>
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="（3）横向平均分布"
      android:layout_margin="5dp" />
  <GridLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:columnCount="1"
      android:background="#FFE4C4"
      android:useDefaultMargins="true">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
      <TextView
          android:text="元素0"
          android:gravity="center_horizontal"
          android:background="#aa0000"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff" />
      <TextView
          android:text="元素1"
          android:gravity="center_horizontal"
          android:background="#00aa00"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff" />
      <TextView
          android:text="元素2"
          android:gravity="center_horizontal"
          android:background="#0000aa"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff" />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
      <TextView
          android:text="元素3"
          android:gravity="center_horizontal"
          android:background="#aa0000"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff" />
      <TextView
          android:text="元素4"
          android:gravity="center_horizontal"
          android:background="#00aa00"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff" />
      <TextView
          android:text="元素5"
          android:gravity="center_horizontal"
          android:background="#0000aa"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff" />
    </LinearLayout>
  </GridLayout>
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="（4）横向平均分布带自定义的间距"
      android:layout_margin="5dp" />
  <GridLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:columnCount="1"
      android:background="#FFE4C4"
      android:useDefaultMargins="true">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
      <TextView
          android:text="元素0"
          android:gravity="center_horizontal"
          android:background="#aa0000"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff"
          android:layout_marginRight="8dp" />
      <TextView
          android:text="元素1"
          android:gravity="center_horizontal"
          android:background="#00aa00"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff"
          android:layout_marginRight="8dp" />
      <TextView
          android:text="元素2"
          android:gravity="center_horizontal"
          android:background="#0000aa"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff" />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
      <TextView
          android:text="元素3"
          android:gravity="center_horizontal"
          android:background="#aa0000"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff"
          android:layout_marginRight="8dp" />
      <TextView
          android:text="元素4"
          android:gravity="center_horizontal"
          android:background="#00aa00"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff"
          android:layout_marginRight="8dp" />
      <TextView
          android:text="元素5"
          android:gravity="center_horizontal"
          android:background="#0000aa"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:textColor="#ffffff" />
    </LinearLayout>
  </GridLayout>
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="（5）Space、rowSpan、columnSpan的用法"
      android:layout_margin="5dp" />
  <GridLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:columnCount="5"
      android:background="#FFE4C4"
      android:useDefaultMargins="true">
    <TextView
        android:text="元素0"
        android:layout_rowSpan="3"
        android:background="#aa0000"
        android:textColor="#ffffff"
        android:gravity="fill_vertical"
        android:layout_gravity="fill_vertical"
        android:textSize="24dp" />
    <TextView
        android:text="元素1"
        android:background="#aa0000"
        android:textColor="#ffffff"
        android:textSize="20dp" />
    <Space />
    <TextView
        android:text="元素2"
        android:background="#00aa00"
        android:textColor="#ffffff"
        android:textSize="20dp" />
    <TextView
        android:text="元素3"
        android:layout_rowSpan="3"
        android:background="#00aa00"
        android:textColor="#ffffff"
        android:gravity="fill_vertical"
        android:layout_gravity="fill_vertical"
        android:textSize="24dp" />
    <TextView
        android:text="元素4"
        android:layout_columnSpan="3"
        android:background="#0000aa"
        android:textColor="#ffffff"
        android:layout_gravity="fill_horizontal"
        android:gravity="center_horizontal"
        android:textSize="20dp" />
    <TextView
        android:text="元素5"
        android:background="#aa0000"
        android:textColor="#ffffff"
        android:textSize="20dp" />
    <TextView
        android:text="元素6"
        android:background="#00aa00"
        android:textColor="#ffffff"
        android:textSize="20dp" />
    <TextView
        android:text="元素7"
        android:background="#0000aa"
        android:textColor="#ffffff"
        android:textSize="20dp" />
  </GridLayout>
</LinearLayout>

4、添加Demo02GridLayout.cs文件

在SrcDemos文件夹下添加该文件。

using Android.App;
using Android.OS;
namespace ch07demos.SrcDemos
{
    [Activity(Label = "Demo02GridLayout")]
    public class Demo02GridLayout : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.Demo02GridLayout);
        }
    }
}

运行观察效果。

以上是关于GridLayout（网格布局）的主要内容，如果未能解决你的问题，请参考以下文章

Kotlin 中的网格布局？

Android六大布局详解——GridLayout（网格布局）

安卓网格布局如何用java代码实现跨多行跨多列

GridLayout（网格布局）

GridLayout(网格布局)

Android之GridLayout网格布局