iT邦幫忙

2024 iThome 鐵人賽

DAY 19
0

在今天的內容中,我們將結合之前學習到的 Android 開發知識,製作一個簡單的 BMI 計算器應用程式。本次實作將運用到 EditTextButtonTextView 等元件,以及頁面之間的資料傳遞與顯示。

Step 1: 建立 MainActivity 介面

image
首先,我們在 MainActivity 中設置了兩個 EditText 供用戶輸入體重和身高,還有一個 Button 來觸發 BMI 計算。我們同時設置了一個 TextView 來顯示計算結果。

public class MainActivity extends AppCompatActivity {
    private Button button;
    EditText weight_et, height_et;
    TextView result_tv;
    float kg, m, BMI;
    private Context context = this;

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

        button = findViewById(R.id.main_count_btn);
        weight_et = findViewById(R.id.main_weight_et);
        height_et = findViewById(R.id.main_hight_et);
        result_tv = findViewById(R.id.main_result_tv);
        Intent intent = new Intent(this, BMIView.class);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (isNumeric((weight_et.getText().toString()))) {
                    if (isNumeric((height_et.getText().toString()))) {
                        kg = Float.parseFloat(weight_et.getText().toString());
                        m = (Float.parseFloat(height_et.getText().toString())) / 100;
                        BMI = kg / (m * m);
                        result_tv.setText(String.valueOf(Math.round(BMI * 100.0) / 100.0));
                        intent.putExtra("BMI_EXTRA", BMI);
                        startActivity(intent);
                    }
                } else {
                    Toast.makeText(context, "輸入錯誤", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

    public static boolean isNumeric(String str) {
        boolean isNumeric;
        String regex = "^\\d.*";
        if (str == null) {
            isNumeric = false;
        } else if (str.matches(regex)) {
            isNumeric = true;
        } else {
            isNumeric = false;
        }

        return isNumeric;
    }
}

主要步驟:

  1. 透過 findViewById 初始化所有的 UI 元件,包含 EditTextTextViewButton
  2. 設置按鈕的點擊事件監聽器,來觸發 BMI 計算邏輯。
  3. 檢查用戶輸入是否為數字,若正確則計算 BMI,並將結果顯示在 TextView 中,且將 BMI 值傳遞到下一個頁面。

Step 2: 跳轉到 BMIView 顯示 BMI 結果

接著,我們需要一個新的 Activity 來顯示計算出來的 BMI 值。在這個例子中,我們使用 Intent 來傳遞計算結果到 BMIView 這個新的 Activity,並在這裡顯示結果。

public class BMIView extends AppCompatActivity {
    TextView BMIView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bmiview);
        Intent intent = getIntent();
        float bmi = intent.getFloatExtra("BMI_EXTRA", 0);
        BMIView = findViewById(R.id.BMI_tv);

        BMIView.setText("您的BMI是 :" + (Math.round(bmi * 100.0) / 100.0));
    }
}

主要步驟:

使用 getIntent() 來取得從 MainActivity 傳遞過來的 BMI 資料。
使用 findViewById 找到我們的 TextView,然後設置文字顯示計算出的 BMI 值。

透過 Intent 傳遞資料

在這個應用中,Intent 是我們將資料從一個 Activity 傳遞到另一個 Activity 的關鍵。透過 intent.putExtra("BMI_EXTRA", BMI); 我們可以將計算出的 BMI 值傳遞到 BMIView Activity,然後使用 getFloatExtra 來取得這個值,並顯示在新頁面中。

Step 3: 計算 BMI 的邏輯

這裡的 BMI 計算非常簡單,我們只需取得用戶輸入的體重(公斤)和身高(公分),然後利用公式 BMI = kg / (m * m) 來計算 BMI。值得注意的是,我們將身高從公分轉換為公尺,以符合 BMI 計算公式的需求。

Step 4: 輸入檢查

在計算之前,我們使用了 isNumeric 這個方法來確保輸入的是數字,這是一個非常實用的正規表示法應用,能夠提高我們應用的健壯性,避免因用戶錯誤輸入而導致應用崩潰。

public static boolean isNumeric(String str) {
    boolean isNumeric;
    String regex = "^\\d.*";
    if (str == null) {
        isNumeric = false;
    } else if (str.matches(regex)) {
        isNumeric = true;
    } else {
        isNumeric = false;
    }

    return isNumeric;
}

結論

這次我們實作了一個簡單的 BMI 計算器,學習到了如何使用 EditText 來取得用戶輸入,如何使用 IntentActivity 之間傳遞資料,以及如何運用 TextView 來顯示結果。此外,我們也學習了如何在應用中使用正規表示法來檢查輸入是否為數字。這樣的實作可以讓我們對 Android 開發有更深入的理解,也為日後開發更複雜的應用程式打下基礎。


上一篇
# DAY18 深入探討正規表示法(Regular Expressions)
下一篇
# DAY20 LinearLayout 基本介紹
系列文
「淺入 Android Studio 開發環境」—— 工具與插件的高效使用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言