Android 布局之GridLayout

原创 2015年07月09日 17:22:20

1 GridLayout简介

GridLayout是Android4.0新提供的网格矩阵形式的布局控件。

GridLayout的继承关系如下:
**java.lang.Object
–> android.view.View
–> android.view.ViewGroup
–> android.widget.GridLayout**

GridLayout包含的属性如下:

android:alignmentMode
属性说明:当设置alignMargins,使视图的外边界之间进行校准。可以取以下值:
alignBounds – 对齐子视图边界。
alignMargins – 对齐子视图边距。

android:columnCount
属性说明:GridLayout的最大列数

android:rowCount
属性说明:GridLayout的最大行数

android:columnOrderPreserved
属性说明: 当设置为true,使列边界显示的顺序和列索引的顺序相同。默认是true。

android:orientation
属性说明:GridLayout中子元素的布局方向。有以下取值:
horizontal – 水平布局。
vertical – 竖直布局。

android:rowOrderPreserved
属性说明: 当设置为true,使行边界显示的顺序和行索引的顺序相同。默认是true。

android:useDefaultMargins
属性说明: 当设置ture,当没有指定视图的布局参数时,告诉GridLayout使用默认的边距。默认值是false。

这些是GridLayout布局本身的属性。

2 GridLayout子元素属性

上面描述的 GridLayout 的属性,是 GridLayout 布局本身的属性;下面 GridLayout 布局中的元素所支持的属性。GridLayout 布局中的元素的属性,定义在 GridLayout.LayoutParams 中。取值如下:

2.1 android:layout_column

属性说明: 显示该空间的列。例如,android:layout_column=”0”,表示在第1列显示该控件;android:layout_column=”1”,表示在第2列显示该控件。

