官方api参见:http://developer.android.com/intl/zh-cn/reference/android/widget/GridLayout.html
注意:GridLayout是Android4.0新增的布局管理器,如果希望在更早的Android版本中使用,需要导入相应的支撑库。
一、GridLayout(网格布局)是所有布局管理器中最为灵活的一种。网格布局使用随意的网格来放置视图。网格布局通过行列的延伸、Space View和Gravity属性可以创建出复杂的UI,而相对布局却需要通过复杂的嵌套来构建UI。
二、通过网格布局和线性布局可以实现相对布局可实现的所有功能,而出于性能考虑,在创建相同UI的时候,应该优先使用网格布局,而不是嵌套布局。
三、需要构建横竖两个方向对齐的UI适合使用网格布局。
四、GridLayout布局使用虚细线将布局划分为行列并由此形成单元格。同时它支持一个控件跨越多个行列。
五、GridLayout布局特点包含以下三点:
1、与LinearLayout布局一样,GridLayout也分为水平和垂直两种方式。默认是水平布局(一个控件挨着一个控件从左到右依次排列),指定android:columnCount(设置列数)属性后控件会自动换行。对于GridLayout单元格中的子控件默认按照wrap_content的方式设置其显示,需要改变时只需在GridLayout布局中显式声明即可。
2、若要指定某控件显示在固定的行或列,只需设置该子控件的android:layout_row和android:layout_column属性即可。注意:android:layout_row=”0”表示从第一行开始,android:layout_column=”0”表示从第一列开始。
3、如果需要设置某控件跨越多行或多列,只需将该子控件的android:layout_rowSpan或layout_columnSpan属性设置为数值,再设置其layout_gravity属性为fill即可。前一个设置表明该控件跨越的行数或列数,后一个设置表明该控件填满所跨越的整行或整列。
六、用GridLayout计算器实例
为了更好得进行网格布局下的UI设计,最好在Graphical Layout中显示出网格分割线。
res/drawable-hdpi/sharp_gridview.xml文件如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="2dp"
android:color="#FFFFFFFF" />
<!-- android:angle,渐变方向,单位是角度,0表示从左到右渐变,180表示从右到左渐变,90表示从上到下渐变,270表示从下到上渐变 -->
<gradient
android:angle="90"
android:endColor="#DD2ECCFA"
android:startColor="#DD000000" />
</shape>
res/layout/activity_main.xml文件如下:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:background="@drawable/sharp_gridview"
android:columnCount="4"
android:orientation="horizontal"
android:rowCount="8" >
<!--
layout_gravity 表示组件自身在父组件中的位置
gravity 表示组件的子组件在组件中的位置
-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:gravity="right"
android:text="thinking牌计算器" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:layout_margin="10dp"
android:background="#eee"
android:textSize="40dp" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="清除" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginLeft="10dp"
android:layout_row="3"
android:text="9" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="3"
android:text="8" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="3"
android:text="7" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_gravity="fill_horizontal"
android:layout_marginRight="10dp"
android:layout_row="3"
android:text="+" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginLeft="10dp"
android:layout_row="4"
android:text="6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="4"
android:text="5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="4"
android:text="4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_gravity="fill_horizontal"
android:layout_marginRight="10dp"
android:layout_row="4"
android:text="-" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginLeft="10dp"
android:layout_row="5"
android:text="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="5"
android:text="2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="5"
android:text="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_gravity="fill_horizontal"
android:layout_marginRight="10dp"
android:layout_row="5"
android:text="*" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="3"
android:layout_gravity="fill_horizontal"
android:layout_marginLeft="10dp"
android:text="0" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_gravity="fill_horizontal"
android:layout_marginRight="10dp"
android:layout_row="6"
android:text="/" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:layout_gravity="fill_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="=" />
</GridLayout>
效果图: