第7章（4） 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);
        }
    }
}

运行观察效果。

时间： 2024-10-27 19:14:27

第7章（4） GridLayout（网格布局）的相关文章

浅谈GridLayout网格布局

Android 4.0 布局-->GridLayout 网格布局 以行列单元格的形式展示内部控件排列,可以实现类似计算机键盘效果 ,也可以实现可自动变行的标签群效果 使用GridLayout ,有效减少了布局的深度,渲染速度也是很快的 类似于LinearLayout 的使用,额外添加了一些特有的属性 先来看下GridLayout的一些属性介绍 1. android:orientation="horizontal|vertical" 内部控件是水平排列的还是竖直排列的 与Linea

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

原文:Android零基础入门第32节:新推出的GridLayout网格布局 本期主要学习的是网格布局是Android 4.0新增的布局,和前面所学的TableLayout表格布局 有点类似,不过他有很多前者没有的东西,也更加好用. 一.认识GridLayout 网格布局实现了控件的交错显示,能够避免因布局嵌套对设备性能的影响,更利于自由布局的开发.网格布局用一组无限细的直线将绘图区域分成行.列和单元,并指定控件的显示区域和控件在该区域的显示方式 下表显示了 GridLayout常用的XML属性

android学习——GridLayout网格布局

GridLayout网格布局 android4.0以上版本出现的GridLayout布局解决了以上问题.GridLayout布局使用虚细线将布局划分为行.列和单元格,也支持一个控件在行.列上都有交错排列.而GridLayout使用的其实是跟LinearLayout类似的API,只不过是修改了一下相关的标签而已,所以对于开发者来说,掌握GridLayout还是很容易的事情.GridLayout的布局策略简单分为以下三个部分: 首先它与LinearLayout布局一样,也分为水平和垂直两种方式,默认

布局Layouts之GridLayout网格布局

原文地址http://blog.csdn.net/jianghuiquan/article/details/8299973 GridLayout网格布局 android4.0以上版本出现的GridLayout布局解决了以上问题.GridLayout布局使用虚细线将布局划分为行.列和单元格,也支持一个控件在行.列上都有交错排列.而GridLayout使用的其实是跟LinearLayout类似的API,只不过是修改了一下相关的标签而已,所以对于开发者来说,掌握GridLayout还是很容易的事情.G

Layouts之GridLayout网格布局

GridLayout网格布局 android4.0以上版本出现的GridLayout布局解决了以上问题.GridLayout布局使用虚细线将布局划分为行.列和单元格,也支持一个控件在行.列上都有交错排列.而GridLayout使用的其实是跟LinearLayout类似的API,只不过是修改了一下相关的标签而已,所以对于开发者来说,掌握GridLayout还是很容易的事情.GridLayout的布局策略简单分为以下三个部分: 首先它与LinearLayout布局一样,也分为水平和垂直两种方式,默认

Android基础入门教程——2.2.5 GridLayout(网格布局)

Android基础入门教程--2.2.5 GridLayout(网格布局) 标签(空格分隔): Android基础入门教程 本节引言: 今天要介绍的布局是Android 4.0以后引入的一个新的布局,和前面所学的TableLayout(表格布局) 有点类似,不过他有很多前者没有的东西,也更加好用, 可以自己设置布局中组件的排列方式 可以自定义网格布局有多少行,多少列 可以直接设置组件位于某行某列 可以设置组件横跨几行或者几列 另外,除了上述内容外,本节还会给大家使用gridLayout时会遇到的

New UI-布局之GridLayout(网格布局)详解

New UI-布局之GridLayout(网格布局)详解  --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流群:小猪Android开发交流群群号:421858269 新Android UI实例大全目录:http://bl

Android之GridLayout网格布局

1.相关属性 GridLayout网格布局是4.0之后引入的布局方式! android:columnCount="4" //设置列数(4列) android:rowCount="6" //设置行数(6行) android:orientation="horizontal" //设置排列方式(默认竖直) android:layout_gravity="fill" //设置对齐方式 android:layout_columnSpan

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

在Android中提供了几个常用布局: LinearLayout线性布局 RelativeLayout相对布局 FrameLayout帧布局 AbsoluteLayout绝对布局 TableLayout表格布局 GridLayout网格布局 TableLayout表格布局 TableLayout的介绍 TableLayout是将子类向分别排列成行和列的布局视图容器,TableLayout是由许多TableRow对象组成的,表格布局以行列的形式管理子控件,每一个单元是一个TableRow或者Vie

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

学习导图 (一)简介 网格布局由GridLayout所代表,在android4.0之后新增加的布局管理器,因此需要android4.0之后的版本中使用,如果在更早的平台使用该布局管理器,则需要导入相应的支持库<android.support.v7.widget.GridLayout> (二)案列----计算器 <?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android