浅谈android4.0开发之GridLayout布局

    本文重点讲述了自android4.0版本后新增的GridLayout网格布局的一些基本内容,并在此基础上实现了一个简单的计算器布局框架。通过本文,您可以了解到一些android UI开发的新特性,并能够实现相关应用。


       在android4.0版本之前,如果想要达到网格布局的效果,首先可以考虑使用最常见的LinearLayout布局,但是这样的排布会产生如下几点问题:


1、不能同时在X,Y轴方向上进行控件的对齐。

2、当多层布局嵌套时会有性能问题。

3、不能稳定地支持一些支持自由编辑布局的工具。


       其次考虑使用表格布局TabelLayout,这种方式会把包含的元素以行和列的形式进行排列,每行为一个TableRow对象,也可以是一个View对象,而在TableRow中还可以继续添加其他的控件,每添加一个子控件就成为一列。但是使用这种布局可能会出现不能将控件占据多个行或列的问题,而且渲染速度也不能得到很好的保证。


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

首先它与LinearLayout布局一样,也分为水平和垂直两种方式,默认是水平布局,一个控件挨着一个控件从左到右依次排列,但是通过指定android:columnCount设置列数的属性后,控件会自动换行进行排列。另一方面,对于GridLayout布局中的子控件,默认按照wrap_content的方式设置其显示,这只需要在GridLayout布局中显式声明即可。

      其次,若要指定某控件显示在固定的行或列,只需设置该子控件的android:layout_row和android:layout_column属性即可,但是需要注意:android:layout_row=”0”表示从第一行开始,android:layout_column=”0”表示从第一列开始,这与编程语言中一维数组的赋值情况类似。


       最后,如果需要设置某控件跨越多行或多列,只需将该子控件的android:layout_rowSpan或者layout_columnSpan属性设置为数值,再设置其layout_gravity属性为fill即可,前一个设置表明该控件跨越的行数或列数,后一个设置表明该控件填满所跨越的整行或整列。

利用GridLayout布局编写的简易计算器代码如下(注意:仅限于android4.0及以上的版本):

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:layout_width="wrap_content" 
  4.     android:layout_height="wrap_content" 
  5.     android:orientation="horizontal" 
  6.     android:rowCount="5" 
  7.     android:columnCount="4" > 
  8.   <Button 
  9.         android:id="@+id/one" 
  10.         android:text="1"/> 
  11.   <Button 
  12.         android:id="@+id/two" 
  13.         android:text="2"/> 
  14.    <Button 
  15.         android:id="@+id/three" 
  16.         android:text="3"/> 
  17.   <Button 
  18.         android:id="@+id/devide" 
  19.         android:text="/"/> 
  20.   <Button 
  21.         android:id="@+id/four" 
  22.         android:text="4"/> 
  23.   <Button 
  24.         android:id="@+id/five" 
  25.         android:text="5"/> 
  26.   <Button 
  27.         android:id="@+id/six" 
  28.         android:text="6"/> 
  29.   <Button 
  30.         android:id="@+id/multiply" 
  31.         android:text="×"/> 
  32.   <Button 
  33.         android:id="@+id/seven" 
  34.         android:text="7"/> 
  35.   <Button 
  36.         android:id="@+id/eight" 
  37.         android:text="8"/> 
  38.   <Button 
  39.         android:id="@+id/nine" 
  40.         android:text="9"/> 
  41.     <Button 
  42.         android:id="@+id/minus" 
  43.         android:text="-"/> 
  44.     <Button 
  45.         android:id="@+id/zero" 
  46.         android:layout_columnSpan="2" 
  47.         android:layout_gravity="fill" 
  48.         android:text="0"/> 
  49.   <Button 
  50.         android:id="@+id/point" 
  51.         android:text="."/> 
  52.     <Button 
  53.         android:id="@+id/plus" 
  54.         android:layout_rowSpan="2" 
  55.         android:layout_gravity="fill" 
  56.         android:text="+"/> 
  57.     <Button 
  58.         android:id="@+id/equal" 
  59.         android:layout_columnSpan="3" 
  60.         android:layout_gravity="fill" 
  61.         android:text="="/>  
  62.   </GridLayout> 
