第一个Android实例——计算器 编辑

学习Android已经有一段时间了，最近一直在啃书，感觉挺充实的~好期待放假，这样可以快点把书看完自己去多做点实例项目，加深理解。

这是之前写的一个计算器小程序，比较简单，但是是自己第一个用Android写出来的小程序，值得纪念噢~

计算器实例

第一部分：计算器布局设计

       首选需要new一个Android项目，然后修改界面布局，代码如下

 

Java代码  

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"  
6.     android:background="#111"  
7.     tools:context="com.example.jisuanqi.MainActivity" >  
8.   
9.     <TextView  
10.         android:id="@+id/tv"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:background="#fff"  
14.         android:gravity="right"  
15.         android:layout_margin="5dp"  
16.          />  
17.   
18.     <TableLayout  
19.         android:layout_width="match_parent"  
20.         android:layout_height="wrap_content" >  
21.   
22.         <TableRow  
23.             android:layout_width="match_parent"  
24.             android:layout_height="wrap_content" >  
25.   
26.             <Button  
27.                 android:id="@+id/btn1"  
28.                 android:layout_height="wrap_content"  
29.                 android:layout_weight="1"  
30.                 android:text="1" />  
31.   
32.             <Button  
33.                 android:id="@+id/btn2"  
34.                 android:layout_height="wrap_content"  
35.                 android:layout_weight="1"  
36.                 android:text="2" />  
37.   
38.             <Button  
39.                 android:id="@+id/btn3"  
40.                 android:layout_height="wrap_content"  
41.                 android:layout_weight="1"  
42.                 android:text="3" />  
43.   
44.             <Button  
45.                 android:id="@+id/btnjia"  
46.                 android:layout_height="wrap_content"  
47.                 android:layout_weight="1"  
48.                 android:text="+" />  
49.         </TableRow>  
50.   
51.         <TableRow  
52.             android:layout_width="match_parent"  
53.             android:layout_height="wrap_content" >  
54.   
55.             <Button  
56.                 android:id="@+id/btn4"  
57.                 android:layout_height="wrap_content"  
58.                 android:layout_weight="1"  
59.                 android:text="4" />  
60.   
61.             <Button  
62.                 android:id="@+id/btn5"  
63.                 android:layout_height="wrap_content"  
64.                 android:layout_weight="1"  
65.                 android:text="5" />  
66.   
67.             <Button  
68.                 android:id="@+id/btn6"  
69.                 android:layout_height="wrap_content"  
70.                 android:layout_weight="1"  
71.                 android:text="6" />  
72.   
73.             <Button  
74.                 android:id="@+id/btnjian"  
75.                 android:layout_height="wrap_content"  
76.                 android:layout_weight="1"  
77.                 android:text="-" />  
78.         </TableRow>  
79.   
80.         <TableRow  
81.             android:layout_width="match_parent"  
82.             android:layout_height="wrap_content" >  
83.   
84.             <Button  
85.                 android:id="@+id/btn7"  
86.                 android:layout_height="wrap_content"  
87.                 android:layout_weight="1"  
88.                 android:text="7" />  
89.   
90.             <Button  
91.                 android:id="@+id/btn8"  
92.                 android:layout_height="wrap_content"  
93.                 android:layout_weight="1"  
94.                 android:text="8" />  
95.   
96.             <Button  
97.                 android:id="@+id/btn9"  
98.                 android:layout_height="wrap_content"  
99.                 android:layout_weight="1"  
100.                 android:text="9" />  
101.   
102.             <Button  
103.                 android:id="@+id/btncheng"  
104.                 android:layout_height="wrap_content"  
105.                 android:layout_weight="1"  
106.                 android:text="*" />  
107.         </TableRow>  
108.   
109.         <TableRow  
110.             android:layout_width="match_parent"  
111.             android:layout_height="wrap_content" >  
112.   
113.             <Button  
114.                 android:id="@+id/btnclean"  
115.                 android:layout_height="wrap_content"  
116.                 android:layout_weight="1"  
117.                 android:text="C" />  
118.   
119.             <Button  
120.                 android:id="@+id/btn0"  
121.                 android:layout_height="wrap_content"  
122.                 android:layout_weight="1"  
123.                 android:text="0" />  
124.   
125.             <Button  
126.                 android:id="@+id/btndengyu"  
127.                 android:layout_height="wrap_content"  
128.                 android:layout_weight="1"  
129.                 android:text="=" />  
130.   
131.             <Button  
132.                 android:id="@+id/btnchu"  
133.                 android:layout_height="wrap_content"  
134.                 android:layout_weight="1"  
135.                 android:text="/" />  
136.         </TableRow>  
137.     </TableLayout>  
138.   
139. </LinearLayout>  

 

 

 预览效果：

