2011年7月16日 星期六 | By: 雞米

[Android] AlertDialog-加入多選列表並取得選擇結果(Multi choice list)


Android手機的鬧鐘是大家常使用的功能,在選擇鬧鐘重複的週期時,畫面會跳出AlertDialog顯示星期一至星期日的選項List供使用者選擇多個時間點,今天要介紹的是如何在AlertDialog中加入Multi Choice List,並在使用者選擇Dialog的確認按鈕後,顯示所選擇的內容,這裡將以鬧鐘選擇週期日子的功能為例。


範例情境:

主畫面有個按鈕「選擇星期」,使用者點選後會出現具有Multi Choice List的AlertDialog,有多個時間人選擇,在按下Dialog「確認」按鈕後,系統將會顯示一個Toast訊息,內容為剛才所選擇的時間。

程式碼說明:

一、取得「選擇星期」按鈕物件參考後,註冊其OnClickListener函式,負責顯示具有Multi choice List的AlertDialog
//取得按鈕參考
Button dialogBtn = (Button)findViewById(R.id.dialogBtn);
//register click event listener
dialogBtn.setOnClickListener(onClick);
二、在OnClickListener使用setMultiChoiceItems(items, checkedItems, listener)在AlertDialog加入多選列表,items參數為一個陣列,其代表顯示在List的每個item名稱,checkedItems代表List item的預設勾選狀態,最後是listener負責處理使用者選擇任一個item時所要執行的動作。
CharSequence[] item = {"星期一","星期二","星期三","星期四","星期五","星期六","星期日"};
boolean[] isChecked = new boolean[day.length];

/**選擇星期按鈕OnClick Listener*/
private View.OnClickListener onClick = new View.OnClickListener() {  
  @Override
  public void onClick(View v) {
  //Display a dialog with a multi choice list
  new AlertDialog.Builder(MultiChoiceDialog.this)
  .setTitle("重複日期")
  .setMultiChoiceItems(day, isChecked, onChoice)
  .setNegativeButton("確認", showSelectedResult)
  .setNeutralButton("取消", null)
  .create()
  .show();   
  }
};
三、在完成按下按鈕顯示Dialog的部份後,接下來要處理User按下多選列表而所要執行的動作,在實作OnMultiChoiceClickListener的內容中,我們將使用者所選擇的item status進行狀態更新。
private OnMultiChoiceClickListener onChoice = new OnMultiChoiceClickListener(){
  @Override
  public void onClick(DialogInterface dialog, int position, boolean checked) {
  //更新目前的選項checked status
  isChecked[position] = checked;
  }
};
四、最後,實作AlertDialog確認按鈕的DialogIterface.OnClickListener(),在按下確認後檢查每個item的checked狀態,如果為被勾選的狀態,就加入顯示結果中。
/**顯示User選擇結果*/
private DialogInterface.OnClickListener showSelectedResult = new DialogInterface.OnClickListener(){
  @Override
  public void onClick(DialogInterface dialog, int which) {
  String result = "你選擇了:";
  for(int i=0;i< item.length;i++){
    if(isChecked[i]==true){
      result = result+","+item[i];
    }
  }
  //顯示選擇的星期
  Toast.makeText(MultiChoiceDialog.this, result, 3000).show();
  }
};
最後在使用選擇幾個選項後,按下確認將會看到一個訊息顯示選擇的內容

0 意見:

張貼留言