<?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="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>

最终实现的界面如下所示:



参考资料:http://tech.it168.com/a2011/1122/1277/000001277274.shtml

http://hb.qq.com/a/20111214/000865.htm

 

 

Android 4.0的SDK已经发布,在众多的新增特性中,其中对开发者来说比较重要的特性之一,是新增的两种界面布局方式:Space和Gridlayout,它们跟以往Android版本的sdk有什么不同之处?它们能给Android的布局设计带来什么好处?本文将带大家一探android 4.0新增的space及gridlayout布局的相关特性。

概述

在Android中,使用的最多的布局是LinearLayout了,它可以让布局界面中的子控件以常见的方式比如水平或者垂直方向对齐。在使用LinearLayout时,开发者应该会记得,会经常遇到复杂的布局结构,所以会时常使用各种LinearLayout进行嵌套,而且应该注意嵌套层次不要过多。

有很多不错的文章(比如有:Android Layout Tricks #1, Flattening The Stack)小结了嵌套布局的缺点,归纳有如下三类:

· 不能同时在X,Y轴方向上进行控件的对齐。

· 当多层布局嵌套时会有性能问题。

· 不能稳定地支持一些支持自由编辑布局的工具。

如下图,可以看出上述说的第一个缺点:

这里,当Email address这个标签的文本发生变化时,既要保持跟其右边控件的下部的基线对齐,又要保持跟下面的控件的右边缘对齐,而用嵌套布局的方式是不能实现的,因为不能够同时在X,Y轴上进行控件的对齐。于是我们便需要引入新的布局方式GridLayout。

GridLayout布局

在Android 4.0中,新引入的GridLayout网格布局,就是为了解决上述的问题而新出现的,它把布局以行和列进行分割,如下图:

可以看到,在这种布局界面中,Email address这个文本标签既属于一个在基线底部对齐的行,也属于一个靠右对齐的列。.

GridLayout布局使用虚细线将布局划分为行,列和单元格,如上图,也支持一个控件在行,列上都有交错排列。而GridLayout使用的其实是跟LinearLayout类似的API,只不过是修改了一下相关的标签而已,所以对于开发者来说,掌握GridLayout还是很容易的事情。

在Android 4.0的SDK中,给出了相关的例子,代码位置在:

samples/ApiDemos/src/com/example/android/apis/view/GridLayout0.java

samples/ApiDemos/res/layout/grid_layout_1.xml

 

 

 

Android中文API(141) —— GridLayout

前言

  本章内容android.widget.GridLayout章节,版本为Android 4.0 r1(新增),翻译来自:"獨鍆躌踄",欢迎访问他的博客:"http://www.cnblogs.com/mxgsa/",再次感谢"獨鍆躌踄" !期待你一起参与翻译Android的相关资料,联系我over140@gmail.com。

声明

  欢迎转载,但请保留文章原始出处:)

    博客园:http://www.cnblogs.com/

    Android中文翻译组: http://androidbox.sinaapp.com/

GridLayout

译者署名:獨鍆躌踄

译者链接:http://www.cnblogs.com/mxgsa/

版本:Android 4.0 r1

结构

继承关系

public class GridLayout extends ViewGroup

        

java.lang.Object

android.view.View

         android.view.ViewGroup

                   android.widget.GridLayout

类概述

(转自文章精选1)

  该布局把子视图存放在一个矩形网格中。

网格是由被无数虚细线分割成多个单元格的可视区域组成。贯穿整个API的网格线通过网格索引数来指定。一个N列的网格在运行中包含0N N+1个索引,不管怎么配置GridLayout 网格索引0是固定网格容器的前边距,索引N是固定容器的后边距(考虑后填充)。

行和列的规格

rowSpeccolumnSpec布局参数的定义后,子视图占用一个或者多个连续单元格,每个规范是定义被占用的行或列的设置和子视图在单元格是如何对齐。尽管各个单元格在一个GridLayout中不重叠,GridLayout没有阻止子视图被定义为占据相同的单元格或者单元格组。然而在这种情况下,也不能保证子视图在布局操作完成后自己不会重叠。

