分类：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);

        }

    }

}

运行观察效果。

【Android】7.3 GridLayout（网格布局）的更多相关文章

  1. Android精通：TableLayout布局，GridLayout网格布局，FrameLayout帧布局，AbsoluteLayout绝对布局，RelativeLayout相对布局

    在Android中提供了几个常用布局: LinearLayout线性布局 RelativeLayout相对布局 FrameLayout帧布局 AbsoluteLayout绝对布局 TableLayou ...

  2. Android零基础入门第32节：新推出的GridLayout网格布局

    原文:Android零基础入门第32节:新推出的GridLayout网格布局 本期主要学习的是网格布局是Android 4.0新增的布局,和前面所学的TableLayout表格布局 有点类似,不过他有 ...

  3. Android之GridLayout网格布局

    1.相关属性 GridLayout网格布局是4.0之后引入的布局方式! android:columnCount="4" //设置列数(4列) android:rowCount=&q ...

  4. GridLayout(网格布局)

    常用属性: 排列对齐: ①设置组件的排列方式:  android:orientation=""     vertical(竖直,默认)或者horizontal(水平) ②设置组件的 ...

  5. android的布局-----GridLayout(网格布局)

    学习导图 (一)简介 网格布局由GridLayout所代表,在android4.0之后新增加的布局管理器,因此需要android4.0之后的版本中使用,如果在更早的平台使用该布局管理器,则需要导入相应 ...

  6. GridLayout网格布局

    网格布局特点: l  使容器中的各组件呈M行×N列的网格状分布. l  网格每列宽度相同,等于容器的宽度除以网格的列数. l  网格每行高度相同,等于容器的高度除以网格的行数. l  各组件的排列方式 ...

  7. Android——gridLayout(网格布局)

    <?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android=" ...

  8. java 图形化小工具Abstract Window Toolit ;布局管理器FlowLayout流式布局;BorderLayout边界布局；GridLayout网格布局；CardLayou重叠卡片布局；BoxLayout方框布局；绝对定位

    1.FlowLayout流式布局管理器: FlowLayout布局管理器中,组件像水流一样向某方向流动(排列),遇到障碍(边界)就折回,重头开始排列 .在默认情况下,FlowLayout局管理器从左向 ...

  9. 浅谈GridLayout（网格布局）

    Android 4.0 布局-->GridLayout 网格布局 以行列单元格的形式展示内部控件排列,可以实现类似计算机键盘效果 ,也可以实现可自动变行的标签群效果 使用GridLayout , ...

  10. Android学习笔记④——页面的布局方式

    FrameLayout(帧布局) 这个布局的特点是简单的默认把每一个视图组件都放在边框内且放在左上角,即使添加多个视图组件,他们也都是重叠在左上角,新的视图会遮挡住旧的视图.可以根据gravity来改 ...

随机推荐

  1. 深夜闲聊节目：华为 Mate7的指纹识别安全么？

    许久没有写过不论什么东西,近期非常忙并且还要准备找工作之类的,唉... ....今天的文章也不说技术,仅仅是闲聊. 一.手机指纹识别一揽 打开非常多站点.论坛的科技栏目,充斥着各种手机讯息!仿佛手机已 ...

  2. Python面向对象编程 - 一个记事本程序范例(一)

    notebook.py import datetime last_id = 0 class Note: '''Represent a note in the notebook. Match again ...

  3. ZH奶酪：【数据结构与算法】并查集基础

    1.介绍 并查集是一种树型数据结构,用于处理一些不相交集合的合并问题. 并查集主要操作有: (1)合并两个不相交集合: (2)判断两个元素是否属于同一个集合: (3)路径压缩: 2.常用操作 用fat ...

  4. iOS日期加减

    - (NSDate *)jsDateFromBeginDate:(NSDate *)beginDate todays:(int)days { NSDate *dateTemp = [[NSDate a ...

  5. Java从零开始学四十(反射简述一)

    一.JAVA是动态语言吗? 一般而言,说到动态言,都是指在程序运行时允许改变程序结构或者变量类型,从这个观点看,JAVA和C++一样,都不是动态语言. 但JAVA它却有着一个非常突出的动态相关机制:反 ...

  6. PHPCMS V9 加密规则

    PHPCMS V9 加密规则 相关表:v9_admin 加密方式: md5(md5(password)+encrypt) 第一步:对输入的密码32位小写   MD5 对输入的密码进行trim过滤 第二 ...

  7. 笔试题之j2ee

    j2ee部分 1.BS与CS的联系与区别. C/S是Client/Server的缩写.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.InFORMix或 ...

  8. How to hide the create button dynamical tree view in openerp ?

    <tree create="false" edit="false" > <tree attrs="{'create':[(" ...

  9. HDU 5402 Travelling Salesman Problem（棋盘染色 构造 多校啊）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5402 Problem Description Teacher Mai is in a maze wit ...

  10. 【BIEE】导出数据报错

    使用BIEE导出数据的时候,发现个问题,导出过程中,报错如下: 问题解决: 找到文件opmn.xml,路径为:/Middleware/instances/instance1/config/OPMN/o ...