Jollen 的 Android 教學,#13: 快顯訊息 android...

最少的元件、最舒適的介面

自從有了圖形化應用程式之後，對話盒（dialog）一直是元老級的元件（widget）；智慧型手機開始流行後，對話盒仍然是手機介面的重要圖形 元件。

在Apple的iPhone問世後，觸控螢幕（touch screen）一直是智慧型手機的標準規格，因此傳統的滑鼠點擊（click）式介面，並不完全適合手指觸控的操作方式，再加上手機觸控螢幕尺吋較小，因 此手機應用程式的介面設計，已經與傳統的桌面環境相當不同。

Android的元件庫考量了小尺吋的觸控螢幕，在基本元件的設計上，Android也為使用者做了很體貼的考量。以Android手機應用程式來 說，經常使用的元件已經不再像過去的點擊式系統那麼多又複雜；以使用性的角度來看，常被使用的元件如下：

* 選單（Menu）
* 對話盒（Dialog）
* 快顯訊息（Toast）

使用以上三個元件，以及其「變化形」，就能建構一個好用的應用程式介面；再加上Android針對上述的手機操作特性，對其元件庫做了很好的使用設 計，因此使用很少的元件，也能提供使用者一個舒適好用的操作介面。

何謂對話盒？

對話盒，故名其思，是一個讓應用程式與使用者「對話」的元件。應用程式透過對話盒與使用者進行下述的對話：

* 詢問問題：使用者回答 Yes/No
* 詢問偏好：使用者選擇自已偏好的項目，可以是單選，也可以是複選
* 說明狀態：讓使用者知道應用程式目前的狀態，例如：顯示「處理中」、「載入中」等訊息

Android提供的對話盒物件為android.app.Dialog，實作上繼承自Dialog的AlertDialog物件是最基本的對話盒 物件。使用AlertDialog對話盒，可以詢問使用者問題，也可以詢問使用者偏好。接下來介紹AlertDialog對話盒的設計方法。

建立AlertDialog對話盒

延續「HelloMenu」範例，現在我們想要加入以下的使用情境：

* 使用者按下Menu鍵
* 使用者觸壓 “New Message” 選項
* 出現對話盒、詢問使用者 “Yes/No”

由以上的使用情境來看，應該在onOptionsItemSelected()裡判斷到R.id.new_message項目時，在UI上建立一個 對話盒。以下是修改後的onOptionsItemSelected()完整程式碼，完整範例名稱為HelloAlertDialog：

public boolean onOptionsItemSelected(MenuItem item) {
          int item_id = item.getItemId();
     
            switch (item_id){
                   case R.id.new_message: 
                     AlertDialog.Builder builder = new AlertDialog.Builder(this);
                        
                    builder.setMessage("Also post your message to Twitter?");
                   builder.setCancelable(false);
                       
                    builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog, int id) {
                               }
                   });
                 
                    builder.setNegativeButton("No", new DialogInterface.OnClickListener() {
                             public void onClick(DialogInterface dialog, int id) {
                               }
                   });   
                      
                    AlertDialog alert = builder.create();
                       alert.show();
                       break;
              case R.id.quit: 
                Toast.makeText(
                        this,
                        "Going to quit.",
                        Toast.LENGTH_LONG).show();                         
                            break;
              default: return false;
      }
           return true;
 }

圖1: Android的AlertDialog對話盒

產生AlertDialog物件的說明：

1. 產生AlertDialog.builder物件（dialog builder），這是一個用來建立對話盒內容的產生器物件

2. 設定dialog builder的顯示訊息-builder.setMessage()

3. 設定對話盒能不能被「取消」-builder.setCancelable()

4. 利用dialog builder在對話盒裡產生二個按鈕「Yes與No」-builder.setPositiveButton()與 builder.setNegativeButton()
使用dialog builder來建立AlertDialog物件，AlertDialog是真正的對話盒物件-builder.create()

5. 將AlertDialog顯示在UI上-alert.show()

產生「Yes按鈕」的程式如下：

builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
       public void onClick(DialogInterface dialog, int id) {
               }
});

呼叫builder.setPositiveButton()方法建立一個「正面（Yes）」的按鈕，參數說明如下：

1. 第一個參數：顯示在按鈕上的文字
2. 第二個參數：指定 click listener

每一個按鈕都需要一個click listener，當使用者觸壓按鈕時，click listener便被回呼。android.content.DialogInterface類別提供click listener物件。

學會產生基本的UI後，接著就要學習UI的事件處理(UI Events)，才能讓UI與使用者「互動」。

什麼是事件監聽器(Event Listener)

UI的使用者事件處理，即View如何處理使用者的操作，是一個重要的課題。View是重要的類別，它是與使用者互動的前線；在Android框架 的設計中，以事件監聽器（event listener）的方式來處理UI的使用者事件。

Android框架提供了非常良好的UI事件處理機制。先前的教學提到，View是繪製UI的類別，每個View物件都可以向Android框架註 冊一個事件監聽器。每個事件監聽器都包含一個回呼函數（callback method），

這個回呼函數（callback method）主要的工作就是回應或處理使用者的操作。

Event Listener: 以Click Listener為例

以「使用者觸碰（touch）」的動作來說，當View要處理使用者觸碰的事件時，就要向Android框架註冊 View.OnClickListener事件監聽器；當「touch」事件發生時，Android框架便回呼事件監聽器裡的回呼函數。

View.OnClickListener是click listener，故名思意，這是UI的「Click動作監聽器」；當使用者對View進行Click操作時（即觸控畫面上的UI元件），Android 框架便會回呼這個View.OnClickListener的回呼函數。

View.OnClickListerner的回呼函數為OnClick()。

這裡所提到的監聽器泛指event listener，主要用來「監聽」使用者的各種動作。除了View.OnClickListener外，Android框架還有以下的event listener（及其callback method）：

• View.OnLongClickListener: onLongClick()
• View.OnFocusChangeListener: onFocusChange()
• View.OnKeyListener: onKey()
• View.OnTouchListener: onTouch()
• View.OnCreateContextMenuListener: onCreateContextMenu()