Android實戰(zhàn)項目之實現(xiàn)一個簡單計算器
實戰(zhàn)項目:簡易計算器
1.需求分析
雖然只學了一些Android的簡單控件,但是只要活學善用這些布局和控件,也能夠做出實用的App。
接下來讓我們嘗試設(shè)計并實現(xiàn)一個簡單計算器。
2.界面設(shè)計
Windows計算器,它主要由上半部分的計算結(jié)果與下半部分的計算按鈕兩塊區(qū)域組成,據(jù)此可創(chuàng)建一個界面相似的計算器App,同樣由計算結(jié)果和計算按鈕兩部分組成,如下圖所示。
下面是設(shè)計的簡易計算器效果圖。
按照計算器App的效果圖,大致分布著下列Android控件:
- 線性布局LinearLayout:因為計算器界面整體從上往下布局,所以需要垂直方向的LinearLayout。
- 網(wǎng)格布局GridLayout:計算器下半部分的幾排按鈕,正好成五行四列表格分布,適合采用GridLayout。
- 滾動視圖ScrollView:雖然計算器界面不寬也不高,但是以防萬一,最好還是加個垂直方向的ScrollView。
- 文本視圖TextView:很明顯頂部標題“簡單計算器”就是TextView,且文字居中顯示;標題下面的計算結(jié)果也需要使用TextView,且文字靠右靠下顯示。
- 按鈕Button:幾乎所有的數(shù)字與運算符按鈕都采用了Button控件。
- 圖像按鈕ImageButton:開根號的運算符“√”雖然能夠打出來,但是右上角少了數(shù)學課本上的一橫,所以該按鈕要顯示一張標準的開根號圖片,這用到了ImageButton。
3.關(guān)鍵代碼
App同用戶交互的過程中,時常要向用戶反饋一些信息,例如:點錯了按鈕、輸入了非法字符等等,諸如此類。對于這些一句話的提示,Android設(shè)計了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.輸入按鍵的合法性校驗
在開展計算之前,務(wù)必檢查用戶的按鍵是否合法,因為非法按鍵將導致不能正常運算。非法的按鍵輸入包括但不限于下列情況:
(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è)務(wù)邏輯,倘若用戶本次未輸入與計算有關(guān)的按鈕(例如等號、求倒數(shù)、求平方、求開方),則計算器只需拼接操作數(shù)或者運算符;倘若用戶本次輸入了與計算有關(guān)的按鈕(例如等號、求倒數(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】
設(shè)置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文件主要設(shè)置計算器按鈕的高度和顯示在按鈕上字體的大小、內(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)在的運行效果截圖,點擊按鈕無反應(yīng),無計算功能(后臺響應(yīng))
這里就相當于設(shè)計好了網(wǎng)頁中的靜態(tài)頁面,后臺響應(yīng)還需要繼續(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); // 設(shè)置為全局變量 // 下面給每個按鈕控件都注冊了點擊監(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ā)中常見簡單控件的用法,包括:在文本視圖上顯示文本(設(shè)置文本的內(nèi)容、大小和顏色)、修改視圖的基本屬性(設(shè)置視圖的寬高、間距和對齊方式)、運用各種布局排列控件(線性布局、相對布局、網(wǎng)格布局、滾動視圖)、處理按鈕的觸控事件(按鈕控件的點擊、長按、禁用與恢復)、在圖像控件上顯示圖片(圖像視圖、圖像按鈕、同時展示文本與圖像)。最后設(shè)計了一個實戰(zhàn)項目“簡單計算器”,在該項目的App編碼中用到了前面介紹的大部分控件和布局,從而加深了對所學知識的理解。
通過對本次的學習,讀者應(yīng)該能掌握以下4種開發(fā)技能:
(1)學會在文本控件上正確展示文字。
(2)學會在圖像控件上正確展示圖片。
(3)學會正確處理按鈕的點
(4)學會在常見布局上排列組合多個控件。
到此這篇關(guān)于Android實戰(zhàn)項目之實現(xiàn)一個簡單計算器的文章就介紹到這了,更多相關(guān)Android簡單計算器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
flutter 輪播圖動態(tài)加載網(wǎng)絡(luò)圖片的方法
Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。這篇文章主要介紹了flutter 輪播圖動態(tài)加載網(wǎng)絡(luò)圖片的方法 ,需要的朋友可以參考下2019-07-07Android模擬器安裝APP出現(xiàn)INSTALL_FAILED_NO_MATCHING_ABIS錯誤解決方案
這篇文章主要介紹了 Android模擬器安裝APP出現(xiàn)INSTALL_FAILED_NO_MATCHING_ABIS錯誤解決方案的相關(guān)資料,需要的朋友可以參考下2016-12-12Android 服務(wù)端將位置信息發(fā)送給客戶端的實現(xiàn)
這篇文章主要介紹了Android 服務(wù)端將位置信息發(fā)送給客戶端的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-01-01Android自定義View之RadioGroup實現(xiàn)跨多行顯示
這篇文章主要介紹了Android自定義View之RadioGroup實現(xiàn)跨多行顯示,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11