第4章: 實作簡單的計算機App

介面設計

本章與第1章計算機最大的差異即是使用Designer設計，實作一個簡單的計算機應用程式，並透過此專案來學習如何設計介面、實作程式邏輯以及處理基本的事件。首先，我們需要設計應用程式的介面，使其能夠接受用戶輸入並顯示運算結果。
這個計算機應用程式的基本介面將包括以下元件：
• 兩個輸入框 (EditText)：用於輸入兩個數字。
• 四個按鈕 (Button)：分別對應加法、減法、乘法和除法運算。
• 一個標籤 (Label)：用於顯示運算結果。
我們將使用 B4A 的 Designer 工具來設計這個簡單的介面。介面的佈局非常直觀，所有元件都會整齊排列在屏幕中央，以便於用戶操作。
設計步驟：
1. 創建新佈局：打開 Designer，創建一個名為 "CalculatorLayout" 的新佈局。
2. 添加元件：
◦ 添加兩個 EditText 元件作為數字輸入框，分別命名為 edtNumber1 和 edtNumber2。
◦ 添加四個 Button 元件，分別命名為 btnAdd、btnSubtract、btnMultiply 和 btnDivide。
◦ 添加一個 Label 元件，命名為 lblResult，用於顯示結果。
3. 調整屬性：
◦ 設定每個 Button 的 Text 屬性分別為 "+"、"-"、"*" 和 "÷"。
◦ 將 Label 的初始 Text 設為空，等待程式運行時顯示運算結果。
4. 保存佈局：完成設計後，保存佈局檔案。

邏輯實作

接下來，我們需要為這個計算機應用程式編寫邏輯。邏輯部分負責接收用戶輸入的數字，根據按下的按鈕執行相應的數學運算，並將結果顯示在標籤中。
邏輯實作步驟：
1. 初始化變數：
◦ 定義兩個變數，用於存儲用戶輸入的數字。
◦ 定義一個變數，用於存儲運算結果。
2. 取得用戶輸入：
◦ 使用 EditText.Text 屬性取得用戶輸入的值，並將其轉換為整數或浮點數，以便進行數學運算。
3. 運算邏輯：
◦ 根據用戶按下的按鈕，執行相應的加法、減法、乘法或除法運算。
◦ 將結果存儲在結果變數中。
4. 顯示結果：
◦ 使用 Label.Text 屬性將運算結果顯示在標籤上。

簡單的事件處理

在計算機應用程式中，按鈕的點擊事件是觸發運算邏輯的關鍵。我們需要處理這些事件，確保當用戶按下某個按鈕時，應用程式能夠執行對應的運算並顯示結果。
事件處理步驟：
1. 定義按鈕點擊事件：
◦ 為每個按鈕分別定義點擊事件處理程序。例如，當用戶點擊 btnAdd 時，應該執行加法運算。
2. 在事件處理程序中調用邏輯：
◦ 每個事件處理程序中，首先取得用戶輸入的數字，然後調用對應的運算邏輯，最後將結果顯示在標籤上。
3. 錯誤處理：
◦ 處理用戶輸入錯誤或除以零的情況，確保應用程式不會崩潰，並顯示友好的錯誤訊息。

範例程式

以下是一個完整的範例程式，展示了如何實作這個簡單的計算機應用程式。該程式包括介面設計、邏輯實作以及事件處理的部分。
basic程式碼範例

Sub Process_Globals
    ' 全域變數宣告
End Sub

Sub Globals
    ' 活動(Activity)變數宣告
    Private edtNumber1 As EditText
    Private edtNumber2 As EditText
    Private lblResult As Label
    Private btnAdd As Button
    Private btnSubtract As Button
    Private btnMultiply As Button
    Private btnDivide As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    ' 加載設計的佈局
    Activity.LoadLayout("CalculatorLayout")
    
    ' 初始化UI元件
    edtNumber1 = Activity.GetView(0)
    edtNumber2 = Activity.GetView(1)
    btnAdd = Activity.GetView(2)
    btnSubtract = Activity.GetView(3)
    btnMultiply = Activity.GetView(4)
    btnDivide = Activity.GetView(5)
    lblResult = Activity.GetView(6)
    
    ' 設定初始結果為空
    lblResult.Text = ""
End Sub

Sub btnAdd_Click
    PerformCalculation("+")
End Sub

Sub btnSubtract_Click
    PerformCalculation("-")
End Sub

Sub btnMultiply_Click
    PerformCalculation("*")
End Sub

Sub btnDivide_Click
    PerformCalculation("÷")
End Sub

Sub PerformCalculation(Operation As String)
    Dim num1 As Double = edtNumber1.Text
    Dim num2 As Double = edtNumber2.Text
    Dim result As Double
    
    Select Operation
        Case "+"
            result = num1 + num2
        Case "-"
            result = num1 - num2
        Case "*"
            result = num1 * num2
        Case "÷"
            If num2 = 0 Then
                lblResult.Text = "不能除以零"
                lblResult.TextColor = Colors.Red
                Return
            Else
                result = num2
            End If
    End Select
    
    lblResult.Text = "結果: " & result
    lblResult.TextColor = Colors.Black
End Sub

範例解說
• PerformCalculation：這個子程序根據傳入的運算符號進行對應的數學運算。該程序能夠處理加法、減法、乘法和除法的運算，並且對於除法還加入了除以零的錯誤處理。
• 點擊事件處理程序：每個按鈕的點擊事件處理程序都調用 PerformCalculation，並將對應的運算符號傳入，觸發相應的運算。
• 錯誤處理：特別是在除法運算中，我們處理了除以零的情況，避免應用程式崩潰並顯示錯誤訊息。
這個簡單的計算機應用程式展示了如何將介面設計、邏輯實作和事件處理結合起來，創建一個實用的行動應用程式。這樣的基礎專案可以作為進一步學習和擴展的基石，幫助你更深入理解行動應用程式開發的各個方面。
參考網址
https://www.b4x.com/guides/B4XVisualDesigner.html