[android ui]Android 4.0新增Space及GridLayout初谈

来源:互联网 发布:广西职称软件下载 编辑:程序博客网 时间:2024/05/16 15:50

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轴方向上进行控件的对齐。

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

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

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

Android 4.0新增Space及GridLayout初谈

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

  GridLayout布局

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

Android 4.0新增Space及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

  下面是一个上图布局的XML例子,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
        xmlns:android
="http://schemas.android.com/apk/res/android"
        android:layout_width
="match_parent"
        android:layout_height
="match_parent"
        android:useDefaultMargins
="true"
        android:alignmentMode
="alignBounds"
        android:columnOrderPreserved
="false"
        android:columnCount
="4"
        
>
    
<TextView
            android:text
="Email setup"
            android:textSize
="32dip"
            android:layout_columnSpan
="4"
            android:layout_gravity
="center_horizontal"
            
/>
    
<TextView
            android:text
="You can configure email in just a few steps:"
            android:textSize
="16dip"
            android:layout_columnSpan
="4"
            android:layout_gravity
="left"
            
/>
    
<TextView
            android:text
="Email address:"
            android:layout_gravity
="right"
            
/>
    
<EditText
            android:ems
="10"
            
/>
    
<TextView
            android:text
="Password:"
            android:layout_column
="0"
            android:layout_gravity
="right"
            
/>
    
<EditText
            android:ems
="8"
            
/>
    
<Space
            android:layout_row
="4"
            android:layout_column
="0"
            android:layout_columnSpan
="3"
            android:layout_gravity
="fill"
            
/>
    
<Button
            android:text
="Next"
            android:layout_row
="5"
            android:layout_column
="3"
            
/>
</GridLayout>

  在上面的代码中,要注意的是在GridLayout 布局中,已经不需要使用WRAP_CONTENT和MATCH_PARENT等属性了。要注意的是,在上面的代码中,并没有显式地说明哪个控件摆放在什么单元格,每一个控件其实是使用了layout_columnSpan及rowSpan或columnSpan去指定其相关的位置和宽度。如在上述代码中,首先用

  android:columnCount="4"指定了有4列,列的编号注意从左到右,第一列是0,如此类推。行的编号从上到下,序号也是从0开始。比如上图界面中的最下方的按钮,使用

  android;layout_row=”5”及android:layout_column=’3”指定了其按钮的位置位于第6行第4列。

  而space是Android 4.0中新增的一个控件,它实际上可以用来分隔不同的控件,其中形成一个空白的区域。这个例子中,同样通过android:layout_row及android:layout_column指定了其起始位置。

  下面再看一个例子,代码如下:

    <?xml version="1.0" encoding="utf-8"?> 
<GridLayout
    xmlns:android
="http://schemas.android.com/apk/res/android"
    android:layout_width
="match_parent"
    android:layout_height
="wrap_content"
    android:columnCount
="4"
    android:rowCount
="4" > 
    
<TextView
        android:text
="1,1" /> 
    
<TextView
        android:text
="1,2" /> 
    
<TextView
        android:text
="1,3" /> 
    
<TextView
        android:text
="1,4" /> 
    
<TextView
        android:text
="2,1" /> 
    
<TextView
        android:text
="2,2" /> 
    
<TextView
        android:text
="2,3" /> 
    
<TextView
        android:text
="2,4" /> 
    
<TextView
        android:text
="3,1" /> 
    
<TextView
        android:text
="3,2" /> 
    
<TextView
        android:text
="3,3 longer" /> 
    
<TextView
        android:text
="3,4" /> 
    
<TextView
        android:text
="4,1" /> 
    
<TextView
        android:text
="4,2" /> 
    
<TextView
        android:text
="4,3" /> 
    
<TextView
        android:text
="4,4" /> 
</GridLayout>

  运行结果如下图所示:

Android 4.0新增Space及GridLayout初谈

  可以看到,在gridlayout中,默认的布局是水平方向的,即将控件从左到右,从上到下进行排列,比如上图中的文本“1,2”即放置在第1行第2列中,如此类推。可以看到,其中的文本“3,3”的位置是拉伸了没跟其他控件对齐,要实现控件间的对齐,可以通过

  设置android:layout_gravity=”fill_horizontal”,代码如下:

     <?xml version="1.0" encoding="utf-8"?> 
