新推出的GridLayout网格布局

本期主要学习的是网格布局是Android 4.0新增的布局，和前面所学的TableLayout表格布局 有点类似，不过他有很多前者没有的东西，也更加好用。

一、认识GridLayout

网格布局实现了控件的交错显示，能够避免因布局嵌套对设备性能的影响，更利于自由布局的开发。网格布局用一组无限细的直线将绘图区域分成行、列和单元，并指定控件的显示区域和控件在该区域的显示方式

下表显示了 GridLayout常用的XML属性及相关方法说明。

为了控制GridLayout布局容器中各子组件的布局分布，GridLayout提供了一个内部类： GridLayout.LayoutParams，该类提供了大量的XML属性来控制GridLayout布局容器中子组件的布局分布。

下表显示了 GridLayout.LayoutParams常用的XML属性及相关方法。

二、示例

接下来通过一个简单的示例程序来学习GridLayout的使用用法。

同样使用WidgetSample工程，继续使用app/main/res/layout/目录下的activity_main.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:columnCount="4"
            android:rowCount="7">

    <TextView
        android:id="@+id/result_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:background="#eee"
        android:text="0"
        android:textColor="#000"
        android:textSize="50sp" />

    <Button
        android:id="@+id/clear_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:text="Clear" />
    <Button
        android:id="@+id/one_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="1" />
    <Button
        android:id="@+id/two_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="2" />
    <Button
        android:id="@+id/three_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="3" />
    <Button
        android:id="@+id/devide_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="/" />
    <Button
        android:id="@+id/four_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="4" />
    <Button
        android:id="@+id/five_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="5" />
    <Button
        android:id="@+id/six_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="6" />
    <Button
        android:id="@+id/multiply_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="×" />
    <Button
        android:id="@+id/seven_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="7" />
    <Button
        android:id="@+id/eight_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="8" />
    <Button
        android:id="@+id/nine_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="9" />
    <Button
        android:id="@+id/minus_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="-" />
    <Button
        android:id="@+id/zero_btn"
        android:layout_columnSpan="2"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_rowWeight="1"
        android:text="0" />
    <Button
        android:id="@+id/point_btn"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="." />
    <Button
        android:id="@+id/plus_btn"
        android:layout_columnWeight="1"
        android:layout_rowSpan="2"
        android:layout_rowWeight="1"
        android:text="+" />
    <Button
        android:id="@+id/equal_btn"
        android:layout_columnSpan="3"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:text="=" />
</GridLayout>

运行程序，可以看到下图所示界面效果：

到此，关于Android中的六种界面布局已经学习完毕，你都掌握了吗？一定要多动手练习哦，从下期开始一起来学习Android事件处理。