上一篇後，應該了解 Android Studio 的版面代表的是什麼意思，對於建立新的專案應該也沒有問題了，接下來會介紹一些元件，再用這些元件來做一個 User 輸入身高體重然後計算出 BMI 的 APP。

ConstraintLayou: 約束布局

在 ConstraintLayout 裡，所有元件可以設置上下左右四個方位的相關元件與距離，且至少需設置兩點(不能為上下 or 左右)這樣的好處請參考下圖。

這樣的移動只要移動物件 A 就好，因為物件 B 有設置與物件 A 的關聯，所以移動物件 A 時，物件 B 會依照我們設置的關聯自動去對照物件 A 的位置。

TextView: 不知道中文怎麼翻....文字檢視器(?!
就像字面上說的，是用來顯示一段 Text 的 View，與下一個 EditText 差異是 TextView 不讓 User 輸入。
android:text TextView 顯示的文字。
 android:textSize TextView 顯示文字的大小。
 android:color TextView 顯示文字的顏色。
 android:textStyle TextView 顯示文字的樣式，有粗體、斜體可選。

EditText: 一樣不知道怎麼翻....編輯文字器(?!
這個就是專門讓 User 輸入文字的。以下屬性因 EditText 繼承自 TextView ，故重複屬性就不在贅述。
android:text EditText 顯示的文字，但通常不太使用，因為 EditText 就是讓 User 輸入的，不應該有預設值。 
 android:hint 我們在使用手機時在輸入欄會有灰色文字，當我們點擊準備輸入文字時該灰色文字會消失，該灰色文字便是這屬性。
 android:inputType 選擇該欄限定要什麼資訊，可以選擇限定數字，也會影響手機虛擬鍵盤跳出時的預設鍵盤應該為數字或是文字。

Button: 按鍵，也是給使用者操作的物件，通常會寫個監聽方法，等 User 按下按鍵後執行。

首先從 Layout 開始，可以試著自己做做看，總共是三個 TextView、兩個 EditText、一個 Button。

Constraint 可以自己擺放在喜歡的位置上，這相較於 LinearLayout 自由多了( LinearLayout 之後看有沒有機會提到)，畫面上任何位置都可以讓你自由擺放。

EditText 則記得將屬性 android:text 改掉，由 android:hint 來顯示較為直觀。

以下附上 xml 程式碼供對照。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <TextView
            android:text="身高:"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView" app:layout_constraintStart_toStartOf="parent" android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="24dp"
            android:textSize="17sp"/>
    <TextView
            android:text="體重:"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView2" app:layout_constraintStart_toStartOf="@+id/textView"
            android:layout_marginTop="24dp"
            app:layout_constraintTop_toBottomOf="@+id/textView" android:textSize="17sp"/>
    <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="number|numberDecimal"
            android:ems="10"
            android:id="@+id/ed_height"
            app:layout_constraintStart_toEndOf="@+id/textView" android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            app:layout_constraintTop_toTopOf="@+id/textView" app:layout_constraintBottom_toBottomOf="@+id/textView"
            android:hint="請輸入身高"/>
    <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="numberDecimal"
            android:ems="10"
            android:id="@+id/ed_weight"
            app:layout_constraintStart_toEndOf="@+id/textView2" android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            app:layout_constraintTop_toTopOf="@+id/textView2" app:layout_constraintBottom_toBottomOf="@+id/textView2"
            android:hint="請輸入體重"/>
    <Button
            android:text="計算"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn_cal" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp" android:layout_marginTop="16dp"
            app:layout_constraintTop_toBottomOf="@+id/ed_weight"/>
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_result" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/btn_cal" app:layout_constraintStart_toStartOf="@+id/textView2"
            android:textSize="17sp"/>
</android.support.constraint.ConstraintLayout>

btn_cal.setOnClickListener {
  val BMI = ed_weight.text.toString().toDouble() / Math.pow(ed_height.text.toString().toDouble() / 100, 2.0)
  val decimalFormat = DecimalFormat("##0.00")
  tv_result.text = "您的BMI為: ${decimalFormat.format(BMI)}"
}

btn_cal.setOnClickListener 設置 Button 監聽器，在點擊 Button 後所要執行的程式碼寫在底下。

宣告一變數 BMI ，這邊就是直接拿 User 輸入的資訊來計算 BMI 。

 Math.pow(a,b) 方法為次方，這樣寫會拿到 a的b次方 ，可以依照需求調整 a、b 。

DecimalFormat("##0.00") ，是可以將浮點數取到特定位小數點，像這樣的寫法是取到小數點第二位，以此類推要取到小數點第三位就寫成 DecimalFormat("##0.000") 。

最後就是將算出來的結果輸出到 tv_result 囉!