[Android教學]製作一個BMI程式

上一集:[Android教學]使用Android Studio製作第一個APP

新建專案

首先先新建一個空白專案叫【MyBMI】,SDK選擇你要的安卓版本(我是都選7.0),看個人需求,練習用的話7.0就可以了。

專案創建完成後,你可以在左邊目錄看到兩個檔案,一個是java>com.example.mybmi>MainActivity.java 另一個是res>layout>activity_main.xml

這邊必須先提到一個知識點↓

Android把程式設計分為兩部分: 1.程式視覺設計(用XML描述) 2.程式碼的撰寫(使用JAVA程式語言),所以MainActivity.java為程式邏輯部分;activity_main.xml為使用者介面(UI)部分。

Android專案結構及基本程式邏輯

Android專案的構成

在開始實作之前先補充一下之前沒說過的。

在Android Studio左側的Project窗格會以樹狀結構列出專案資料夾中的檔案,但是因為專案內的檔案太多,所以Project窗格特別提供多種檢視方式,期他不常用的檔案會隱藏起來。

你可以點選左側Project窗格,上方點開下拉選單調整到Android模式

Android檢視模式下樹狀結構的最上層分為app及Gradle兩大類:

  • app:包含各種可用來產生APP的檔案。
  • Gradle Scripts:包含所有與組建(Build)APP有關的各種Gradle檔。

*組建(Build) = 將專案中各類原始檔編譯並產生APP執行檔的過程

Android 基礎開發課程
  • manifests:存放AndroidManifesy.xml檔,此檔是開發APP時必須使用的檔案,我們可將它視為APP的設定檔,舉凡程式的名稱、設定、權限以及程式啟動時要執行哪一個活動…等都是在這個檔案中設定。
  • java:存放java程式檔,並且還會依照套件名稱來分類顯示,例如APP的主程式MainActivity.java檔是放在套件名稱com.example.mybmi下。
  • res:存放各類資源檔。例如drawable(圖形)、layout(布局)、values(各種設定值)…等。

設計BMI程式布局

下面就是Android Studio布局設計的介面,左方都是已經設計好的視覺元件,可以直接用滑鼠拖移到中間編輯區,右側則是屬性設定區。

從元件處拉一個TextView擺在程式中間處,可以直接雙擊或在右邊屬性處text修改文字內容為【我的BMI程式】;然後再拉兩個TextView分別修改文字內容為【身高】【體重】,以及兩個Number和一個Button。

修改好後點右上方的綠色三角形圖示啟動APP(Shift+F10)來測試一下

你會發現文字和輸入框全部元件擠在一起,這是為什麼呢?

回到編輯頁面,左下方元件樹每個元件右邊都有一個紅色驚嘆號,這是Android Studio在提醒你元件有出錯,移上去看它會告訴你:This view is not constrained. 也就是說這幾個元件並沒有被”約束”,所以會跑到(0,0)的位置,你必須約束它們。

你可以在上方找到一個 魔術棒 的圖示直接自動約束所有物件,但這並不是最優解,有時候會有偏差。

你也可以選中物件後在右側Constraint Widget處點 藍色+號 來約束該物件。

其他更多關於約束的方法和說明可以參考:Android入門教程:ConstraintLayout約束佈局

都設定完畢後程式顯示如下圖↓

但現在只是一個空殼而已,下一步我們需要真正去實現程式的功能。

撰寫BMI程式

打開MainActivity.java,在onCreate最下方加上下方兩句程式碼:

:View是Android定義的視窗基本類別,所有的視覺元件都繼承自此類別。findViewById()就是針對此基本類別的方法,因此View是基本類別,所以繼承它的類別都能find,就不需要有findButtonById或者findTextViewById了。只不過它會把找到的物件都當作是View物件傳回,所以我們必須強制轉型為Button或者TextView等子類別的物件後才能使用。

calcBMI方法

接着是方法calcBMI的部分,有點多,逐行解釋吧

這段程式碼為onClick事件的實現方式,這邊就不細說了,可以自行搜索相關文章學習(【APP/Android】onClick事件的5種實現方式

DecimalFormat 是用於調整數字格式,java.text提供了NumberFormat類別來讓我們更方便的格式化數字的呈現方式,所以這一行程式碼代表設定數值呈現格式為到小數後兩位(不夠補0)。

之所以用到這個是因為計算出來的BMI值會有小數,我們希望精準計算到小數後兩位就可以使用這個方法。

在程式中取得editText及editText2兩個元件:

設定result為以nf設定格式(到小數後兩位)顯示的BMI值:

自動匯入所需套件

寫程式時時常因為沒有匯入相關套件而出現錯誤,一個個去import也很麻煩,為了能更方便可以設定Android Studio替你自動import。

File -> Settings

Editor -> General -> Auto Import 將Inset imports on paster改為All,其他按照個人需求設定。

程式截圖

strings.xml

在這之前,我們都把文字內容直接寫在activity_main.xml裡(身高、體重…),但對於Android設計來說這並不是個好的設計,通常都會將字串獨立出來放在res>values>strings.xml裡面

接著我們就開始將字串抽離出來放到strings.xml,name可以自己取。

回到activity_main.xml 切換成Code模式,在身高體重的TextView區塊找到android:text=” “,將@string/bmi_height @string/bmi_weight填入;以同樣方式將歡迎文字TextView改為@string/bmi_hello;按鈕改為@string/bmi_btn

顯示結果如下:

完整程式碼

activity_main.xml

strings.xml

MainActivity.java

最後更新時間:

相關文章

發表留言