6.1 Bmi 專案功能設計
Last updated
Last updated
現在終於要實作計算 BMI 值的應用程式了，一個人的 BMI 指數的計算公式為：
Bmi 專案的 MainActivity 畫面應該有兩個文字輸入元件 (EditText)，讓使用者可以輸入體重與身高，另外要有個 Button 元件，供使用者按下後計算 BMI 指數。
MainActivity 使用的版面配置為「res/layout/activity_main.xml」，在這個畫面中會有兩個供使用者輸入的文字方塊與一個計算按鈕，以預設的 ConstraintLayout 設計它。請點選原來顯示 Hello world 的元件後，按下 Delete 鍵刪除。
在 Android 中，文字方塊的類別為「TextView」，在左方元件區找到 「Text」分類中的「TextView」，TextView在此類別下是常用的元件，將它拉到畫面中，如下圖：
接下來請為 TextView 元件設定兩個約束 (Constraints)，上方連結到畫面上緣，左方連結到畫面左邊，，若在前一步驟放開時有顯示提示虛線時，有些約束值會自動設定，如下圖：
預設的兩個約束值的邊界值都是 16 點，如下圖 ( 屬性區 )：
在屬性區找到 text 屬性，設定它的文字，請輸入 Weight，如下圖：
在此時先以英文介面設計，在下個章節介紹設計出多國語言的APP時， 將會加入中文語系支援。
最後在屬性區內再找到 textAppearance，選擇 AppCompat.Large，加大文字方塊的字型，如下圖 ：
最後完成的 TextView 預覽圖如下：
接下來加入一個輸入方塊，輸入方塊的類別名稱為「EditText」，在左方找到「Text 分類」，點擊「Numberic(Decimal)」輸入數值元件，並放到版面中以新增一個輸入方塊，如下圖：
在這個分類大都是 EditText 輸入方塊，只是根據它輸入內容不同而有那麼多個選擇。
請為元件建立上方與左邊的約束，可以將約束設在前一個已完成 TextView 的下方與左邊，如下圖：
完成後預覽如下：
因為未來程式需要取得使用者在此 EditText 內鍵入的資料，因此先為其設計 id 屬性為「ed_weight」，請在屬性區中最上面 id 值，如下圖：
上圖的左邊邊界距離，也改為 0，目的是讓這兩個元件的左邊對齊一致。
接著請依序新增身高的 TextView 與 EditText 元件，並為身高的輸入方塊設定 id 屬性為「ed_height」，結果如下：
右上方的元件樹中的兩個 EditText 具有 ed_weight 與 ed_height 兩個 id 值，如下圖所示：
最後在版面加入 Button 元 件， 連 擊 Button 元件設定 text 屬性為 「Calculate BMI」，如下圖：
最後，再多加入一個說明按鈕，能讓使用者初次使用時，顯示用法介紹， 再為這個說明按鈕多設定一個 id 屬性為「b_help」，最後畫面設計完成如下圖：
完成後的畫面的元件樹如下圖：
