【Android】7.3 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);
        }
    }
}

 

運行觀察效果。