安卓开发学习之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布局 设置4列,布局方向为横向-->
<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">

    <!-- 自定义LogTextBox 占据4列宽度-->
    <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="－"/>

    <!-- 占用2列,用“android:layout_gravity="fill"”必要的时候增加对象的横纵向大小，使其完全充满其容器. 用android:layout_columnWeight="1" 也可达到同样效果-->
    <Button  android:layout_gravity="fill" android:layout_columnSpan="2" android:text="0"/>

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

    <!-- 占用2行-->
    <Button  android:layout_columnWeight="1" android:layout_gravity="fill" android:layout_rowSpan="2" android:text="+"/>
    <!-- 用layout_rowWeight属性也可以达到上述效果-->
    <!--<Button android:layout_columnWeight="1" android:layout_rowWeight="1" android:layout_rowSpan="2" android:text="+"/> -->
    <!-- 占用3列 用android:layout_columnWeight="1" 也可达到同样效果-->
    <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