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"?>    #3F51B5    #303F9F    #FF4081    #729FFA    #FFFFFF

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

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

strings.xml代码如下

    计算器    输入表达式

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

activity_calculator.xml代码如下

<?xml version="1.0" encoding="utf-8"?>

布局文件中一些新手不常见的属性在这里解释一下
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(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代码如下

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

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

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

最后,给出AndroidManifest.xml源码

<?xml version="1.0" encoding="utf-8"?>

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

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

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

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

更多相关文章

随机推荐