默认单元格分配

如果一个子视图没有指定占据的行和列索引,GridLayout会自动指定单元格位置,包括:方向,行数和列数的属性。

空间(Place)

子视图之间的空间可能会通过使用专用的空间视图的实例,或通过设置leftMargintopMarginrightMarginbottomMargin布局参数后指定。当设置为useDefaultMargins属性,根据当前平台的用户界面风格,子视图周围的默认边距将自动分配。每个被定义的边距可通过分配到相应的布局参数来独立覆盖。默认值通常在不同组成部分会产生一个合理的间距,但在不同平台版本之间可能会改变。

多余的空间分布

GridLayout的多余的空间分布是基于优先级,而不是根据比例。

一个子视图的的伸展程度通过其行和列的组的对其属性推算(这是典型的设置子视图的布局参数gravity属性)。如果对齐是沿着给定的轴定义,那么该组件在这个方向具有灵活性。如果没有对齐,相反组件会缺乏灵活性。

多个组件在同一行或列组被认为平行的。如果组中所有在内的组件是灵活的,那么这个小组是灵活的。位置在一个共同的边界两侧的行和列组,反而认为采取同一系列。如果复合组的一个元素是灵活的,则这个复合组是灵活的。

为了使一列伸展,确保所有的组件,它里面定义一个的gravity属性。为了防止从列伸展,确保列中的组成部分之一没有定义的gravity属性。

灵活性的原则并不能完全的消除歧义,推荐GridLayout中的算法更接近其右侧和底边的行和列。

局限性

GridLayout的不提供支持空间(weight)分配的原则,空间分配界定。在一般情况下,可以配置一个GridLayout多余的空间分布在多个行或列之间的不相同的比例。

一些常见的适用情况,如下:将等量的周围空间中的一个组成部分单元格组;使用居中对齐(或gravity属性)。对于完全控制对或列中多余的空间分布;使用的LinearLayout子视图约束相关的单元格组的组成部分。当使用这些技术,记住,单元格组可能定义重叠。

GridLayout的使用布局参数的完整描述GridLayout.LayoutParams

XML属性

属性名称

描述

android:alignmentMode

当设置alignMargins,使视图的外边界之间进行校准,定义其边距,当设置alignBounds,使视图的边界之间进行校准,默认设置alignMargins

常量

备注

alignBounds

0

对齐子视图边界。

alignMargins

1

对齐子视图边距。

android:columnCount

自动定位子视图时创建的最大列数

android:columnOrderPreserved

当设置为true,使列边界显示的顺序和列索引的顺序相同。默认是true

android:orientation

Orientation属性在布局时候不被使用,它仅当子视图布局参数没有指定的时候分配行和列,GridLayout在这种情况下和LinearLayout使用方法一样,根据标志的值将所有组件放在单个行或者放在当个列中。在水平情况下,当一行的所有列都填充满时,columnCount属性额外提供创建新行。同样在垂直情况下,rowCount属性有相同的作用,默认是水平的。

常量

备注

horizontal

0

定义水平部件。

vertical

1

定义垂直部件。

android:rowCount

自动定位子视图时创建的最大行数

android:rowOrderPreserved

当设置为true,使行边界显示的顺序和行索引的顺序相同。默认是true

android:useDefaultMargins

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

常量

类型

属性名称

描述

int

ALIGN_BOUNDS

这是alignmentMode的常量,当alignmentMode设置成ALIGN_BOUNDS,每个组件之间的原始视图边界边距对齐:即组件的区域通过下面分隔:顶部,左侧,底部和右侧的属性。默认值:0

int

ALIGN_MARGINS

这是alignmentMode的常量。当alignmentMode设置ALIGN_MARGINS,每个视图的边界向外延伸,根据他们的边距,产生的矩形边距对齐。默认值:1

int

HORIZONTAL

水平方向。默认值:0

int

UNDEFINED

常数用于表示一个不确定的值。该字段可以使用这个值来表示他们的值观尚未确定。同样的方法可以返回这个值,表明没有能实现返回的合适值,该常数的值(目前MIN_VALUE)是为了避免可能不知道其标志的有效值之间的混淆。

