Android實戰(zhàn)項目之實現(xiàn)一個簡單計算器
實戰(zhàn)項目:簡易計算器
1.需求分析
雖然只學了一些Android的簡單控件,但是只要活學善用這些布局和控件,也能夠做出實用的App。
接下來讓我們嘗試設計并實現(xiàn)一個簡單計算器。
2.界面設計
Windows計算器,它主要由上半部分的計算結(jié)果與下半部分的計算按鈕兩塊區(qū)域組成,據(jù)此可創(chuàng)建一個界面相似的計算器App,同樣由計算結(jié)果和計算按鈕兩部分組成,如下圖所示。

下面是設計的簡易計算器效果圖。

按照計算器App的效果圖,大致分布著下列Android控件:
- 線性布局LinearLayout:因為計算器界面整體從上往下布局,所以需要垂直方向的LinearLayout。
- 網(wǎng)格布局GridLayout:計算器下半部分的幾排按鈕,正好成五行四列表格分布,適合采用GridLayout。
- 滾動視圖ScrollView:雖然計算器界面不寬也不高,但是以防萬一,最好還是加個垂直方向的ScrollView。
- 文本視圖TextView:很明顯頂部標題“簡單計算器”就是TextView,且文字居中顯示;標題下面的計算結(jié)果也需要使用TextView,且文字靠右靠下顯示。
- 按鈕Button:幾乎所有的數(shù)字與運算符按鈕都采用了Button控件。
- 圖像按鈕ImageButton:開根號的運算符“√”雖然能夠打出來,但是右上角少了數(shù)學課本上的一橫,所以該按鈕要顯示一張標準的開根號圖片,這用到了ImageButton。
3.關鍵代碼
App同用戶交互的過程中,時常要向用戶反饋一些信息,例如:點錯了按鈕、輸入了非法字符等等,諸如此類。對于這些一句話的提示,Android設計了Toast控件,用于展示短暫的提示文字。Toast的用法很簡單,只需以下一行代碼即可彈出提示小窗:
Toast.makeText(MainActivity.this, "提示文字", Toast.LENGTH_SHORT).show();
上面代碼用到了兩個方法,分別是makeText和show,其中show方法用來展示提示窗,而makeText方法用來構(gòu)建提示文字的模板。makeText的第一個參數(shù)為當前頁面的實例,倘若當前頁面名為MainActivity的話,這里就填MainActivity.this,當然如果不引發(fā)歧義的話,直接填this也可以;第二個參數(shù)為準備顯示的提示文本;第三個參數(shù)規(guī)定了提示窗的駐留時長,為Toast.LENGTH_SHORT表示停留2秒后消失,為Toast.LENGTH_LONG表示停留3.5秒后消失。
對于計算器來說,有好幾種情況需要提示用戶,比如“被除數(shù)不能為零”、“開根號的數(shù)值不能小于零”、“不能對零求倒數(shù)”等等,這時就能通過Toast控件彈窗提醒用戶。Toast彈窗的展示效果如圖3-37所示,此時App發(fā)現(xiàn)了被除數(shù)為零的情況。

