7-1 按鈕的事件處理

按鈕的事件處理

  使用者與 APP 中的 UI 元件互動時,元件會產生各類型的事件 (Event),例如點擊、長按、觸碰等事件,在 Android 中,這些事件由專門處理的「事 件傾聽器(Event Listener)」負責監聽,最常見的是元件被按下事件的「View.OnClickListener」,它是 View 類別內所設計的 Java 介面 (interface),宣告了一個方法:

fun onClick(view: View)

  所有實作 OnClickListener 的類別都須 一併實作這個方法,先將 OnClickListener 指派到一個特定元件(如 Button),未來,當 Button 被按下時, 會自動執行 OnClickListener 內的 onClick 方法。通常事件傾聽器會以「匿名類別(Anonymous Inner Class)」方式設計,匿名類別寫法會在本章後續介紹, 筆者先談的是使用方便的 onClick 屬性。

使用 onClick 屬性

  假設一個畫面中有很多個按鈕,每個按鈕都實作一個事件傾聽者去監聽事件是很繁複的工作,因此,Android 對於 Click 事件有特殊的對待,可以在元件屬性 onClick 設定一個方法名稱,再到 MainActivity 類別中設計一個同名的方法,方法規格如下:

fun 方法名稱(view : View ){
    //按下按鈕時需執行的程式碼
}

  接下來實作範例的 Bmi 運算按鈕的事件處理,在 activity_main.xml 的 設計畫面中,選擇「Calculate BMI」按鈕,再到屬性區找到「onclick」屬性, 輸入「bmi」,如下圖:

  輸入完成後再開啟 MainActivity.kt,新增一個 bmi 方法,Kotlin 類別的方法應在類別內的第一層新增,如下圖:

  在輸入 View 類別時,未打完時會出現下拉選單,請使用選單完成 View 類別的輸入,Android Studio 會自動加入 import 語法。未來,當使用者按下此按鈕時,會自動執行 bmi 方法內的程式碼。

提示:

  請儘量使用下拉選單完成類別的輸入,因為類別大都需要 import 語法,如果直接打完,import 語法不會自動產生。

  在 bmi 方法中,設計以下程式碼以計算出 BMI 值,如下:        

01 fun bmi(view: View) {
02     val weight = ed_weight.text.toString().toFloat()
03     val height = ed_height.text.toString().toFloat()
04     val bmi = weight / (height * height)
05     Log.d("BMI", bmi.toString())
06 }

  程式碼的 2 與 3 行呼叫 EditText 的 getText( ) 方法取得一個 Editable 的物件,再呼叫其 toString 方法取得目前輸入方塊中的字串,再將字串轉換為 Float 型態,最後以體重 / 身高 平方的公式算出 bmi 值。

  最後的第 5 行,使用 android.util.Log 類別 ( 需要 import),將浮點數 bmi 轉換為字串後,顯示在系統記錄 (LogCat),LogCat 是 Android 開發人員用來除錯的工具,可在執行時顯示資料並驗證程式的正確性。Log 類別提供了數個靜態方法,可供產生不同層級的記錄資料,例如代表除錯用的 d 方法(debug)、資訊的 i 方法 (info)、代表錯誤的 e 方法 (error) 等,以英文字的第一個字母為命名方式,可簡化程式碼的長度。這些方法使用上大致相同,以 d 除錯方法為例,規格如下:

Log.d( String tag, String message)

  第一個參數代表標籤 Tag,為這個訊息設定一個可供辨認的標籤值,方便未來在 Log 視窗中找到訊息,第二個參數則是想顯示的字串訊息,以上範例的執行結果如下:

  在模擬器中輸入體重 (66公斤) 與身高 (1.7 公尺) 後,再按下畫面中的「CALCULATE BMI」按鈕後會自動去執行 MainActivity 內的 bmi 方法,計算後得到 bmi 值並在下方的 LogCat 視窗中 顯示,如下圖:

Tip:「LogCat」是由 Android 開發工具所提供,讓開發者能夠觀察系統產生的除錯資訊與記錄。當應用程式出錯拋出例外時,可利用 LogCat 找到出錯的原因。

  使用 Log 類別可在開發時期提供資料確認、除錯的訊息,但無法將資訊提供給 APP 使用者,接下來將利用浮動顯示方式告知使用者運算出的 BMI 值的結果。     

完成並繼續  
問題討論

2 問答