Jollen 的 Android 教學,#14: 什麼是對話盒 (Dialog)？如何建立對話盒

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

自從有了圖形化應用程式之後，對話盒（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物件。