<GridLayout
    xmlns:android
="http://schemas.android.com/apk/res/android"
    android:layout_width
="match_parent"
    android:layout_height
="wrap_content"
    android:columnCount
="4"
    android:rowCount
="4" > 
    . 
    . 
    . 
    
<TextView
        android:layout_gravity
="fill_horizontal"
        android:text
="1,3" /> 
    . 
    . 
    . 
    
<TextView
        android:layout_gravity
="fill_horizontal"
        android:text
="2,3" /> 
    . 
    . 
    . 
    
<TextView
        android:layout_gravity
="fill_horizontal"
        android:text
="3,3 longer" /> 
    . 
    . 
    . 
    
<TextView
        android:layout_gravity
="fill_horizontal"
        android:text
="4,3" /> 
</GridLayout>

  运行结果如下图:

Android 4.0新增Space及GridLayout初谈

  如果需要使用垂直的布局,可以设定android:orientation="vertical",如下代码:

  <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width
="wrap_content"
    android:layout_height
="wrap_content"
    android:columnCount
="4"
    android:rowCount
="4"
    android:orientation
="vertical" > 

  运行结果如下图:

Android 4.0新增Space及GridLayout初谈

  可以看到,这次的控件排列顺序是先从上到下排列,比如“1,2”文本框位于“1,1”的下方,如此类推。要注意一点时,如果在gridviewlayout布局中,显式指定某一个控件位于哪一行哪一列(通过使用layout_row或者layout_column),要注意其后的布局的控件则会跟随着位置移动,比如如下的代码:

  <TextView
    android:layout_gravity
="fill_horizontal"
    android:layout_row
="1"
    android:text
="1,3"/>

  运行效果如下图:

Android 4.0新增Space及GridLayout初谈

  可以看到,由于文本控件“1,3”被设置成 android:layout_row="1",所以该控件被移动到第2行(注意layout_row的序号从0开始),而其他各控件的位置也相对偏移了。

  接下来,我们看下其中的layout_gravity属性和gravity属性。例子如下代码:

    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width
="wrap_content"
    android:layout_height
="wrap_content"
    android:columnCount
="4"
    android:rowCount
="4"> 
  
    
<TextView
        android:text
="1,1" /> 
  
    
<TextView
        android:text
="1,2" /> 
  
    
<TextView
        android:layout_gravity
="fill_horizontal"
        android:layout_rowSpan
="2"
        android:text
="1,3"/> 
  
    
<TextView
        android:layout_row
="0"
        android:text
="1,4" /> 
  
    
<TextView
        android:text
="2,1" /> 
  
    
<TextView
        android:text
="2,2" /> 
  
    
<TextView
        android:layout_row
="1"
        android:text
="2,4" /> 
  
    
<TextView
        android:text
="3,1" /> 
  
    
<TextView
        android:text
="3,2" /> 
  
    
<TextView
        android:layout_gravity
="fill_horizontal"
        android:text
="3,3 longer" /> 
  
    
<TextView
        android:text
="3,4" /> 
  
    
<TextView
        android:text
="4,1" /> 
  
    
<TextView
        android:text
="4,2" /> 
  
    
<TextView
        android:layout_gravity
="fill_horizontal"
        android:text
="4,3" /> 
  
    
<TextView
        android:text
="4,4" /> 
  
</GridLayout>

  再运行,可以看到运行结果如下:

Android 4.0新增Space及GridLayout初谈

  可以看到,这次文本控件通过使用android:layout_gravity=”fill”,成功地伸展充满了被包含的父控件。如果要让文字“1,3”放置在单元格的正中央的话,可以再通过如下代码设置;

  android:layout_gravity="fill"

  android:gravity="center"

  android:layout_rowSpan="2"

  android:text="1,3"/>

  运行后如下图:

Android 4.0新增Space及GridLayout初谈

  可以看到,要让文字居中,只需要设置 android:gravity="center"属性即可。

  最后,我们来看下一个例子,在这个例子中,分别用LinearLayout和GridLayout布局,实现了同样的功能,代码如下:

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width
="match_parent"
    android:layout_height
="wrap_content"
    android:orientation
="vertical" > 
  
    
<LinearLayout
        android:layout_width
