6.1 Bmi 專案功能設計

現在終於要實作計算 BMI 值的應用程式了,一個人的 BMI 指數的計算公式為:

BMI指數=體重(kg/身高(m2BMI 指數 = 體重(kg)/ 身高(m)2

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」,最後畫面設計完成如下圖:

完成後的畫面的元件樹如下圖:

Last updated