對于簡單計算來說,每次運算至少需要兩個操作數(shù),比如加減乘除四則運算就要求有兩個操作數(shù),求倒數(shù)、求平方、求開方只要求一個操作數(shù);并且每次運算過程有且僅有一個運算符(等號不計在內(nèi)),故而計算器App得事先聲明下列幾個字符串變量:
private String operator = ""; // 運算符 private String firstNum = ""; // 第一個操作數(shù) private String secondNum = ""; // 第二個操作數(shù) private String result = ""; // 當前的計算結(jié)果
用戶在計算器界面每輸入一個按鍵,App都要進行下列兩項操作:
1.輸入按鍵的合法性校驗
在開展計算之前,務必檢查用戶的按鍵是否合法,因為非法按鍵將導致不能正常運算。非法的按鍵輸入包括但不限于下列情況:
(1)被除數(shù)不能為零。
(2)開根號的數(shù)值不能小于零。
(3)不能對零求倒數(shù)。
(4)一個數(shù)字不能有兩個小數(shù)點。
(5)如果沒輸入運算符,就不能點擊等號按鈕。
(6)如果沒輸入操作數(shù),也不能點擊等號按鈕。
比如點擊等號按鈕之時,App的邏輯校驗代碼示例如下:
if(v.getId()==R.id.btn_equal){ // 點擊了等號按鈕
if(operator.equals("")){ // 無運算符
Toast.makeText(this,"請輸入運算符",Toast.LENGTH_SHORT).show();
return false;
}
if(firstNum.equals("")||secondNum.equals("")){ // 無操作數(shù)
Toast.makeText(this,"請輸入數(shù)字",Toast.LENGTH_SHORT).show();
return false;
}
if(operator.equals("÷")&&Double.parseDouble(secondNum)==0){ // 除數(shù)為零
Toast.makeText(this,"除數(shù)不能為零",Toast.LENGTH_SHORT).show();
return false;
}
}
2.執(zhí)行運算并顯示計算結(jié)果
合法性校驗通過,方能繼續(xù)接下來的業(yè)務邏輯,倘若用戶本次未輸入與計算有關的按鈕(例如等號、求倒數(shù)、求平方、求開方),則計算器只需拼接操作數(shù)或者運算符;倘若用戶本次輸入了與計算有關的按鈕(例如等號、求倒數(shù)、求平方、求開方),則計算器立即執(zhí)行運算操作并顯示計算結(jié)果。以加減乘除四則運算為例,它們的計算代碼例子如下所示:
// 加減乘除四則運算,返回計算結(jié)果
private double calculateFour() {
double calculate_result = 0;
if (operator.equals("+")) { // 當前是相加運算
calculate_result = Double.parseDouble(firstNum) +
Double.parseDouble(secondNum);
} else if (operator.equals("-")) { // 當前是相減運算
calculate_result = Double.parseDouble(firstNum) -
Double.parseDouble(secondNum);
} else if (operator.equals("×")) { // 當前是相乘運算
calculate_result = Double.parseDouble(firstNum) *
Double.parseDouble(secondNum);
} else if (operator.equals("÷")) { // 當前是相除運算
calculate_result = Double.parseDouble(firstNum) /
Double.parseDouble(secondNum);
}
Log.d(TAG, "calculate_result=" + calculate_result); // 把運算結(jié)果打印到日志中
return calculate_result;
}
完成合法性校驗與運算處理之后,計算器App的編碼基本結(jié)束了。運行計算器App,執(zhí)行各種運算的界面效果如圖3-38和圖3-39所示。其中圖3-38為執(zhí)行乘法運算8×9=?的計算器界面,圖3-39為先對8做開方再給開方結(jié)果加上60的計算器界面。
簡單計算器 - 詳細操作步驟
所需文件
百度網(wǎng)盤鏈接: https://pan.baidu.com/s/1UA2O9SYPY3rjNZ6PZLwPUA?pwd=u5hr 提取碼: u5hr
1.創(chuàng)建項目 CalcActivity
打開android studio,選擇【project】-【new project】

選擇【phone and tablet】-【empty activity】-單擊按鈕【next】

設置name為 CalcActivity ,選擇語言為 Java ,單擊按鈕【finish】

2.項目中新建一個CalcActivity活動頁面
選擇【app】-【java】-【com.example.calcactivity】- 右擊鼠標 - 選擇【new】-【activity】-【empty activity】

在New Android Activity窗口中,輸入 CalcActivity,單擊按鈕【Finish】

3.編寫簡易計算器的界面代碼
在【app】-【res】-【drawable】中插入一張透明背景的根號圖片;并在【values】下創(chuàng)建一個dimens.xml文件。

dimens.xml文件主要設置計算器按鈕的高度和顯示在按鈕上字體的大小、內(nèi)容如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="button_font_size">30sp</dimen>
<dimen name="button_height">75dp</dimen>
</resources>
編寫【values】文件下的strings.xml文件、內(nèi)容如下:

