Day7- 第一階段挑戰：數字大小比較 App

2025 iThome 鐵人賽

DAY 7

Mobile Development

Android 開發者養成計畫：從程式邏輯到作品集實戰系列第 7 篇

17th鐵人賽

__zoe

團隊nutc imac

2025-09-21 00:04:53

18 瀏覽

分享至

來到鐵人賽的第七天，今天是第一階段的總結。

前六天，我們學會了各種基本的 App 零件，包括：

TextView：顯示文字
Button：觸發事件
EditText：接收使用者輸入
ImageView：顯示圖片
SeekBar 和 CheckBox：更精細的互動控制

今天，我們要將這些零散的知識串聯起來，做一個有實際功能的 App。這個 App 的邏輯，就是程式解題中最基礎的一類題目：數字大小比較。

程式解題：數字大小比較

題目說明：
- 建立一個 App 介面，包含兩個輸入框，讓使用者輸入兩個整數。
- 點擊「比較」按鈕後，App 判斷兩個數字的大小。
- 在畫面上顯示結果，結果可能是以下三種之一：「第一個數字比較大」、「第二個數字比較大」或「兩個數字一樣大」。

實作時間：打造你的「數字比較 App」

修改 activity_main.xml

打開你的「設計圖」檔案 activity_main.xml。
我們需要三個元件來完成這個 App：
1. 兩個 EditText：用來讓使用者輸入數字。給它們一個 ID，例如 firstNumberInput 和 secondNumberInput。別忘了設定 inputType="number"，這樣鍵盤只會顯示數字。
2. 一個 Button：用來觸發比較運算。ID 設為 compareButton，文字設為「比較大小」。
3. 一個 TextView：用來顯示比較結果。ID 設為 resultTextView，文字可以先設定為「點擊按鈕進行比較」。
運用你學到的佈局知識，把這些元件排得整齊一點。

你的 XML 程式碼，可能會像這樣：

<androidx.constraintlayout.widget.ConstraintLayout ...>

    <EditText
        android:id="@+id/firstNumberInput"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:hint="輸入第一個數字"
        ... />

    <EditText
        android:id="@+id/secondNumberInput"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:hint="輸入第二個數字"
        ... />

    <Button
        android:id="@+id/compareButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="比較大小"
        ... />

    <TextView
        android:id="@+id/resultTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="點擊按鈕進行比較"
        ... />

</androidx.constraintlayout.widget.ConstraintLayout>

修改 MainActivity.java

打開你的「操作說明書」檔案 MainActivity.java。
我們要告訴 App，當使用者點擊按鈕時，執行以下動作：
1. 找到所有元件。
2. 從兩個 EditText 中，讀取使用者輸入的文字。
3. 將讀取到的文字，轉換成數字。
4. 使用 if/else 條件判斷，比較這兩個數字的大小。
5. 根據判斷結果，將不同的文字設定到 TextView 上。

以下是完整的程式碼範例：

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast; // 用來顯示錯誤訊息

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 1. 找到所有元件
        EditText firstNumberInput = findViewById(R.id.firstNumberInput);
        EditText secondNumberInput = findViewById(R.id.secondNumberInput);
        Button compareButton = findViewById(R.id.compareButton);
        TextView resultTextView = findViewById(R.id.resultTextView);

        // 2. 告訴按鈕，當有人點擊它時要做什麼事
        compareButton.setOnClickListener(v -> {
            // 3. 讀取輸入的文字
            String firstNumStr = firstNumberInput.getText().toString();
            String secondNumStr = secondNumberInput.getText().toString();

            // 4. 檢查是否有輸入，避免 App 崩潰
            if (firstNumStr.isEmpty() || secondNumStr.isEmpty()) {
                Toast.makeText(this, "請輸入兩個數字！", Toast.LENGTH_SHORT).show();
                return; // 結束後續操作
            }

            // 5. 將文字轉換成數字
            int firstNum = Integer.parseInt(firstNumStr);
            int secondNum = Integer.parseInt(secondNumStr);

            // 6. 使用 if/else 條件判斷
            String resultMessage;
            if (firstNum > secondNum) {
                resultMessage = "第一個數字比較大";
            } else if (secondNum > firstNum) {
                resultMessage = "第二個數字比較大";
            } else {
                resultMessage = "兩個數字一樣大";
            }

            // 7. 將結果顯示在 TextView 上
            resultTextView.setText(resultMessage);
        });
    }
}

程式碼解釋：