安卓开发学习之011 GridLayout详解+计算器实现

一、GridLayout简介

  GridLayout顾名思义网格布局，是Android4.0(API 14)新增的布局控件
  它跟我上一节讲到的TableLayout布局非常相似，都是将将布局划分为行、
  列和单元格，也都支持一个控件在行、列上都有交错排列

二、GridLayout属性详解

1、行列数

在TableLayout中行数是由开发员指定的，列数是根据TableRow中最大元素个数确定的。
在GridLayout中就非常方便了，使用如下属性直接指定
android:rowCount="7"  
android:columnCount="4"

2、布局方向

首先它与LinearLayout布局一样，也分为水平和垂直两种方式，默认是水平布局，一个控件挨着一个控件从左到右依次排列，但是通过指定android:columnCount设置列数的属性后，控件会自动换行进行排列。
如果设置为垂直方向布局，控件则是从上到下依次排列，但是通过指定android:rowCount设置行数的属性后，控件会自动换列进行排列。

3、单元格属性，有以下2个参数：

android:layout_column      指定该单元格在第几列显示
android:layout_row         指定该单元格在第几行显示
android:layout_columnSpan  指定该单元格占据的列数
android:layout_rowSpan     指定该单元格占据的行数
android:layout_gravity     指定该单元格在容器中的位置
android:layout_columnWeight（API21加入）列权重
android:layout_rowWeight（API21加入）   行权重

4、关于平均分配行/列的问题

    为每一个希望平均分配的行或列分别指定
    android:layout_columnWeight="1"
    android:layout_rowWeight="1"

5、关于占据多行或多列时填满问题

    使用android:layout_gravity="fill"

三、计算器实现

在前面的文章中使用LinearLayout、RelativeLayout和TableLayout实现计算器
这次用GridLayout来实现同样的计算器界面
下面上代码

1、布局文件

res/layout/fragment_grid_layout.xml

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:columnCount="4"
            android:orientation="horizontal"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            tools:context=".GridLayoutActivityFragment"
            tools:showIn="@layout/activity_grid_layout">

    
    <com.antex.gridlayout_calculator.LogTextBox
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_columnSpan="4"
        android:background="@drawable/box"
        android:scrollbars="vertical"
        />
    <Button
        android:layout_columnWeight="1"
        android:text="AC"/>

    <Button
        android:layout_columnWeight="1"
        android:text="+/-"/>

    <Button
        android:layout_columnWeight="1"
        android:text="%"/>

    <Button
        android:layout_columnWeight="1"
        android:text="←"/>


    <Button
        android:layout_columnWeight="1"
        android:text="7"/>

    <Button
        android:layout_columnWeight="1"
        android:text="8"/>

    <Button
        android:layout_columnWeight="1"
        android:text="9"/>

    <Button
        android:layout_columnWeight="1"
        android:text="÷"/>

    <Button
        android:layout_columnWeight="1"
        android:text="4"/>

    <Button
        android:layout_columnWeight="1"
        android:text="5"/>

    <Button
        android:layout_columnWeight="1"
        android:text="6"/>

    <Button
        android:layout_columnWeight="1"
        android:text="×"/>

    <Button
        android:layout_columnWeight="1"
        android:text="1"/>

    <Button
        android:layout_columnWeight="1"
        android:text="2"/>

    <Button
        android:layout_columnWeight="1"
        android:text="3"/>

    <Button
        android:layout_columnWeight="1"
        android:text="－"/>

    
    <Button
        android:layout_gravity="fill"
        android:layout_columnSpan="2"
        android:text="0"/>

    <Button
        android:layout_columnWeight="1"
        android:text="."/>

    
    <Button
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_rowSpan="2"
        android:text="+"/>
    
    
    
    <Button
        android:layout_gravity="fill"
        android:layout_columnSpan="3"
        android:text="="/>

GridLayout>

2、效果图

开发工具：Android Studio1.4
SDK: Android 6.0
API 23

代码下载：GridLayout_Calculator.zip