<resources>
<string name="app_name">CalcActivity</string>
<string name="simple_calculator">簡單計算器</string>
<string name="cancel">CE</string>
<string name="divide">÷</string>
<string name="multiply">×</string>
<string name="clear">C</string>
<string name="seven">7</string>
<string name="eight">8</string>
<string name="nine">9</string>
<string name="plus">+</string>
<string name="four">4</string>
<string name="five">5</string>
<string name="six">6</string>
<string name="minus">-</string>
<string name="one">1</string>
<string name="two">2</string>
<string name="three">3</string>
<string name="reciprocal">1/x</string>
<string name="zero">0</string>
<string name="dot">.</string>
<string name="equal">=</string>
</resources>
編寫【layout】文件下的activity_calc.xml文件、這里使用線性布局、內(nèi)容如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EEEEEE"
android:orientation="vertical"
android:padding="5dp">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/simple_calculator"
android:textColor="@color/black"
android:textSize="20sp" />
<TextView
android:id="@+id/tv_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:gravity="right|bottom"
android:lines="3"
android:text="0"
android:textColor="@color/black"
android:textSize="25sp" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="4"
android:rowCount="5">
<Button
android:id="@+id/btn_cancel"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/cancel"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_divide"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/divide"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_multiply"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/multiply"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_clear"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/clear"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_seven"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/seven"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_eight"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/eight"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_nine"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/nine"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_plus"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/plus"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_four"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/four"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_five"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/five"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_six"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/six"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_minus"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/minus"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_one"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/one"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_two"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/two"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_three"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/three"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<ImageButton
android:id="@+id/ib_sqrt"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:scaleType="centerInside"
android:src="@drawable/sqrt" />
<Button
android:id="@+id/btn_reciprocal"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/reciprocal"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_zero"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/zero"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_dot"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/dot"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
<Button
android:id="@+id/btn_equal"
android:layout_width="0dp"
android:layout_height="@dimen/button_height"
android:layout_columnWeight="1"
android:gravity="center"
android:text="@string/equal"
android:textColor="@color/black"
android:textSize="@dimen/button_font_size" />
</GridLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>現(xiàn)在的運行效果截圖,點擊按鈕無反應,無計算功能(后臺響應)


這里就相當于設計好了網(wǎng)頁中的靜態(tài)頁面,后臺響應還需要繼續(xù)編寫,才能實現(xiàn)計算功能。
4.編寫簡易計算器后臺計算功能
編寫【java】-【com.example.calcactivity】中的 CalcActivity

原始代碼樣式:

