2.5　實戰項目：簡單計算器

到目前為止，雖然只學了一些Android的初級控件，但是也可以學以致用，即便只有這些簡單的布局和控件，也能夠做出實用的App。接下來嘗試設計并實現一個簡單計算器。

2.5.1　設計思路

計算器是人們日常生活中最常用的工具之一，無論在電腦上還是手機上，都少不了計算器的身影。以Windwos上的計算器為例，界面簡潔且十分實用，程序界面如圖2-31所示。

這個計算器界面主要分為兩部分，一部分是上面的文本框，用于顯示計算結果；另一部分是下面的幾排按鈕，用于輸入數字與各種運算符。為了減少復雜度，可以精簡一些功能，只保留數字與加、減、乘、除四則運算，另外補充一個開根號（求平方根）的運算。至于App的顯示界面，基本與習慣的計算器界面保持一致，經過對操作按鈕的適當排列，調整后的設計效果如圖2-32所示。

圖2-31　Windows的計算器

圖2-32　簡單計算器的設計效果圖

這個計算器雖然小巧，但是基本囊括了本章的知識點，先來看看用了哪些控件。

• 線性布局LinearLayout：計算器界面整體上是從上往下布局的，所以需要垂直方向的LinearLayout；下面部分每行都有4個按鈕，又需要水平方向的LinearLayout。
• 滾動視圖ScrollView：雖然計算器界面不寬也不高，但是以防萬一，最好還是加個垂直方向的ScrollView。
• 文本視圖TextView：很明顯上方標題“簡單計算器”就是TextView，下面的計算結果也需要使用TextView，而且是能夠自動從下往上滾動的TextView，即聊天室效果的文本視圖。
• 按鈕Button：絕大多數數字與運算符按鈕都采用Button控件。
• 圖像視圖ImageView：暫時未用到。
• 圖像按鈕ImageButton：開根號的運算符“√”雖然能夠打出來，但是右上角少了數學課本上的一橫，所以該按鈕要用一張標準的開根號圖片顯示，這就用到了ImageButton。
• 狀態列表圖形：每個按鈕都有按下和彈起兩種狀態，這里定制了按鈕控件的自定義樣式，因此用到了狀態列表圖形。
• 形狀圖形：運算結果用到的文本視圖邊框是圓角矩形，所以得給它定義一個shape文件，把shape定義的圓角矩形作為文本視圖的背景。
• 九宮格圖片：注意計算器界面左下角的“0”，該按鈕是其他按鈕的兩倍寬，如果使用普通圖片當背景，勢必造成邊緣線被拉寬、拉模糊的問題，故而要采用點九圖片避免這種情況。

經過對計算器效果圖的詳細分析，大家初步了解了所運用的控件技術，接下來就可以對界面進行布局和排列了。

2.5.2　小知識：日志Log／提示Toast

在正式編碼之前，讀者有必要了解一下Android中的運行信息調試手段。例如，開發C程序時，程序員常用printf函數輸出程序日志；開發Java程序時，程序員常用System.out.println函數輸出程序日志。同樣，App開發也有相應的函數輸出提示信息。提示信息可分為兩類，一類是給開發者看的，另一類是給用戶看的。

1. Log

給開發者看的提示信息要調用Log類的相應方法，日志打印結果可在Android Studio界面下方的logcat小窗口查看。Log類各種方法的區別在于日志的等級，具體說明如下。

• Log.e：表示錯誤信息，比如可能導致程序崩潰的異常。
• Log.w：表示警告信息。
• Log.i：表示一般消息。
• Log.d：表示調試信息，可把程序運行時的變量值打印出來，方便跟蹤調試。
• Log.v：表示冗余信息。

若想查看App的運行日志，可單擊Android Studio底部的“Logcat”標簽，此時主界面的下方彈出一排的日志窗口，如圖2-33所示，從日志看出正在進行的運算操作是“5*9=？”。

圖2-33　Android Studio的日志查看窗口

日志窗口的頂部是一排條件篩選控件，從左到右依次為：測試機型的名稱（如“DOOV V3”）、測試App的包名（例如只顯示com.example.junior的日志）、查看日志的級別（例如只顯示級別不低于Verbose即Log.v的日志）、日志包含的字符串（例如只顯示包含CalculatorActivity的日志），還有最后一個是篩選控制選項（其中“Show only selected application”表示只顯示選中的應用日志，而“No Filters”則表示不進行任何條件過濾）。

2. Toast

給用戶看的提示信息要調用Toast類的相應方法，提示文字會在屏幕下方以一個小窗口臨時展現。對于計算器來說，有好幾種情況需要提示用戶，如“被除數不能為0”“開根號的數值不能小于0”等。

Toast的簡單用法只需一行代碼就可以了，示例代碼如下：

          Toast.makeText(MainActivity.this, "提示文字", Toast.LENGTH_SHORT).show();

Toast彈窗的展示效果如圖2-34所示，此時App發現了被除數為零的情況。

圖2-34　被除數為零的Toast彈窗提示

另外，計算器每個按鈕的展示風格基本相同，為了減少冗余代碼，可將相同的樣式定義寫在values目錄下的styles.xml文件中，然后在布局文件節點下增加style="@style/btn_cal"這樣的屬性定義。

2.5.3　代碼示例

圖2-35　簡單計算器的運行效果圖

看到這里，估計讀者對計算器App的布局和代碼框架都了然于胸了，接下來介紹一些業務邏輯判斷與基本的數學四則運算。只要設計充分并且合理，編碼就會很快。計算器App運行后的計算效果如圖2-35所示。

編碼過程主要分為3個步驟：

步驟01　先想好代碼文件與布局文件的名稱，比如代碼文件取名CalculatorActivity.java、布局文件取名activity_calculator.xml。記得在AndroidManifest.xml中注冊acitivity節點，不然App運行時會報ActivityNotFoundException異常，具體是在application節點下補充一行聲明：

          <activity android:name=".CalculatorActivity" />

步驟02　在res/layout目錄下創建布局文件activity_calculator.xml，按照簡單計算器的效果圖在里面填入各控件的布局結構，并指定相關的屬性定義。

步驟03　在項目的包名目錄下創建CalculatorActivity類，仿照MainActivity代碼在onCreate內部的setContentView方法中填入參數R.layout.activity_calculator，表示該頁面使用activity_calculator.xml中定義的界面布局。接著編寫具體的控件操作與業務代碼。

下面是計算器App進行加減乘除的代碼片段示例，完整代碼參見本書附帶源碼junior模塊的CalculatorActivity.java：