虽然看起来还比较硕，但是起码有个样子了...(*^__^*) 
 

 

第二部分：计算器功能实现

首先需要在主activity中注册组件

 

Java代码  

1. public class MainActivity extends Activity implements OnClickListener {  
2.   
3.     private TextView tvScreen ;  
4.     private List<Item> items = new ArrayList<Item>();  

这里引入OnclickListener接口 是在后面绑定按钮设置监听器

 

然后重写onCreate方法，把布局中的按钮以及textview绑定

 

Java代码  

1. @Override  
2. protected void onCreate(Bundle savedInstanceState) {  
3.     super.onCreate(savedInstanceState);  
4.     setContentView(R.layout.activity_main);  
5.     tvScreen = (TextView) findViewById(R.id.tv);  
6.     findViewById(R.id.btn0).setOnClickListener(this);  
7.     findViewById(R.id.btn1).setOnClickListener(this);  
8.     findViewById(R.id.btn2).setOnClickListener(this);  
9.     findViewById(R.id.btn3).setOnClickListener(this);  
10.     findViewById(R.id.btn4).setOnClickListener(this);  
11.     findViewById(R.id.btn5).setOnClickListener(this);  
12.     findViewById(R.id.btn6).setOnClickListener(this);  
13.     findViewById(R.id.btn7).setOnClickListener(this);  
14.     findViewById(R.id.btn8).setOnClickListener(this);  
15.     findViewById(R.id.btn9).setOnClickListener(this);  
16.     findViewById(R.id.btnjia).setOnClickListener(this);  
17.     findViewById(R.id.btnjian).setOnClickListener(this);  
18.     findViewById(R.id.btncheng).setOnClickListener(this);  
19.     findViewById(R.id.btnchu).setOnClickListener(this);  
20.     findViewById(R.id.btndengyu).setOnClickListener(this);  
21.     findViewById(R.id.btnclean).setOnClickListener(this);  
22.     findViewById(R.id.btn0).setOnClickListener(this);  
23.   
24.       
25. }  

 到了这一步，得理清一下算法逻辑。

 

 

我们首先得输入一个数字，然后输入运算符号，再输入数字，再执行=号

10+20

 

一个数字一个操作符号一个数字一个操作符号这样排列

10+20=38

 

在执行第二个操作符号时前面三项已经可以执行运算了

所以这里需要一个原则：一旦能执行操作运算就执行操作运算，之后再与后面的元素执行相关操作

 

所以这里可以用数组把这些项都记录下来，然后再做一个判断，判断前面三项是否有三项，就可以执行运算，如果是就执行运算并继续到下一个。

 

所以接下来再创建一个类Item.java（注意这个类和Mainactivity在一个包里）表示每一项

Java代码  

1. package com.example.jisuanqi;  
2.   
3. public class Item {  
4.       
5.     public Item(double value, int type) {  
6.         this.value = value;  
7.         this.type = type;  
8.     }  
9.       
10.     public double value = 0;  
11.       
12.     public int type = 0;  
13. }  

 以及另一个类表示数据类型Types.java

Java代码  

1. package com.example.jisuanqi;  
2.   
3. public class Types {  
4.   
5.     public static final int jia = 1;  
6.   
7.     public static final int jian = 2;  
8.       
9.     public static final int cheng = 3;  
10.   
11.     public static final int chu = 4;  
12.   
13.     public static final int dengyu = 5;  
14. }  

 再回到mainactivity里定义一个数组，这个数组是用来存放项的，也就是计算时输入的项。

Java代码  

1. public class MainActivity extends Activity implements OnClickListener {  
2.   
3.     private TextView tvScreen ;  
4.     private List<Item> items = new ArrayList<Item>();  

 然后在onclick（）方法中作判断，分别执行不同的操作。

Java代码  

1. public void onClick(View v) {  
2.         switch (v.getId()) {  
3.         case R.id.btn0:  
4.             tvScreen.append("0");  
5.             break;  
6.         case R.id.btn1:  
7.             tvScreen.append("1");  
8.             break;  
9.         case R.id.btn2:  
10.             tvScreen.append("2");  
11.             break;  
12.         case R.id.btn3:  
13.             tvScreen.append("3");  
14.             break;  
15.         case R.id.btn4:  
16.             tvScreen.append("4");  
17.             break;  
18.         case R.id.btn5:  
19.             tvScreen.append("5");  
20.             break;  
21.         case R.id.btn6:  
22.             tvScreen.append("6");  
23.             break;  
24.         case R.id.btn7:  
25.             tvScreen.append("7");  
26.             break;  
27.         case R.id.btn8:  
28.             tvScreen.append("8");  
29.             break;  
30.         case R.id.btn9:  
31.             tvScreen.append("9");  
32.             break;  
33.         case R.id.btnjia:  
34.             items.add(new Item(Double.parseDouble(tvScreen.getText().toString()),Types.dengyu));  
35.             checkAndCompute();  
36.             items.add(new Item(0, Types.jia));  
37.             tvScreen.setText("");  
38.             break;  
39.         case R.id.btnjian:  
40.             items.add(new Item(Double.parseDouble(tvScreen.getText().toString()),Types.dengyu));  
41.             checkAndCompute();  
42.             items.add(new Item(0, Types.jian));  
43.             tvScreen.setText("");  
44.             break;  
45.         case R.id.btncheng:  
46.             items.add(new Item(Double.parseDouble(tvScreen.getText().toString()),Types.dengyu));  
47.             checkAndCompute();  
48.             items.add(new Item(0, Types.cheng));  
49.             tvScreen.setText("");  
50.             break;  
51.         case R.id.btnchu:  
52.             items.add(new Item(Double.parseDouble(tvScreen.getText().toString()),Types.dengyu));  
53.             checkAndCompute();  
54.             items.add(new Item(0, Types.chu));  
55.             tvScreen.setText("");  
56.             break;  
57.         case R.id.btnclean:  
58.             tvScreen.setText("");  
59.             items.clear();  
60.             break;  
61.         case R.id.btndengyu:  
62.             items.add(new Item(Double.parseDouble(tvScreen.getText().toString()),Types.dengyu));  
63.             checkAndCompute();  
64.             tvScreen.setText(items.get(0).value+"");  
65.             items.clear();  
66.             break;  
67.   
68.         default:  
69.             break;  
70.         }  
71.     }  

 注意这里还需要一个方法进行计算

 

Java代码  

1. public void checkAndCompute() {  
2.     if (items.size()>=3) {  
3.         double a = items.get(0).value;  
4.         double b = items.get(2).value;  
5.         int opt = items.get(1).type;  
6.           
7.         items.clear();  
8.           
9.         switch (opt) {  
10.         case Types.jia:  
11.             items.add(new Item(a+b, Types.dengyu));  
12.             break;  
13.         case Types.jian:  
14.             items.add(new Item(a-b, Types.dengyu));  
15.             break;  
16.         case Types.cheng:  
17.             items.add(new Item(a*b, Types.dengyu));  
18.             break;  
19.         case Types.chu:  
20.             items.add(new Item(a/b, Types.dengyu));  
21.             break;  
22.   
23.         default:  
24.             break;  
25.         }  
26.           
27.     }  
28. }  

 

 

这样一来，计算器功能就已经实现了，下面是虚拟机上的运行效果图：

操作：6+3=9

 

 

 

 

ps：写完之后发现其实还是有很多缺陷的。。比如没有小数点.，不过把左下方C的按钮换成“.”，然后再到下方加一个专门的clean按钮就可以了~

************************************************华丽的分割线******************************************************************

今天把计算器界面还有功能优化了一下，加入了小数点功能，下方加入了清屏按钮

新增了一个显示框，可以显示算法的步骤。

还加入了按钮选择状态和非选择状态颜色显示不同的功能

其实这个功能并不复杂，在res目录下新建一个drawable文件夹

然后在里面新建xml文件login_button_selector.xml类型为selector

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.         <item android:drawable="@drawable/clr_normal" android:state_pressed="false"/>  
4.         <item android:drawable="@drawable/clr_pressed" android:state_pressed="true"/>  
5.     </selector>  

 然后在按钮布局中添加一句

Java代码  

1. android:background="@drawable/login_button_selector"  

 就ok~\(≧▽≦)/~啦啦啦

下面是运行效果截图：

 

 

最后就是整个项目的附件：

..试了几次不能上传，所以传到百度云了，下面是链接：

http://yun.baidu.com/share/link?shareid=4106246580&uk=4047395201