Android 计算器解析(一): 建立简单界面

转载请注明出处：http://blog.csdn.net/like_program/article/details/51813632

学Android学了几个月,感觉自己很菜,想找些小项目锻炼下自己,就跑到Github上下载了一个简单的计算器源码,研究了下代码,感觉不算很难,在研究代码的过程中,感觉这个App在某些地方还有些不足,于是我自己又把它完善了一下.

为了记录自己的学习心得,也为了帮助那些在入门阶段探索的Android新手们,我会把这个计算器App从头到尾,一步步的解析,希望Android新手能够从我的博客中获益.

原项目地址 : https://github.com/shiyanlou/Calculator-1 感谢原项目作者

这个计算器App的解析,我会写一个系列,大概4篇文章,由浅入深,先写一个简陋的界面,再加入计算功能,再完善界面,再完善计算功能.

希望我能写的通俗易懂.

阅读本篇文章需要有一定的Android基础及Android Studio使用经验

本篇文章只完成初步的App界面,不带任何逻辑,App效果图如下所示:

打开Android studio,我们先新建一个CalculatorTest项目.
修改布局文件的名字,修改activity_main.xml为activity_calculator.xml.
修改activity文件的名字,修改MainActivity.java为CalculatorActivity.java
为了创建界面,我们需要先在res/values目录下的colors.xml 和 strings.xml 中添加一些参数,以便等会在布局文件中引用它们

colors.xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorBlue">#729FFA</color>
    <color name="colorWhite">#FFFFFF</color>
</resources>

colors.xml是存储颜色的配置文件,

name的值是颜色的名字,也是我们在代码中引用的名字,用户可以自定义name的值,建议使用颜色的对应英文名.
颜色的值是16进制颜色代码,如果想使用别的颜色,可以在 www.114la.com/other/rgb.htm中查阅.

strings.xml代码如下

<resources>
    <string name="app_name">计算器</string>
    <string name="hint_text">输入表达式</string>
</resources>

strings.xml是存储字符串的配置文件,name的值是字符串的名字,也是我们在代码中引用的名字,用户可以自定义name的值,建议使用中文字符串的对应英文名.
添加完成后,我们开始写界面.

activity_calculator.xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              tools:context="com.example.calculatortest.CalculatorActivity" >

    <!-- 标题 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="@string/app_name"
        android:textSize="18sp"
        android:gravity="center"
        android:background="@color/colorBlue" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <!--操作界面-->
        <GridView
            android:id="@+id/grid_buttons"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:numColumns="4"
            android:layout_margin="10dip"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"
            android:gravity="center"
            android:layout_alignParentBottom="true" >
        </GridView>

        <!-- 显示界面 -->
        <EditText
            android:id="@+id/edit_input"
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:singleLine="false"
            android:hint="@string/hint_text"
            android:textSize="22sp"
            android:layout_above="@id/grid_buttons"
            android:layout_alignParentTop="true"
            android:gravity="start"/>

    </RelativeLayout>

</LinearLayout>

布局文件中一些新手不常见的属性在这里解释一下
android:numColumns="4"                               GridView有4列
android:verticalSpacing="10dp"                     竖直方向上,相邻项的距离为10dp,如效果图中的 1 和 4
android:horizontalSpacing="10dp"                 水平方向上,相邻项的距离为10dp,如效果图中的 1 和 2
android:singleLine="false"                              EditText可以多行显示
android:scrollbars="vertical"                           EditText在竖直滚动时,会出现一个滚动条
android:hint="@string/hint_text"                     EditText的提示文字

界面布局是一个竖直的线性布局.线性布局中包含了一个TextView(标题)和RelativeLayout.
RelativeLayout中又包含了一个GridView(操作界面)和一个EditText(显示界面)

看到这里,有的同学可能要问了,为什么EditText的layout_height设置为match_parent,却没有占满标题之外的剩余空间?
这是因为GridView是在EditText之前绘制的,GridView的layout_height的值wrap_content把高度确定下来了,layout_above="@id/grid_buttons"又把位置确定下来了,所以GridView在布局中位置也就确定下来了.GridView绘制完毕后,接着绘制EditText,此时设置EditText的layout_height为match_parent,EditText会把剩余的空间全部占满
同理,虽然RelativeLayout的layout_height是match_parent,但是它是在TextView之后绘制的,所以它只会占满TextView之外的剩余空间,而不会占满整个屏幕.

布局文件完成后,我们需要在CalculatorActivity.java中加载布局
CalculatorActivity.java代码如下所示

package com.example.calculatortest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.GridView;

import java.util.ArrayList;
import java.util.List;

public class CalculatorActivity extends AppCompatActivity {

    /**
     * 操作按钮
     */
    private GridView mGridView = null;

    /**
     * 输入框
     */
    private EditText mEditInput = null;

    /**
     * 适配器
     */
    private ArrayAdapter mAdapter = null;

    /**
     * 操作按钮上的字符集合
     */
    private final String[] mTextBtns = new String[]{
            "Back","(",")","CE",
            "7","8","9","/",
            "4","5","6","*",
            "1","2","3","+",
            "0",".","=","-",
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 隐藏标题栏
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_calculator);

        mEditInput = (EditText) findViewById(R.id.edit_input);
        mGridView = (GridView) findViewById(R.id.grid_buttons);
        // 创建适配器
        mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, mTextBtns);
        // 设置适配器
        mGridView.setAdapter(mAdapter);
    }
}

因为我们在布局中已经指定了一个标题,所以就不需要标题栏了.调用requestWindowFeature(Window.FEATURE_NO_TITLE)方法隐藏标题栏.注意,在Android Studio中隐藏标题栏光调用这一个方法是不够的,还要在res/values/styles.xml中修改AppTheme的parent参数

styles.xml代码如下

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

接着,获取EditText和GridView的控件,并创建一个适配器,然后设置适配器.

适配器的作用,用通俗的话讲,就是把mTextBtns中的数据(按钮的字符集合)按照适配器中定义的方式在GridView中摆放.

在这里,适配器中定义的方式是android.R.layout.simple_list_item_1,它的效果就是直接显示文字.

最后,给出AndroidManifest.xml源码

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.calculatortest">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".CalculatorActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

好了,到这里,一个简易的计算器App就完成了,但是只能看,不能用...而且界面也不怎么漂亮

不用着急,后面我们会不断完善

下一篇文章 Android计算器解析(二): 加入计算功能中,我会讲解如何加入计算功能

源码会在系列完结后提供下载

Android 计算器解析(一): 建立简单界面

猜你喜欢