int

VERTICAL

垂直方向。默认值:1

字段

public   static final GridLayout.Alignment

属性名称

描述

BASELINE

表示一个视图应该和在同一单元格组的其他视图基线对齐,这个常量仅用做rowSpecs对齐

BOTTOM

表示一个视图应该和在同一单元格组的其他视图底部边距对齐。

CENTER

表示一个视图应该和在同一单元格组的其他视图居中对齐,此常数可用于rowSpecscolumnSpecs

FILL

表示视图应该扩大以填充其单元格组。此常数可用于rowSpecscolumnSpecs

LEFT

表示一个视图应该和在同一单元格组的其他视图左边距对齐。

RIGHTT

表示一个视图应该和在同一单元格组的其他视图右边距对齐。

TOP

表示一个视图应该和在同一单元格组的其他视图上边距对齐。

公共方法

public GridLayout.LayoutParams generateLayoutParams (AttributeSet attrs)

在提供的属性集基础上返回一个新的布局参数设置。

参数

attrs                   创建布局参数的属性

返回值

                  ViewGroup.LayoutParams实例或者他的派生实例

public int getAlignmentMode ()

返回对齐方式.

相关XML属性

android:alignmentMode

返回值

对齐方式; ALIGN_BOUNDS 或者 ALIGN_MARGINS

参见

ALIGN_BOUNDS

ALIGN_MARGINS

setAlignmentMode(int)

public int getColumnCount ()

返回当前的列数。通过 setColumnCountint)方法最后一次设置的值,如果没有这样的值被设置,返回在columnSpec定义中的每一个上限的最大值。

相关XML属性

android:columnCount

返回值

当前的列数

参见

setColumnCount(int)

columnSpec

public int getOrientation ()

返回当前方向。

相关XML属性

android:orientation

         返回值

HORIZONTAL 或者 VERTICAL

参见

setOrientation(int)

public int getRowCount ()

返回当前的行数。通过 setRowCountint)方法最后一次设置的值,如果没有这样的值被设置,返回在rowSpec定义中的每一个上限的最大值。

相关XML

android:rowCount

返回值

返回当前的行数。

参见

setRowCount(int)

rowSpec

public boolean getUseDefaultMargins ()

返回是否GridLayout分配时候,没有相应布局参数定义的默认边距

相关XML属性

android:useDefaultMargins

返回值

如果分配默认的边距返回ture

参见

setUseDefaultMargins(boolean)

public boolean isColumnOrderPreserved ()

返回是否通过表格索引顺序定制列边界。

相关XML属性

android:columnOrderPreserved

返回值

如果列边界按照索引的顺序显示返回ture,否则返回false

参见

setColumnOrderPreserved(boolean)

public boolean isRowOrderPreserved ()

返回是否通过表格索引顺序定制行边界

相关XML属性

android:rowOrderPreserved

返回值

如果行边界按照索引顺序显示返回ture,否则返回false

参见

setRowOrderPreserved(boolean)

public void requestLayout ()

当无效的视图布局发生变化时候调用它,将通过视图树进行布局传递。

public void setAlignmentMode (int alignmentMode)

设置该容器中所有子视图之间的对齐方式

默认的值是ALIGN_MARGINS.

相关XML属性

android:alignmentMode

参数

alignmentMode       ALIGN_BOUNDS 或者 ALIGN_MARGINS

参见

ALIGN_BOUNDS

ALIGN_MARGINS

getAlignmentMode()

public void setColumnCount (int columnCount)

列数是仅用于当没有一个布局参数指定时候,生成默认的列/行索引。

相关XML属性

android:columnCount

参数

columnCount   列的数量.

参见

getColumnCount()

columnSpec

public void setColumnOrderPreserved (boolean columnOrderPreserved)

当此属性为trueGridLayout的是被迫使他们相关的网格指数在视图中以升序顺序放置列的边界。

当此属性是falseGridLayout是放置在任何最适合给定的约束水平列边界的顺序。

此属性的默认值是true

相关XML属性

android:columnOrderPreserved

