上戰場了,寫個Bmi APP吧,專案Layout與元件設計

作者 | 2017-04-03

Bmi專案功能設計

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

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

Bmi專案的MainActivity畫面應該有兩個文字輸入元件(EditText),讓使用者可以輸入體重與身高,另外要有個Button元件,供使用者按下後計算BMI指數。

Bmi畫面設計-更換版面配置

MainActivity使用的版面配置為「res/layout/activity_main.xml」,在這個畫面中會有兩個供使用者輸入的文字方塊與一個計算按鈕,適合的版面配置為LinearLayout,但自動產生的畫面中使用的是RelativeLayout,將其更改為LinearLayout的方式如下:

Step 1  開啟xml並切換至原始碼原始碼如下圖:

 

Step 2  選取RelativeLayout元素名稱,如下:

Step 3  先輸入Linear(L大寫),還未完全打完時就會出現符合的下拉選單,如下圖:

當LinearLayout出現在下拉選單中的第一個時,按下Enter鍵,或使用上下鍵移動再按下Enter,Android Studio會自動更改元素的開始與結尾為LinearLayout。

接著切換回「Design」預覽畫面,選擇LinearLayout後,設定其orientation屬性為vertical垂直排列,再將畫面所有元件先刪除,選擇元件後再按下「Delete鍵」刪除。

新增元件

在Android中,文字方塊的類別為「TextView」,在左方元件區找到「Widgets」類別,在此類別下是常用的元件,如下圖:

圖中的前四個都是文字方塊,只是字的大小不同,請點擊上圖中的「Large Text」並放到預覽圖中的版面中,結果如下圖:

連擊TextView元件可快速設定文字,也就是text屬性,輸入「Weight」代表體重,如下圖:

提示:

在此時先以英文介面設計,在下個章節介紹設計出多國語言的APP時,將會加入中文語系支援。

輸入方塊的類別名稱為「EditText」,在左方找到「Text Fields類別」,點擊「Plain Text」元件,並放到版面中以新增一個輸入方塊,如下圖:

因為未來程式需要取得使用者在此EditText內鍵入的資料,因此先為其設計id屬性為「ed_weight」,請連擊輸入方塊後,在快速屬性設定對話框中設定id值,如下圖:

接著請依序新增身高的TextView與EditText元件,並為身高的輸入方塊設定id屬性為「ed_height」,結果如下:

右上方的元件樹中的兩個EditText具有ed_weight與ed_height兩個id值,如下圖所示,:

最後在版面加入Button元件,連擊Button元件設定text屬性為「Calculate BMI」,如下圖:

最後,再多加入一個說明按鈕,能讓使用者初次使用時,顯示用法介紹,再為這個說明按鈕多設定一個id屬性為「b_help」,如下圖:

最後畫面設計完成如下圖:

在MainActivity中取得畫面元件

開啟MainActivity.java,在onCreate方法中的setContentView語法的下一行,新增以下程式碼:

Activity提供的findViewById方法,可利用先前在畫面上為元件設定的id值,取得元件,回傳的型態為View,再經過轉型後可得到元件原本樣貌(Java語言的多型應用)。畫面上的Help按鈕,也使用同樣方法取得bHelp物件。

提示:

在輸入類別名稱時,第一個字母請大寫,例如欲輸入EditText時,只需輸入「Edi」,此時自動完成的下拉選單會出現符合的類別名稱,請以上下鍵選擇「EditText(android.widget)」按下Enter鍵,這樣才會自動加入import語法,如下圖:

區域變數提昇為屬性

可是,上述的「edWeight」、「edHeight」與「bHelp」三個物件都是在onCreate方法中宣告的區域變數,在onCreate方法外是無法被存取的,應該將這三個變數提昇為類別的屬性。Android Studio提供快速鍵「Refactor」重構功能,請將游標放在edWeight區域變數上,再按下「Ctrl」+「Alt」+「F」Refactor快速鍵,出現選單後按下Enter鍵,如下圖:

按下Enter鍵後,edWeight即從區域變數提昇為類別的屬性,如下圖:

請使用同樣方法將edHeight與bHelp也提昇為屬性。

抽取程式碼成為方法

當需從一個畫面中取得很多個元件時,這些在onCreate方法中的程式碼會略顯雜亂,可設計一個方法,再將這些取得元件的程式碼移到方法中。通常我們會將方法命名為「findViews」,Android Studio提供快速鍵可將程式碼抽出成為方法,請先選取想要抽出的程式碼,如本例在onCreate方法中的的三個findViewById語法,如下圖:

再按下Extract Method抽取程式碼的快速鍵「Ctrl」+「Alt」+「M」,出現對話框後,再輸入方法的名稱「findViews」,如下圖:

最後按下Enter鍵,程式碼很快就完成原本繁複工作,如下:

 

相關文章:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *