【Android】撰寫第一支APP 計算BMI值 從1到2 (Android Studio)

前言

如果還沒安裝好Android模擬器可參考【Android Studio安裝教學】【Eclipse安裝教學】,雖然這邊提供兩個IDE安裝方法,但還是建議大家安裝Android Studio。

對於第一次開發Android的初學者來說,我覺得直接做一個簡單專案最有效果,以下教學不一定要全部都懂,只要知道畫面如何製作,程式要寫在哪邊這樣就夠了。 

1.設計BMI值手機介面

所有手機畫面都會放在 Android Project → res →  layout底下,每個XML都代表一個介面。

首先到Android Project → res → layout 點選 activity_main.xml(名稱依據建立Project時命名為主),找到Palette視窗裡面提供很多設計畫面所需要的原件,找到需求元件後拖拉到右方手機畫面即可。

PS.預設IDE介面是白色,如果想要修改IDE樣式可另外Google,網路上很多參考教學。

Android Studio-1

我們有兩種方法來設計介面

  1. 把元件拉到中間手機介面
  2. 把元件拉到下方Component Tree

如何設計手機畫面依照個人習慣沒有絕對,但以下教學請用方法2來做會比較簡單

  1. 刪除預設的TextView元件
  2. 拉一個LinearLayout(vertical) 到 Component Tree
  3. 再拉五個LinearLayout(horizontal) 到 步驟2的LinearLayout(vertical) 裡面
  4. 選取步驟4的這五個LinearLayout(horizontal),找到右方屬性(Properties)的android:layout_height把他改為wrap_content

Android Studio-2


使用TextView元件,負責顯示文字給使用者瀏覽

  1. 拉4個TextView分別放到1.2.4.5的LinearLayout(horizontal)裡面
  2. 修改這四個TextView屬性,由上到下分別為(ID/Text):
    • tv1/身高:
    • tv2/體重:
    • tv3/結果:
    • tv4/診斷

Android Studio-4

Android Studio-5

 接著再拉兩個EditText提供使用者輸入資料,裡面提供很多input的類型,因為身高、體重只會輸入字數所以就拉Number的EditText就好
  1. 拉兩個EditText(Number)到1.2的LinearLayout(horizontal)
  2. 修改這兩個EditText的屬性ID分別為et1、et2
Android Studio-6

如果有照上面步驟操作,你會發現第3個LinearLayout都沒有放入任何元件,別擔心馬上就會用到了。
接著拉一個按鈕(Button)到3的LinearLayout(horizontal)把它的Text改為「送出」
Android Studio-7

如果想查看activity_main.xml原始碼,可點選設計畫面的下方Text。上面步驟有地方不確定的話,把下面附的程式碼貼到你的原始碼裡面,先讓整個專案能正常執行再回看重新操作練習

Android Studio-8

2.撰寫BMI值功能

我們進入到Android Project→java 底下點選*.java檔開始撰寫程式

Android Studio-9
程式碼如下:

3.基本錯誤排除

Android Studio-10
我們在寫程式時最常遇見的兩種錯誤
  1. 沒有匯入相關類別,可以試著把滑鼠移到錯誤程式碼(紅字)上,按下Alt+Enter如果有跳出Import clas選項的話,那就是沒有匯入相關類別,點選後就能解決。
  2.  程式語法有錯誤,需要自行檢查程式碼,例如沒有宣告
    Android Studio-11

4.執行結果畫面

Android Studio-12
Exp Up
Intent + Bundle 切換Activity並傳值 從2到3
 – 介面換頁並傳值

6 thoughts on “【Android】撰寫第一支APP 計算BMI值 從1到2 (Android Studio)

    1. 當你在 java 中加入程式時,系統就會自動配建一個介面,也就是 Layout,這時 R 就自動建立,java 的程式內就自動產生 你問的這一行,是自動產生不需要宣告的
      另外 R , @ 在 Android Studio 中都是一種 專門用來指向的用語

    2. 如同真丫頭 所說R底下的宣告是系統自動產生,可能你的res\layout沒有activity_main這個XML檔案

發表迴響