参数

columnOrderPreserved   ture是被迫使他们相关的网格指数在视图中以升序顺序放置列的边界。

参见

isColumnOrderPreserved()

public void setOrientation (int orientation)

Orientation是仅用于当没有一个布局参数指定时候,生成默认的列/行索引

默认的属性值是HORIZONTAL

相关XML属性

android:orientation

参数

orientation       HORIZONTAL 或者 VERTICAL

参见

getOrientation()

public void setRowCount (int rowCount)

RowCount是仅用于当没有一个布局参数指定时候,生成默认的列/行索引

相关XML属性

android:rowCount

参数

rowCount         行数

参见

getRowCount()

rowSpec

public void setRowOrderPreserved (boolean rowOrderPreserved)

当此属性为trueGridLayout是强制他们相关的网格指数在视图中以升序顺序放置行的边界。

当此属性是falseGridLayout是放置在任何最适合给定的约束水平行边界的顺序。

此属性的默认值是true

相关XML属性

android:rowOrderPreserved

参数

rowOrderPreserved ture是强制他们相关的网格指数在视图中以升序顺序放置列的边界。

参见

isRowOrderPreserved ()

public void setUseDefaultMargins (boolean useDefaultMargins)

当设置为true GridLayout根据子视图的的视觉特征分配在子视图周围的默认边距,每个定义的边距,可独立分配到相应的布局参数覆盖。

如果为false,所有边距的默认值是零。

当设置为true时,考虑设置的alignmentMode属性值ALIGN_BOUNDS

此属性的默认值是false

相关XML属性

android:useDefaultMargins

参数

useDefaultMargins  使用true分配默认的边距

参见

getUseDefaultMargins()

setAlignmentMode(int)

public static GridLayout.Spec spec (int start, GridLayout.Alignment alignment)

返回一个Spec其中:

*   spec.span = [start, start + 1]

*   spec.alignment = alignment

参数

start         the           开始索引

alignment         对齐方式

public static GridLayout.Spec spec (int start, int size)

返回一个Spec,其中:

*   spec.span = [start, start + size]

参数

start                   开始位置

size          大小

public static GridLayout.Spec spec (int start, int size, GridLayout.Alignment alignment)

返回一个Spec,其中:

*   spec.span = [start, start + size]

*   spec.alignment = alignment

参数

start                            开始位置

size                     大小

alignment         对齐方式

public static GridLayout.Spec spec (int start)

返回一个Spec,其中:

*   spec.span = [start, start + 1]

参数

start                            开始索引

保护方法

protected GridLayout.LayoutParams generateDefaultLayoutParams ()

返回一组默认布局参数。没有设置布局参数执行addviewView)时,这些参数被请求时返回null,并抛出一个异常。

返回值

一组默认布局参数或者null

protected GridLayout.LayoutParams generateLayoutParams (ViewGroup.LayoutParams p)

返回一组合法的受支持的布局参数。当一个ViewGroup传递一个布局参数没有通过checkLayoutParams(android.view.ViewGroup.LayoutParams)检测的视图时,此方法被调用。此方法会返回一组新的适合当前ViewGroup的布局参数,可能从指定的一组布局参数中复制适当的属性。

参数

p 被转换成一组适合当前 ViewGroup的布局参数.

返回值

一个ViewGroup.LayoutParams的实例或者其中的一个子节点

补充

         文章精选

                   Android 4.0新增SpaceGridLayout初谈


GridLayout.Alignment

译者署名:獨鍆躌踄

译者链接http://www.cnblogs.com/mxgsa/

版本:Android 4.0 r1

结构

继承关系

public static abstract class GridLayout.Alignment extends Object

        

java.lang.Object

android.widget.GridLayout.Alignment  

类概述

对齐指定视图应放置在一个单元格组的某个位置以及尺寸大小。

GridLayout.LayoutParams类包含一个rowSpeccolumnSpec,其中每个都包含对齐。整体单元格组由这两种沿每个轴单独对齐的方式指定。

GridLayout类定义使用最常见的对齐方式,在总体布局上,左,下,右,居中,基线,填充。

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值