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

最新推荐文章于 2023-02-26 21:34:20 发布

sanxiaochengyu

最新推荐文章于 2023-02-26 21:34:20 发布

阅读量5.7k

点赞数 8

分类专栏： android 文章标签： android GridLayout 布局 Calculator 计算器

本文链接：https://blog.csdn.net/a87b01c14/article/details/49488555

版权

android 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

一、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>