04/22 Android教學

Android 專案介紹

建立專案

1. Create New Project
   

2. Template 選擇 Empty Activity
   

3. 命名為 BMI calculator, 語言選擇 kotlin
   

注意

Minimum SDK 表示最低兼容版本 選擇的版本如果太新, 則app很有可能無法在其他裝置上運行！！

4. 那就開始我們的kotlin吧～～
   

---

組織方式

通常以Android專案方式瀏覽專案

專案結構

• manifest : 存放Android APP 的主要程式檔
• java : 存放專案主要的kotlin程式碼
• res : 存放專案不是程式碼的資源檔案, 例如：使用者UI(Layout)、圖片、文字等等。

AndroidManifest.xml

每個Android APP 都會有此檔案, 存放APP的基本資訊(icon、label等)、有哪些 Activity、 Service、 需要用到的權限等等。

MainActivity.kt

寫 UI 的 Android APP 一開始會執行的地方, 一開始只有 onCreate() 方法, 載入對應的 Layout。

專案程式碼 也就是主要戰場
寫 UI 的 Android APP 一開始會執行的地方，一開始只有 onCreate() 方法，載入對應的 Layout。

package com.example.bmicalculator

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main) //這邊載入了 activity_main 的 Layout
    }
}

lifecycle

1. 當Activity準備要產生時，先呼叫onCreate方法。
2. Activity產生後（還未出現在手機螢幕上），呼叫onStart方法。
3. 當Activity出現手機上後，呼叫onResume方法。
4. 當使用者按下返回鍵結束Activity時， 先呼叫onPause方法。
5. 當Activity從螢幕上消失時，呼叫onStop方法。
6. 最後完全結束Activity之前，呼叫onDestroy方法。

官方參考

activity_main.xml

MainActivity 的介面 Layout 檔案, 可透過圖形化介面編輯器或是直接編輯 XML 方式操作。

1. 調色盤：可拉取需要的元件到 UI 上。
2. 元件樹：顯示元件之間的結構。
3. 設計編輯器：分別在設計(左)和藍圖(右)視角編輯 Layout。前者為App在裝置上面的呈現, 後者為編輯界面。
4. 屬性：可以修改、查看你選擇的元件的屬性。
5. 觀看模式：可切換使用圖形化介面或 XML 編輯等。

---

BMI 計算器實作

版面配置

切換至 activity_main.xml，並使用 XML 編輯模式。

參考範例

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/input_height"

        android:layout_width="172dp"
        android:layout_height="54dp"
        android:layout_marginStart="176dp"
        android:layout_marginLeft="176dp"
        android:layout_marginTop="96dp"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/Weight"
        android:layout_width="94dp"
        android:layout_height="43dp"
        android:layout_marginStart="56dp"
        android:layout_marginLeft="56dp"
        android:layout_marginTop="260dp"
        android:clickable="false"
        android:text="Weight:"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textIsSelectable="false"
        android:textSize="24sp"
        app:autoSizeTextType="uniform"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/Height"
        android:layout_width="94dp"
        android:layout_height="43dp"
        android:layout_marginStart="56dp"
        android:layout_marginLeft="56dp"
        android:layout_marginTop="104dp"
        android:clickable="false"
        android:text="Height:"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:textSize="24sp"
        app:autoSizeTextType="uniform"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <EditText
        android:id="@+id/input_weight"
        android:layout_width="172dp"
        android:layout_height="54dp"
        android:layout_marginStart="176dp"
        android:layout_marginLeft="176dp"
        android:layout_marginTop="244dp"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Layout

• LinearLayout：以縱向或橫向呈現。
• RelativeLayout：以相對位置呈現。
• ConstraintLayout：RelativeLayout 的延伸，透過物件自已本身與其它物件之間的約束來決定它的位置。

margin

• android:layout_margin：本元件離上下左右各元件的外邊距。
• android:layout_marginStart：本元件離開始的位置的外邊距。
• android:layout_marginEnd：本元件離結束位置的外邊距。
• android:layout_marginBottom：本元件離下部元件的外邊距。
• android:layout_marginTop：本元件離上部元件的外邊距。
• android:layout_marginLeft：本元件離左部元件的外邊距。
• android:layout_marginRight：本元件離右部元件的外邊距。

當然也可以自己拉拉看版面～～

id、位置、長寬、字體大小一樣可以從 attribute 裡面直接更改喔～

注意

每一個元件的 attribute 欄位裡面都可以填寫 id 名稱, 為了之後寫程式方便請盡量將他們改成直觀一點的名字！！

使用 findViewById

1. 在 layout 中新增 button android:id="@+id/btn。id 的格式為 @+id/你想取的名字。
   android:text="calculate"為按鈕上面的字樣。

 <Button
        android:id="@+id/btn"
        android:layout_width="130dp"
        android:layout_height="54dp"
        android:layout_marginStart="152dp"
        android:layout_marginLeft="152dp"
        android:layout_marginTop="356dp"
        android:text="calculate"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

模擬器呈現：

2. 在 MainActivity.kt 中對按鈕進行綁定及操作。
   在setContentView(R.layout.activity_main)下方加入：

val cal = findViewById<Button>(R.id.btn)

新增點擊事件

BMI 計算器在壓下按鈕的那一刻需要達成：

1. 抓取使用者輸入的身高體重
2. 計算出bmi
3. 顯示 (Toast) 計算結果

在 MainActivity.kt 中對按鈕設定OnClickListener，並使用 Toast 顯示訊息, 格式為：
button的id名稱.setOnClickListener{ }

參考範例

package com.example.bmicalculator

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val cal = findViewById<Button>(R.id.btn)

        cal.setOnClickListener{

            val w = findViewById<EditText>(R.id.input_weight).text.toString().toFloat()
            var h = findViewById<EditText>(R.id.input_height).text.toString().toFloat()
            h /= 100
            val bmi = w / (h * h)
            Toast.makeText(this, bmi.toString(), Toast.LENGTH_LONG).show()
        }


    }
}

抓取textview 裡面輸入的數值並將其轉為浮點數.toFloat()

變數型態：

• val:表示不可以更動的值
• var:可以更動的數值

val w = findViewById<EditText>(R.id.input_weight).text.toString().toFloat()
var h = findViewById<EditText>(R.id.input_height).text.toString().toFloat()

將計算結果呈現在ＵＩ上

• Toast.LENGTH_LONG 跳出結果後呈現較長時間
• Toast.LENGTH_SHORT 跳出結果後呈現較短時間

Toast.makeText(this, bmi.toString(), Toast.LENGTH_LONG).show()

成果展示(模擬器）

---

將 APP 在手機上驅動

1. 將手機用傳輸線連線到電腦 廢話
2. 打開 設定->關於手機->按下版本號碼(他要你點幾次就點幾次)
3. 確認更改為開發者模式之後再一次進入設定->系統->開發人員選項->開啟ＵＳＢ偵錯
4. 選擇自己的手機後 再一次執行程式
5. 可以結束ㄌ