分类：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. 【线段树】HDU 3397 Sequence operation 区间合并

    操作 Change operations: 0 a b change all characters into '0's in [a , b] 1 a b change all characters i ...

  2. Websocket——Websocket原理

    偶然在知乎上看到一篇回帖,瞬间认为之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有.所以转到我博客里,分享一下.比較喜欢看这样的博客,读起来非常轻松.不枯燥,没有布道师的 ...

  3. vb sendmessage 详解2

    首先我们了解一下Windows的消息机制.Windows是一个消息驱动式系统,Windows消息提供应用程序与应用程序之间,应用程序与Windows系统之间进行通信的手段.举个例子,打开记事本程序,该 ...

  4. jqGrid删除多行数据问题

    var consoleDlg = $("#delcostListDlg"); var selectedRowIds = $("#costList").jqGri ...

  5. 使用openssl进行证书格式转换

    各类证书由于存储的内容不同(如是否包含公钥/私钥是否加密存储/单一证书或多证书等).采用编 码不同(DER/BASE64).标准不同(如PEM/PKCS),所以尽管X.509标准规定了证书内容规范,但 ...

  6. TP3.2之引入第三方类库文件和普通.php文件

    1.引入第三方类库 .class.php文件 1.1 类库有写namespace命名空间 namespace Org\Util; class Auth { } 保存到ThinkPHP/Library/ ...

  7. js 动态增加行删除行

    <body> <table id="tableID" border="1" align="center" width=&q ...

  8. 关于iOS 类扩展Extension的进一步理解

    很多人可能会问  iOS的分类和扩展的区别,网上很多的讲解,但是一般都是分类讲的多,而这也是我们平常比较常用的知识:但是,对于扩展,总觉得理解的朦朦胧胧,不够透彻. 这里就讲一下我自己的理解,但是这个 ...

  9. Python 绘图库的使用：matplotlib

    Matplotlib 官方API地址:https://matplotlib.org/ 例子: import matplotlib.pyplot as plt num_list=[1.5,0.6,7.8 ...

  10. UltraEdit程序设置添加到右键菜单

    http://hellofs.blog.51cto.com/6109153/1180681 以前安装UltraEdit软件,在安装过程中选择将其添加到右键菜单,安装完成后就可以正常显示在右键菜单,这样 ...