Android系统回顾（三）：UI之GridLayout布局

官方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>

效果图：