Kotlin Android 高效入門
線上課程
  • Kotlin Android 高效入門
  • Android 開發準備
    • 0 Git 版本控制系統
      • 0.1 Gitlab 網站
      • 0.2 Gitlab 範例專案
      • 0.3 Gitlab 取得本書範例
      • 0.4 版本切換
    • 1 Android 系統與應用程式
      • 1.1 Android 版本演進
      • 1.2 Android 系統架構
      • 1.3 應用程式基礎
      • 1.4 應用程式元件
      • 1.5 應用程式宣告檔
      • 1.6 Android Studio 開發環境
    • 2 開發環境安裝
      • 2.1 基礎環境-JDK
      • 2.2 整合開發工具-Android Studio
      • 2.3 必要的設定
  • Android 專案開發
    • 3 Android 專案架構與 Activity
      • 3.1 建立Bmi專案
      • 3.2 AndroidManifest.xml載運清單
      • 3.3 畫面配置-Layout
      • 3.4 Java/Kotlin 類別
      • 3.5 資源 Resources
      • 3.6 Android Support Library-支援函式庫
    • 4 版面配置環境
      • 4.1 版面配置設計畫面
      • 4.2 ConstraintLayout 版面配置
      • 4.3 LinearLayout 流水式版面
      • 4.4 元件的高度與寬度
      • 4.5 元件位置與距離
    • 5 Kotlin 語言基礎
      • 5.1 Kotlin 基礎知識
      • 5.2 類別與物件
    • 6 Activity 設計
      • 6.1 Bmi 專案功能設計
      • 6.2 MainActivity 中取得畫面元件
      • 6.3 按鈕的事件處理
      • 6.4 使用浮動顯示-Toast類別
      • 6.5 使用對話框-AlertDialog 類別
      • 6.6 多國語言
      • 6.7 按鈕事件處理-匿名類別與 lambda
  • 線上課程
    • 20 線上課程 courses
Powered by GitBook
On this page

Was this helpful?

  1. Android 專案開發
  2. 6 Activity 設計

6.1 Bmi 專案功能設計

Previous6 Activity 設計Next6.2 MainActivity 中取得畫面元件

Last updated 5 years ago

Was this helpful?

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

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

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

MainActivity 使用的版面配置為「res/layout/activity_main.xml」,在這個畫面中會有兩個供使用者輸入的文字方塊與一個計算按鈕,以預設的 ConstraintLayout 設計它。請點選原來顯示 Hello world 的元件後,按下 Delete 鍵刪除。

新增元件

在 Android 中,文字方塊的類別為「TextView」,在左方元件區找到 「Text」分類中的「TextView」,TextView在此類別下是常用的元件,將它拉到畫面中,如下圖:

畫面設計

接下來請為 TextView 元件設定兩個約束 (Constraints),上方連結到畫面上緣,左方連結到畫面左邊,,若在前一步驟放開時有顯示提示虛線時,有些約束值會自動設定,如下圖:

預設的兩個約束值的邊界值都是 16 點,如下圖 ( 屬性區 ):

在屬性區找到 text 屬性,設定它的文字,請輸入 Weight,如下圖:

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

最後在屬性區內再找到 textAppearance,選擇 AppCompat.Large,加大文字方塊的字型,如下圖 :

最後完成的 TextView 預覽圖如下:

接下來加入一個輸入方塊,輸入方塊的類別名稱為「EditText」,在左方找到「Text 分類」,點擊「Numberic(Decimal)」輸入數值元件,並放到版面中以新增一個輸入方塊,如下圖:

在這個分類大都是 EditText 輸入方塊,只是根據它輸入內容不同而有那麼多個選擇。

請為元件建立上方與左邊的約束,可以將約束設在前一個已完成 TextView 的下方與左邊,如下圖:

完成後預覽如下:

因為未來程式需要取得使用者在此 EditText 內鍵入的資料,因此先為其設計 id 屬性為「ed_weight」,請在屬性區中最上面 id 值,如下圖:

上圖的左邊邊界距離,也改為 0,目的是讓這兩個元件的左邊對齊一致。

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

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

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

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

完成後的畫面的元件樹如下圖:

魔王禮23個單元之2: 實作APP會員註冊、登入、寄送Email驗證、登入狀態更新,找bug實例