iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
0
自我挑戰組

Kotlin Everyday:新手寫程式踩的坑系列 第 6

Day 6 ─用Kotlin做點餐介面 (4) AlertDialog

  • 分享至 

  • xImage
  •  

在送出訂單之前,我想要讓使用者可以再次確認飲料內容,這時候就可以用一個彈跳視窗─AlertDialog元件,會在原有的 Activity 上面跑出一個對話視窗,用以提醒使用者。

▲ AlertDialog是什麼
一般對話框,通常包含Title標題、Message內容和三個按鈕,由右而左分別是 PositiveButton (確定)、NeutralButton (中立)以及 NegativeButton (拒絕):

  • .setTitle 設定標題
  • .setMessage 設定內文
  • .setNegativeButton 通常為「確認、肯定」按鈕
  • .setNeutralButton 通常為中立按鈕
  • .setPositiveButton 通常為「拒絕、否定」按鈕

實作:如何在送出前加一個AlertDialog對話框
還記得前天我們是把intent、bundle、setResult直接寫在送出按鈕下面嗎?看code回復記憶↓ ↓ ↓

// btn_send.setOnClickListener { 
//     if (ed_drinks.length() < 1)
//         Toast.makeText(this, "請輸入飲料名稱", Toast.LENGTH_SHORT).show()
    else {
        val bundle = Bundle()      
        ...                      
        ...
        val intent = Intent()
        intent.putExtras(bundle)
        setResult(Activity.RESULT_OK, intent)
        finish()
    }

但是今天,我們按下「送出」之後要做的不是返回MainActivity、而是要跳出一個AlertDialog,真正的返回動作其實要寫在對話框的「確認」按鈕裡面,也就是說,送出的點擊事件改變了,要寫AlertDialog,而返回是在AlertDialog裡面的一個動作。
為了避免AlertDialog寫得太複雜,我先設一個名叫「back」的函式,把切換、夾帶資料的動作通通貼到這裡,等一下要用到時再呼叫。

  1. 這時候else裡面要做的就是跳出一個AlertDialog,於是寫基本的AlertDialog對話框進來
AlertDialog.Builder(this)  //參數放要傳入的 MainActivity Context
    .setTitle("") 
    .setMessage(" ")  
    .setButton()
    .create()
    .show()

特別要講AlertDialog按鈕的性質,帶有兩個參數

setButton (text: CharSequence, listener: DialogInterface.OnClickListener)
  • text:按鈕上的文字內容

  • listener:一個 DialogInterface.OnClickListener Interface,用來監聽該按鈕的點擊事件並執行點擊時要執行的事件,需要實作裡面的 onClick funtion

    (內容參考 小魚寫的Android Kotlin 實作 Day 16)

  1. 因為listener需要實作 onClick function,我們把剛剛的函式back寫在PositiveButton裡,點擊之後就會有返回主頁的動作
.setPositiveButton("確認") {_,_ ->
    back()
}
  1. 至於NegativeButton,沒有要監聽的點擊事件於是就用null,當然有另外一種做法是用dialog.cancel()/dismiss()取消對話框

  2. .setMessage 訊息內容怎麼寫:

.setMessage("訂購人:$name\n"+
            "飲料名稱:${ed_drinks.text}\n" +
            "甜度:${RadioGroup_sugar.findViewById<RadioButton>(RadioGroup_sugar.checkedRadioButtonId).text}\n" +
            "冰塊:${RadioGroup_ice.findViewById<RadioButton>(RadioGroup_ice.checkedRadioButtonId).text}")
  1. 最後是做出來的模樣,確認AlertDialog跑出來、也順利將夾帶資料弄回MainActivity

  1. 附上整段的code參考
AlertDialog.Builder(this)  
                      //AlertDialog.Builder (context: Context)
                      //參數放要傳入的 MainActivity Context
    .setTitle("確認你的訂單")    
    .setMessage(" ")  //訊息內容
    .setPositiveButton("確認") {_,_ ->
        back()
    }
    .setNegativeButton("我再想想",null)
    .create()
    .show()

上一篇
Day 5 ─用Kotlin做點餐介面 (3) 顯示訊息Toast
下一篇
Day 7 ─用Kotlin做點餐介面 (4) RadioButton.OnCheckedChangeListener
系列文
Kotlin Everyday:新手寫程式踩的坑30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
安安你好
iT邦新手 5 級 ‧ 2021-05-29 17:25:48

這系列寫得很棒!對我受益良多,謝謝你~

我要留言

立即登入留言