《Android》『AlertDialog』- 提示對話盒的基本用法
《Android Developers 參考文獻》
《簡單介紹》
當程式在執行的時候，往往會有許多需要與使用者互動的地方，不管是單純通知使用者目前的狀態，或者是一些需要使用者作出決定的指令，這個時候，用 AlertDialog 來當媒介會是一個不錯的選擇，AlertDialog 是一種基本的對話方塊，裡面預設可以顯示訊息、顯示列表，並提供了一些基本決策按鈕，當然，我們也可以傳入一個自訂的 layout.xml 資源檔，來客製化 AlertDialog 的樣式。
《基本用法》
AlertDialog 建立基本交談視窗的方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
package ...; import ...; public class MainActivity extends Activity { final int DIALOG_ID = 1; private Button btnAlertDialog; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btnAlertDialog = (Button)findViewById(R.id.btnAlertDialog); btnAlertDialog.setOnClickListener(btnAlertDialog_listener); } Button.OnClickListener btnAlertDialog_listener = new View.OnClickListener() { @Override public void onClick(View v) { showDialog(DIALOG_ID); //傳入自訂ID，顯示對應的提示對話方塊 } }; @Override protected Dialog onCreateDialog(int id) //初始化對話方塊，透過 showDialog(ID) 觸發 { Dialog dialog = null; switch(id) //判斷所傳入的ID，啟動相應的對話方塊 { case DIALOG_ID: Builder builder = new AlertDialog.Builder(this); builder.setIcon(R.drawable.icon) //設定標題圖片 .setTitle("TITLE") //設定標題文字 .setMessage("MESSAGE") //設定內容文字 .setPositiveButton("OK", new DialogInterface.OnClickListener() { //設定確定按鈕 @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub } }) .setNegativeButton("CANCEL", new DialogInterface.OnClickListener() { //設定取消按鈕 @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub } }) .setNeutralButton("CENTER", new DialogInterface.OnClickListener() { //設定中間按鈕 @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub } }); dialog = builder.create(); //建立對話方塊並存成 dialog break; default: break; } return dialog; } } |
MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:id="@+id/btnAlertDialog" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="Start AlertDialog" /> </LinearLayout> |
activity_main.xml
在此範例中，我們宣告了一個名為 btnAlertDialog 按鈕，並透過點擊他來呼叫 AlertDialog，常用到的設定方法條列如下 –
showDialog(DIALOG_ID)
➥傳入自訂 ID，並顯示對應的提示對話方塊，當呼叫此方法時，系統會重載 onCreateDialog()，因此通常會一起使用。
@Override
protected Dialog onCreateDialog(int id)
➥用來初始化提示對話方塊，需搭配 showDialog() 使用。
setIcon()
➥設定標題圖示。
setTitle()
➥設定標題文字。
setMessage()
➥設定提示訊息內容文字。
setPositiveButton()
➥設定預設確認按鈕的文字與動作(未設定則不顯示)。
setNegativeButton()
➥設定預設取消按鈕的文字與動作(未設定則不顯示)。
setNeutralButton()
➥設定預設取消按鈕的文字與動作(未設定則不顯示)。
create()
AlertDialog 建立清單列表視窗的方法
透過上面的方法，我們建立了一個具有圖案、標題、內容以及三個使用者按鈕的提示訊息方塊，但若是我們想要讓選項以類似列表清單的方式來呈現，該怎麼做呢？其實很簡單，只要透過 setItems() 的方法即可以完成，程式碼如下 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
package ...; import ...; public class MainActivity extends Activity { final int DIALOG_ID = 1; String[] str_list = {"item 01", "item 02", "item 03"}; private Button btnAlertDialog; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btnAlertDialog = (Button)findViewById(R.id.btnAlertDialog); btnAlertDialog.setOnClickListener(btnAlertDialog_listener); } Button.OnClickListener btnAlertDialog_listener = new View.OnClickListener() { @Override public void onClick(View v) { showDialog(DIALOG_ID); //傳入自訂ID，顯示對應的提示對話方塊 } }; @Override protected Dialog onCreateDialog(int id) //初始化對話方塊，透過 showDialog(ID) 觸發 { Dialog dialog = null; switch(id) //判斷所傳入的ID，啟動相應的對話方塊 { case DIALOG_ID: Builder builder = new AlertDialog.Builder(this); builder.setIcon(R.drawable.icon) //設定標題圖片 .setTitle("TITLE") //設定標題文字 .setMessage("MESSAGE") //設定內容文字 .setItems(str_list, new DialogInterface.OnClickListener() { //設定清單列表視窗 @Override public void onClick(DialogInterface dialog, int which) { // whitch 參數為使用者點擊哪一個(0, 1 or 2) } }); dialog = builder.create(); //建立對話方塊並存成 dialog break; default: break; } return dialog; } } |
MainActivity.java
在這裡我們自訂了一個名為 str_list 的陣列，並在 onCreateDialog() 中，透過 setItems() 的方法將該陣列設定給 AlertDialog.Builder，接著就可以進一步定義不同的 Item 被點擊後所需執行的動作。在這裡我們就省略了確認、取消等按鈕的設定，因為並不需要。
用到的設定方法如下 –
setItem()
AlertDialog 建立單選列表視窗的方法
若是我們想要建立一個類似 RadioButton 的單選清單列表，程式碼如下 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
package ...; import ...; public class MainActivity extends Activity { final int DIALOG_ID = 1; String[] str_list = {"item 01", "item 02", "item 03"}; private Button btnAlertDialog; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btnAlertDialog = (Button)findViewById(R.id.btnAlertDialog); btnAlertDialog.setOnClickListener(btnAlertDialog_listener); } Button.OnClickListener btnAlertDialog_listener = new View.OnClickListener() { @Override public void onClick(View v) { showDialog(DIALOG_ID); //傳入自訂ID，顯示對應的提示對話方塊 } }; @Override protected Dialog onCreateDialog(int id) //初始化對話方塊，透過 showDialog(ID) 觸發 { Dialog dialog = null; switch(id) //判斷所傳入的ID，啟動相應的對話方塊 { case DIALOG_ID: Builder builder = new AlertDialog.Builder(this); builder.setIcon(R.drawable.icon) //設定標題圖片 .setTitle("TITLE") //設定標題文字 .setMessage("MESSAGE") //設定內容文字 .setSingleChoiceItems(str_list, 0, new DialogInterface.OnClickListener() { //設定單選清單 @Override public void onClick(DialogInterface dialog, int which) { //whitch 參數代表點擊了哪一個 Item dialog.dismiss(); } }); dialog = builder.create(); //建立對話方塊並存成 dialog break; default: break; } return dialog; } } |
MainActivity.java
用到的設定方法如下 –
setSingleChoiceItems()
AlertDialog 建立多選列表視窗的方法
若是我們想要建立一個類似 CheckBox 的多選清單列表，程式碼如下 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
package ...; import ...; public class MainActivity extends Activity { final int DIALOG_ID = 1; String[] str_list = {"item 01", "item 02", "item 03"}; boolean[] flag_list = {true, false, true}; private Button btnAlertDialog; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btnAlertDialog = (Button)findViewById(R.id.btnAlertDialog); btnAlertDialog.setOnClickListener(btnAlertDialog_listener); } Button.OnClickListener btnAlertDialog_listener = new View.OnClickListener() { @Override public void onClick(View v) { showDialog(DIALOG_ID); //傳入自訂ID，顯示對應的提示對話方塊 } }; @Override protected Dialog onCreateDialog(int id) //初始化對話方塊，透過 showDialog(ID) 觸發 { Dialog dialog = null; switch(id) //判斷所傳入的ID，啟動相應的對話方塊 { case DIALOG_ID: Builder builder = new AlertDialog.Builder(this); builder.setIcon(R.drawable.icon) //設定標題圖片 .setTitle("TITLE") //設定標題文字 .setMessage("MESSAGE") //設定內容文字 .setMultiChoiceItems(str_list, flag_list, new DialogInterface.OnMultiChoiceClickListener() { @Override public void onClick(DialogInterface dialog, int which, boolean isChecked) { // TODO Auto-generated method stub flags[which]=isChecked; } }) .setPositiveButton("OK", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub String temp="你選擇了"; for(int i=0; i<flag_list.length; i++) { if(flag_list[i]) temp = temp + str_list[i]; } } }); dialog = builder.create(); //建立對話方塊並存成 dialog break; default: break; } return dialog; } } |
MainActivity.java
我們自訂了名為 str_list 以及 flag_list 的兩個陣列，分別代表了多選清單中每個選項的內容以及是否被選取，並在 onCreateDialog() 中，透過 setMultiChoiceItems() 的方法將這兩個陣列設定給 AlertDialog.Builder，接著就可以進一步定義不同的 Item 被點擊後所需執行的動作。
用到的設定方法如下 –
setMultiChoiceItems()
AlertDialog 建立自訂外觀視窗的方法
我們也可以利用直接傳入一個自己定義好的 layout.xml 資源檔，達到自訂外觀視窗的效果，程式碼如下 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
package ...; import ...; public class MainActivity extends Activity { final int DIALOG_ID = 1; private Button btnAlertDialog; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btnAlertDialog = (Button)findViewById(R.id.btnAlertDialog); btnAlertDialog.setOnClickListener(btnAlertDialog_listener); } Button.OnClickListener btnAlertDialog_listener = new View.OnClickListener() { @Override public void onClick(View v) { showDialog(DIALOG_ID); //傳入自訂ID，顯示對應的提示對話方塊 } }; @Override protected Dialog onCreateDialog(int id) //初始化對話方塊，透過 showDialog(ID) 觸發 { Dialog dialog = null; switch(id) //判斷所傳入的ID，啟動相應的對話方塊 { case DIALOG_ID: //自訂一個名稱為 content_layout 的介面資源檔 final View content_layout = LayoutInflater.from(MainActivity.this).inflate(R.layout.content_layout, null); Builder builder = new AlertDialog.Builder(this); builder.setIcon(R.drawable.icon) //設定標題圖片 .setTitle("TITLE") //設定標題文字 .setView(content_layout) //設定內容外觀 .setPositiveButton("OK", new DialogInterface.OnClickListener() { //設定確定按鈕 @Override public void onClick(DialogInterface dialog, int which) { //取得 content_layout 介面資源檔中的元件 EditText edittext = (EditText) content_layout.findViewById(R.id.edittext); ... } }); dialog = builder.create(); //建立對話方塊並存成 dialog break; default: break; } return dialog; } } |
MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" > <EditText android:id="@+id/edittext" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout> |
content_layout.xml
在這個例子中，我們自訂了一個名為 content_layout.xml 的介面資源檔，並利用 setView() 方法將它設定為 AlertDialog 內容的外觀，一個簡易的客製化外觀視窗就完成了，但是底下的按鈕並沒有達到客製化的效果，下一篇文章會來說明如何完全客製化外觀。
用到的設定方法如下 –
setView()
➥設定自訂的外觀。
臉書留言
一般留言