布局之五 -- GridLayout

转载 2015年07月10日 11:25:29

 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即可,前一个设置表明该控件跨越的行数或列数,后一个设置表明该控件填满所跨越的整行或整列。

   我们下面通过XML布局和Java代码布局两种方式分别举例:

  

一、XML方式布局

  1、创建一个空白Activity

  

  3、打开“res/layout/activity_main.xml”文件,修改成以下代码。

  

  (1)第①部分

  <?xml version="1.0" encoding="utf-8">,每个XML文档都由XML序言开始,在前面的代码中的第一行便是XML序言,<?xml version="1.0">。这行代码表示按照1.0版本的XML规则进行解析。encoding = "utf-8"表示此xml文件采用utf-8的编码格式。编码格式也可以是GB2312。

  (2)第②部分

  <GridLayout…… 表示采用网格布局管理器。

  (3)第③部分

  android:layout_width="match_parent" android:layout_height="match_parent"表示布局管理器宽度和高充将填充整个屏幕宽度和高度。

  (4)第④部分

  android:orientation="horizontal"表示采用水平布局,垂直为vertical。

  (5)第⑤部分

  该网格布局管理器采用5行4列。

  4、我们向GridLayout放入16个按钮Button。

   

  5、找不同。

  

  我们对一下,找出不同地方。

  (1)第①部分

  目标0按钮是占据2个格;当前0按钮占1格。  

  1. <Button    
  2.       android:id="@+id/zero"    
  3.       android:layout_columnSpan="2"      //列扩展两列  
  4.       android:layout_gravity="fill"      //按钮填充满两格  
  5.       android:text="0"/>    

  (2)第②部分

  目标·按钮在第4行第3列;当前·按钮在第4行第2列。

  解决办法:0按钮占据2格后,·按钮会自动到这个位置。

  (3)第③部分

  目标+按钮在第4行第4列并且行扩展2行;当前·按钮在第4行第3列。

  解决办法:由于0按钮占据2格后,目标+会自动到这个位置。  

  1. <Button    
  2.       android:id="@+id/plus"    
  3.       android:layout_rowSpan="2"      //行扩展两行   
  4.       android:layout_gravity="fill"     //按钮填充满两格  
  5.       android:text="+"/>    

  (4)第④部分

  目标=按钮在第5行,占据3列位置;当前=按钮在第4行第4列。

  解决办法:位置由于0的扩展后,目前=按钮会自动到第5行;列扩展同0按钮。  

  1. <Button    
  2.       android:id="@+id/equal"    
  3.       android:layout_columnSpan="3"       //列扩展3列  
  4.       android:layout_gravity="fill"       //按钮填充满3格   
  5.       android:text="="/>      

 

  完整源代码: 

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

  6、最终显示效果如下:

      

五、Java图形化界面设计——布局管理器之GridLayout(网格布局)

转自liujun13579的专栏 的博客,尊重并感谢原作者的付出!   网格布局特点: l  使容器中的各组件呈M行×N列的网格状分布。 l  网格每列宽度相同,等于容器的宽度除以网格的列数。 ...

GridLayout 布局管理详细解析

  • 2012年03月31日 10:27
  • 283KB
  • 下载

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

关于GridLayout,它是一个网格布局,Android五大布局有一个TableLayout(表格布局),显然Android中许多布局和控件存在复杂的继承关系,我认为没必要区分它们的区别和来源,只要...

GridLayout(表格布局管理器)

GridLayout(表格布局管理器) GridLayout要注意的事项:     1.rows 和 cols 中的一个可以为零(但不能两者同时为零),这表示可以将任何数目的对象置于行或列中。...

网格布局GridLayout的那些事儿

(一)概述 GridLayout是在Android 4.0以后引入的一个新的布局,和TableLayout(表格布局)有点类似,不过它比后者更加强大,也更加好用; ...

Android中的4.0新布局控件:Space和GridLayout

Android4.0 Ice Cream Sandwich (ICS) 提供了两种新的控件,也就是Space和GridLayout,是专门为大屏幕设备提供更丰富的用户交互体验而设计。 在这之前,...

Android GridLayOut布局学习

【转自】http://tech.it168.com/a2011/1122/1277/000001277274.shtml

A019-布局之GridLayout

GridLayout网格布局,是Android4.0之后的API才提供的,算是一个相对新的布局容器,它的用法也很简单,类似LinearLayout可以指定方向,也可以指定控件占用多少行或列的空间。举例...
  • wwj_748
  • wwj_748
  • 2015年10月04日 21:15
  • 2027

初入Android之GridLayout布局

GridLayout布局其主要属性为: android:columnCount->设置布局共有多少列 android:rowCount-> 设置布局共有多少行 android:orientat...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:布局之五 -- GridLayout
举报原因:
原因补充:

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