分类：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. ArcGIS中的查询

    最近身体不适,静下心来看了一下以前收集的电子书.下面是<ArcGIS地理信息系统教程_第5版>(李玉龙)第5章“查询”的读书笔记. 1.查询的常见应用: 选择感兴趣的要素:查找哪些要素满足 ...

  2. Python编程 - json字符串的解析

    import json jsonString = '{"arrayOfNums":[{"number":0},{"number":1},{& ...

  3. Hibernate(四)结构-基础语义和事务

    一.基础语义 核心: Configuration SessionFactory Session 二.Configuration Configuration类负责管理Hibernate的配置信息,Hib ...

  4. MariaDB与MySQL并存

    以下是MariaDB官方文档说明,MariaDB如何安装在已经存在MySQL实例的主机上: https://mariadb.com/kb/en/library/installing-mariadb-a ...

  5. maven 将jar包添加到本地仓库

      maven  如何将jar包添加到本地仓库 CreateTime--2018年4月19日12:50:50 Author:Marydon 情景描述:当项目所需的jar包,maven中央仓库中没有该j ...

  6. CSS3动画效果之Transform

    无意中翻看博客发现这个属性,就顺便熟悉了一下,百度了一下和查看了CSS3帮助文档,特整理一下 Transform 适应于对任一DOM元素的2D或3D转换,转换效果有:旋转.拉伸.平移.倾斜等. 目前浏 ...

  7. JAVA虚拟机内存架构

    Java在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途.创建和销毁的时间,有一些是随虚拟机的启动而创建,随虚拟机的退出而销毁,有些则是与线程一一对应,随 ...

  8. [SpriteKit] 系统框架中Cocos2d-x制作小游戏ZombieConga

    概述 使用SpriteKit实现一个简单的游戏, 通过一个游戏来进行SpriteKit的入门, 熟练2D游戏的API, 也可以更好的结合在iOS应用中. 详细 代码下载:http://www.demo ...

  9. 开源APP 源码

    作者:wjh2005链接:http://www.zhihu.com/question/28518265/answer/88750562来源:知乎著作权归作者所有,转载请联系作者获得授权. 1. Cod ...

  10. java项目中classpath路径到底指的是哪里？

    本文转自:http://blog.csdn.net/javaloveiphone/article/details/51994268 1.src不是classpath, WEB-INF/classes和 ...