最后,CalcActivity.java源代碼
package com.example.calcactivity;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
public class CalcActivity extends AppCompatActivity implements View.OnClickListener {
private TextView tv_result;
// 第一個操作數(shù)
private String firstNum = "";
// 運算符
private String operator = "";
// 第二個操作數(shù)
private String secondNum = "";
// 當前的計算結(jié)果
private String result = "";
// 顯示的文本內(nèi)容
private String showText = "";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_calc);
// 從布局文件中獲取名叫tv_result的文本視圖
tv_result = findViewById(R.id.tv_result); // 設置為全局變量
// 下面給每個按鈕控件都注冊了點擊監(jiān)聽器
findViewById(R.id.btn_cancel).setOnClickListener(this);
findViewById(R.id.btn_divide).setOnClickListener(this); // “除法”按鈕
findViewById(R.id.btn_multiply).setOnClickListener(this); // “乘法”按鈕
findViewById(R.id.btn_clear).setOnClickListener(this); // “清除”按鈕
findViewById(R.id.btn_seven).setOnClickListener(this); // 數(shù)字7
findViewById(R.id.btn_eight).setOnClickListener(this); // 數(shù)字8
findViewById(R.id.btn_nine).setOnClickListener(this); // 數(shù)字9
findViewById(R.id.btn_plus).setOnClickListener(this); // “加法”按鈕
findViewById(R.id.btn_four).setOnClickListener(this); // 數(shù)字4
findViewById(R.id.btn_five).setOnClickListener(this); // 數(shù)字5
findViewById(R.id.btn_six).setOnClickListener(this); // 數(shù)字6
findViewById(R.id.btn_minus).setOnClickListener(this); // “減法”按鈕
findViewById(R.id.btn_one).setOnClickListener(this); // 數(shù)字1
findViewById(R.id.btn_two).setOnClickListener(this); // 數(shù)字2
findViewById(R.id.btn_three).setOnClickListener(this); // 數(shù)字3
findViewById(R.id.btn_reciprocal).setOnClickListener(this); // 求倒數(shù)按鈕
findViewById(R.id.btn_zero).setOnClickListener(this); // 數(shù)字0
findViewById(R.id.btn_dot).setOnClickListener(this); // “小數(shù)點”按鈕
findViewById(R.id.btn_equal).setOnClickListener(this); // “等號”按鈕
findViewById(R.id.ib_sqrt).setOnClickListener(this); // “開平方”按鈕
}
@Override
public void onClick(View v) {
String inputText;
// 如果是開根號按鈕
if (v.getId() == R.id.ib_sqrt) {
inputText = "√";
} else {
// 除了開根號之外的其他按鈕
inputText = ((TextView) v).getText().toString();
}
switch (v.getId()) {
// 點擊了清除按鈕
case R.id.btn_clear:
clear();
break;
// 點擊了取消按鈕
case R.id.btn_cancel:
break;
// 點擊了加、減、乘、除按鈕
case R.id.btn_plus:
case R.id.btn_minus:
case R.id.btn_multiply:
case R.id.btn_divide:
operator = inputText; // 運算符
refreshText(showText + operator);
break;
// 點擊了等號按鈕
case R.id.btn_equal:
// 加減乘除四則運算
double calculate_result = calculateFour();
refreshOperate(String.valueOf(calculate_result));
refreshText(showText + "=" + result);
break;
// 點擊了開根號按鈕
case R.id.ib_sqrt:
double sqrt_result = Math.sqrt(Double.parseDouble(firstNum));
refreshOperate(String.valueOf(sqrt_result));
refreshText(showText + "√=" + result);
break;
// 點擊了求倒數(shù)按鈕
case R.id.btn_reciprocal:
double reciprocal_result = 1.0 / Double.parseDouble(firstNum);
refreshOperate(String.valueOf(reciprocal_result));
refreshText(showText + "/=" + result);
break;
// 點擊了其他按鈕,包括數(shù)字和小數(shù)點
default:
// 上次的運算結(jié)果已經(jīng)出來了
if (result.length() > 0 && operator.equals("")) {
clear();
}
// 無運算符,則繼續(xù)拼接第一個操作數(shù)
if (operator.equals("")) {
firstNum = firstNum + inputText;
} else {
// 有運算符,則繼續(xù)拼接第二個操作數(shù)
secondNum = secondNum + inputText;
}
// 整數(shù)不需要前面的0
if (showText.equals("0") && !inputText.equals(".")) {
refreshText(inputText);
} else {
refreshText(showText + inputText);
}
break;
}
}
// 加減乘除四則運算,返回計算結(jié)果
private double calculateFour() {
switch (operator) {
case "+":
return Double.parseDouble(firstNum) + Double.parseDouble(secondNum);
case "-":
return Double.parseDouble(firstNum) - Double.parseDouble(secondNum);
case "×":
return Double.parseDouble(firstNum) * Double.parseDouble(secondNum);
default:
return Double.parseDouble(firstNum) / Double.parseDouble(secondNum);
}
}
// 清空并初始化
private void clear() {
refreshOperate("");
refreshText("");
}
// 刷新運算結(jié)果
private void refreshOperate(String new_result) {
result = new_result;
firstNum = result;
secondNum = "";
operator = "";
}
// 刷新文本顯示
private void refreshText(String text) {
showText = text;
tv_result.setText(showText);
}
}總結(jié)
本次主要介紹了App開發(fā)中常見簡單控件的用法,包括:在文本視圖上顯示文本(設置文本的內(nèi)容、大小和顏色)、修改視圖的基本屬性(設置視圖的寬高、間距和對齊方式)、運用各種布局排列控件(線性布局、相對布局、網(wǎng)格布局、滾動視圖)、處理按鈕的觸控事件(按鈕控件的點擊、長按、禁用與恢復)、在圖像控件上顯示圖片(圖像視圖、圖像按鈕、同時展示文本與圖像)。最后設計了一個實戰(zhàn)項目“簡單計算器”,在該項目的App編碼中用到了前面介紹的大部分控件和布局,從而加深了對所學知識的理解。
通過對本次的學習,讀者應該能掌握以下4種開發(fā)技能:
(1)學會在文本控件上正確展示文字。
(2)學會在圖像控件上正確展示圖片。
(3)學會正確處理按鈕的點
(4)學會在常見布局上排列組合多個控件。
到此這篇關于Android實戰(zhàn)項目之實現(xiàn)一個簡單計算器的文章就介紹到這了,更多相關Android簡單計算器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
flutter 輪播圖動態(tài)加載網(wǎng)絡圖片的方法
Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。這篇文章主要介紹了flutter 輪播圖動態(tài)加載網(wǎng)絡圖片的方法 ,需要的朋友可以參考下2019-07-07
Android模擬器安裝APP出現(xiàn)INSTALL_FAILED_NO_MATCHING_ABIS錯誤解決方案
這篇文章主要介紹了 Android模擬器安裝APP出現(xiàn)INSTALL_FAILED_NO_MATCHING_ABIS錯誤解決方案的相關資料,需要的朋友可以參考下2016-12-12
Android 服務端將位置信息發(fā)送給客戶端的實現(xiàn)
這篇文章主要介紹了Android 服務端將位置信息發(fā)送給客戶端的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
Android自定義View之RadioGroup實現(xiàn)跨多行顯示
這篇文章主要介紹了Android自定義View之RadioGroup實現(xiàn)跨多行顯示,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11