layout文件示例,`

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:rowCount="2"
    android:columnCount="3" >
  <Button
        android:id="@+id/one"
        android:layout_column="1"
        android:text="1"/>
  <Button
        android:id="@+id/two"
        android:layout_column="0"
        android:text="2"/>
   <Button
        android:id="@+id/three"
        android:text="3"/>
  <Button
        android:id="@+id/devide"
        android:text="/"/>

</GridLayout>

这里写图片描述
layout文件说明:
android:orientation=”horizontal” – GridLayout中控件的布局方向是水平布局。
android:rowCount=”2” – GridLayout最大的行数为2行。
android:columnCount=”3” – GridLayout最大的列数为3列。
android:layout_column=”1” – 定义控件one的位于第2列。
android:layout_column=”0” – 定义该控two件的位于第1列。

2.2 android:layout_columnSpan

属性说明: 该控件所占的列数。例如,android:layout_columnSpan=”2”,表示该控件占2列。

layout文件示例:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:rowCount="2"
    android:columnCount="3" >
  <Button
        android:id="@+id/one"
        android:layout_column="0"
        android:layout_columnSpan="2"
        android:text="1"/>
  <Button
        android:id="@+id/two"
        android:text="2"/>
   <Button
        android:id="@+id/three"
        android:text="3"/>
  <Button
        android:id="@+id/devide"
        android:text="/"/>

</GridLayout>

这里写图片描述
layout文件说明:

数字”1”实际上占据的空间大小是2列,但是第2列显示为空白。若要第2列不显示空白,需要设置 android:layout_gravity属性,参考下例。

2.3 android:layout_row

属性说明: 该控件所在行。例如,android:layout_row=”0”,表示在第1行显示该控件;android:layout_row=”1”,表示在第2行显示该控件。它和 android:layout_column类似。

2.4 android:layout_rowSpan

属性说明: 该控件所占的行数。例如,android:layout_rowSpan=”2”,表示该控件占2行。它和 android:layout_columnSpan类似。

2.5 android:layout_gravity

属性说明:

该控件的布局方式。可以取以下值:
top – 控件置于容器顶部,不改变控件的大小。
bottom – 控件置于容器底部,不改变控件的大小。
left – 控件置于容器左边,不改变控件的大小。
right – 控件置于容器右边,不改变控件的大小。
center_vertical – 控件置于容器竖直方向中间,不改变控件的大小。
fill_vertical – 如果需要,则往竖直方向延伸该控件。
center_horizontal – 控件置于容器水平方向中间,不改变控件的大小。
fill_horizontal – 如果需要,则往水平方向延伸该控件。
center – 控件置于容器中间,不改变控件的大小。
fill – 如果需要,则往水平、竖直方向延伸该控件。
clip_vertical – 垂直剪切,剪切的方向基于该控件的top/bottom布局属性。若该控件的gravity是竖直的:若它的gravity是top的话,则剪切该控件的底部;若该控件的gravity是bottom的,则剪切该控件的顶部。
clip_horizontal – 水平剪切,剪切的方向基于该控件的left/right布局属性。若该控件的gravity是水平的:若它的gravity是left的话,则剪切该控件的右边;若该控件的gravity是 right的,则剪切该控件的左边。
start – 控件置于容器的起始处,不改变控件的大小。
end – 控件置于容器的结束处,不改变控件的大小。

对应函数: setGravity(int)

layout文件示例:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:rowCount="2"
    android:columnCount="3" >
  <Button
        android:id="@+id/one"
        android:layout_column="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="1"/>
  <Button
        android:id="@+id/two"
        android:text="2"/>
   <Button
        android:id="@+id/three"
        android:text="3"/>
  <Button
        android:id="@+id/devide"
        android:text="/"/>

</GridLayout>

这里写图片描述
3 应用示例

定义一个简单的计算器界面,包含“0-9、.、+、-、*、/、=、”。用GridLayout实现。

<?xml version="1.0" encoding="utf-8"?>
<!-- GridLayout: 5行 4列 水平布局 -->
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:rowCount="5"
    android:columnCount="4" >
  <Button
        android:id="@+id/one"
        android:text="1"/>
  <Button
        android:id="@+id/two"
        android:text="2"/>
   <Button
        android:id="@+id/three"
        android:text="3"/>
  <Button
        android:id="@+id/devide"
        android:text="/"/>
  <Button
        android:id="@+id/four"
        android:text="4"/>
  <Button
        android:id="@+id/five"
        android:text="5"/>
  <Button
        android:id="@+id/six"
        android:text="6"/>
  <Button
        android:id="@+id/multiply"
        android:text="×"/>
  <Button
        android:id="@+id/seven"
        android:text="7"/>
  <Button
        android:id="@+id/eight"
        android:text="8"/>
  <Button
        android:id="@+id/nine"
        android:text="9"/>
    <Button
        android:id="@+id/minus"
        android:text="-"/>
    <Button
        android:id="@+id/zero"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="0"/>
  <Button
        android:id="@+id/point"
        android:text="."/>
    <Button
        android:id="@+id/plus"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"
        android:text="+"/>
    <Button
        android:id="@+id/equal"
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:text="="/> 
</GridLayout>

这里写图片描述

Android实现计算器布局(四种布局方式)之GridLayout网格布局

网格布局:GridLayout 网格布局实现计算器界面布局非常简单,实现跨行跨列功能主要用到: layout_columnSpan属性和layout_rowSpan如: android:l...
  • Julse
  • Julse
  • 2017年03月31日 19:47
  • 2437

Android GridLayout中元素平分且行充满屏幕(计算器的界面效果)

有时候我们想用GridLayout做类似计算器的效果,可是看起来的效果确实这么的糟糕,如下图: 可是上图的每个元素都没有做到平分屏幕的1/4, 看起来很丑是吧!, 经过修改之后的效果图如下: ...
  • qq_30552993
  • qq_30552993
  • 2016年05月25日 17:43
  • 4571

Android学习笔记(15):网格布局GridLayout

网格布局GridLayout,继承自ViewGroup,是Android4.0新增的布局管理器。 整个容器划分为rows*columns个网格,可以指定一个组件放在哪个网格,也可以设置一个组件横跨多少...
  • qq_18738333
  • qq_18738333
  • 2015年12月11日 12:58
  • 1319

Android GridLayout 动态添加子控件 + 平均分配空间

Android GridLayout 动态添加子控件 + 平均分配空间 有时候会遇到这样的需求: 1. 要求子控件网格布局,平均分布 2. 内容根据接口动态加载 3. 父控件充满界面剩余空间,不...
  • sunsteam
  • sunsteam
  • 2017年04月06日 21:55
  • 9478

Android系统回顾(三):UI之GridLayout布局

一、GridLayout(网格布局)是所有布局管理器中最为灵活的一种。网格布局使用随意的网格来放置视图。网格布局通过行列的延伸、Space View和Gravity属性可以创建出复杂的UI,而相对布局...
  • YongYu_IT
  • YongYu_IT
  • 2015年03月02日 11:32
  • 976

GridLayout(网格布局)

前言: 作为android 4.0 后新增的一个布局,与前面介绍过的TableLayout(表格布局)其实有点大同小异; 不过新增了一些东东 ①跟LinearLayout(线性布局)一样,他可以...
  • Buaaroid
  • Buaaroid
  • 2014年05月26日 11:11
  • 41461

Android布局总结一:GridLayout布局(网格布局)

GridLayout布局简介GridLayout布局是Android4.0(API Level 14)新引入的网格矩阵形式的布局控件。GridLayout属性介绍本身属性 android:alignm...
  • lixpjita39
  • lixpjita39
  • 2017年07月18日 14:24
  • 2486

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

New UI-布局之GridLayout(网格布局)详解  ——转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论...
  • u014450015
  • u014450015
  • 2016年01月16日 01:21
  • 609

Android 布局之GridLayout

yuant 1 GridLayout简介 GridLayout是Android4.0新提供的网格矩阵形式的布局控件。 GridLayout的继承关系如下: java.l...
  • aoshiwenrou
  • aoshiwenrou
  • 2014年10月28日 17:01
  • 517

Android中的GridLayout布局及Shap,Selector文件的使用

关于GridLayout,它是一个网格布局,Android五大布局有一个TableLayout(表格布局),显然Android中许多布局和控件存在复杂的继承关系,我认为没必要区分它们的区别和来源,只要...
  • QuietShake
  • QuietShake
  • 2016年09月24日 20:16
  • 1508
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 布局之GridLayout
举报原因:
原因补充:

(最多只允许输入30个字)