="match_parent"
        android:layout_height
="wrap_content"
        android:gravity
="center_vertical"
        android:orientation
="horizontal" > 
  
        
<ImageView
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"
            android:src
="@drawable/ic_launcher" /> 
  
        
<LinearLayout
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"
            android:layout_weight
="1"
            android:orientation
="vertical" > 
  
            
<TextView
                android:layout_width
="wrap_content"
                android:layout_height
="wrap_content"
                android:text
="Line 1" /> 
  
            
<TextView
                android:layout_width
="wrap_content"
                android:layout_height
="wrap_content"
                android:text
="Line 2" /> 
        
</LinearLayout> 
  
        
<TextView
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"
            android:text
=">" /> 
    
</LinearLayout> 
  
    
<GridLayout
        android:layout_width
="match_parent"
        android:layout_height
="wrap_content"
        android:columnCount
="3"
        android:rowCount
="2" > 
  
        
<ImageView
            android:layout_gravity
="fill"
            android:layout_rowSpan
="2"
            android:src
="@drawable/ic_launcher" /> 
  
        
<TextView
            android:layout_gravity
="fill"
            android:text
="Line 1" /> 
  
        
<TextView
            android:layout_gravity
="fill_vertical"
            android:layout_rowSpan
="2"
            android:gravity
="fill"
            android:text
=">" /> 
  
        
<TextView
            android:layout_gravity
="fill"
            android:text
="Line 2" /> 
    
</GridLayout> 

  运行后,结果如下图:

Android 4.0新增Space及GridLayout初谈

  在这个例子中,可以看到,gridlayout比较简单方便,效率也高,性能比普通的Linearlayout要好,因为 Linearlayout有时要涉及到多层的嵌套,影响渲染性能。

  小结

  在本文中,简要介绍了在Android 4.0中新增的Gridviewlayout布局的基本使用知识和技巧。Gridviewlayout布局由于其简单易用的特点,因此建议开发者在设计布局时,优先考虑使用,避免使用多层嵌套的布局。目前该布局只能在4.0中使用,据说不久的将来将会在补充支持包中能增加让低版本的Android SDK支持gridviewlayout布局的功能。

0 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 两个月大的宝宝感冒了怎么办 四个月宝宝拉水样大便要怎么办 六个月的宝宝咳嗽有痰怎么办 未满月的宝宝大便脓状怎么办 五个月的宝宝总是吃手怎么办 小孩子学数字怎么也学不会怎么办 小孩学数字老是学不会该怎么办 只买了大人票忘买儿童的了怎么办 铝合金滑动门没轨道安纱门怎么办 移门衣柜门与柜体有冶缝隙怎么办 推拉门关门时撞门框声音大怎么办 两岁宝宝夏天不盖被子怎么办 家里有好多会爬的小黑虫怎么办 刚贴的壁纸怎么发霉了怎么办 晚上睡觉一熄灯有许多小虫子怎么办 一岁宝宝夏天爱哭不爱吃饭怎么办 合肥房子卖了户口没地方迁怎么办 忌作灶的日子新房装橱柜了怎么办 刮水泥浆的墙面刮不住腻子怎么办 小学二年级孩子偷钱 老师怎么办 发现自己读初中的儿子偷钱怎么办? 做错事了得不到亲人的原谅怎么办? 窗口 窗套与墙缝隙大怎么办 中班小孩还不会认1到10怎么办 母猫奶头被小猫咬伤了怎么办 口红不小心弄到衣服上怎么办 脖子后背疼的睡不着觉应该怎么办 君子兰用高锰酸钾泡浓度高了怎么办 五个月宝宝认人不要奶奶睡怎么办 幼儿小班安全卡鱼刺了怎么办教案 学籍在一年级学生在二年级怎么办 一岁多宝宝挑食不爱吃饭菜怎么办饭 换了新手机微信好友显示不全怎么办 朋友人在外地 联系不上怎么办 幼儿连字母都记不住该怎么办 车一边轮子掉农村路边小水沟怎么办 20个月小孩脾气急燥怎么办 给小孩上户口母亲是外国人怎么办 宝宝在学校不敢跟老师说话怎么办? 早教课上宝宝总爱乱跑怎么办? 20天大的宝宝4天不拉大便怎么办