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

jollen 發表於 June 10, 2009 2:56 PM

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

自從有了圖形化應用程式之後,對話盒(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;
 }

dialog-1.png
圖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物件。

讀者留言 (1)

  • 德明小翔 於 January 20, 2014 14:54:

    老師您寫的很好喲^^!我忽然看捯這篇才知道對話盒的意思是什麼~

留言功能維護中。將於近日重新開放。

連絡作者

Jollen Chen,Moko365(仕橙3G教室)講師,熱愛研究 Linux 與 Android 技術。曾為 Motorola、HTC、Foxconn、LG、OPPO、騰迅、廣達電腦、緯創、仁寶等超過 50 家企業講授課程。目前在 MokoVersity 擔任軟體工程師,撰寫 Node.js 程式,也在幾家科技廠兼任 Android Framework 研發顧問。您可透過電子郵件 <jollen (at) jollen (dot) org> 或這裡與我連絡。