顯示廣告
隱藏 ✕
回列表(←)
Disp BBS guest 註冊 登入(i) 線上人數: 551
首頁(home) 上頁(↑) 下頁(↓) 末頁(end)
看板 KnucklesNote
作者 Knuckles (站長 那克斯)
標題 [Xcode][Swift3] 顯示提示對話框 UIAlertController
時間 2017-03-26 Sun. 23:43:37

要跳出一個訊息，讓使用者必需點選「確定」或「取消」才能繼續時
可以使用 UIAlertController


只有一個確定鈕

例如想要在點選某個按鈕時，出現簡單的提示訊息

在 storyboard 加上一個 UIButton
點著 Ctrl 拉到 assistant editor 建立一個 @IBAction
[圖]


將建立的函數改為
    @IBAction func alert(_ sender: Any) {
        let alert = UIAlertController(title: "標題文字", message: "要顯示的訊息", preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "確定", style: .default, handler: nil))
        self.present(alert, animated: true, completion: nil)
    }

執行結果，點擊按鈕後，頁面中央會顯示
[圖]


若是將 preferredStyle: 的 .alert 改成 .actionSheet，
會變成在頁面底部顯示
[圖]



關於輸入參數 preferredStyle:
.alert 是 enum 變數 UIAlertControllerStyle.alert 的簡寫

enum 是一種將相關的數值集合起來的變數，宣告的型式為
enum UIAlertControllerStyle : Int {
     case actionSheet
     case alert
}


注意若 preferredStyle 是使用 .actionSheet 時，要再加上
        let button = sender as! UIView
        alert.popoverPresentationController?.sourceView = button
        alert.popoverPresentationController?.sourceRect = button.bounds
不然在 iPad 執行會閃退

在 iPad 使用 .actionSheet 會在按鈕下方跳出 popover 方塊
[圖]



如果按鈕是使用 Navigation Bar 上的 BarButtonItem 的話，要改成加上
        alert.popoverPresentationController?.barButtonItem = sender as? UIBarButtonItem

在 iPad 點擊 BarButtonItem 跳出的 .actionSheet 會像這樣
[圖]



有確定和取消兩個按鈕

點取消就直接關閉對話框，點確定後要能執行後續的動作

將函數 alert(_:) 的內容改為
        let alert = UIAlertController(title: "標題文字", message: "要顯示的訊息", preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "取消", style: .cancel, handler: nil))
        alert.addAction(UIAlertAction(title: "確定", style: .default, handler: { action in
            //點了確定後要做的事
            print("點選了確定按鈕")
        }))
        self.present(alert, animated: true, completion: nil)
要先放取消按鈕，style: 要使用 .cancel
確定按鈕的 handler: 加入一個 callback 匿名函數 { action in /* 要做的事 */ }

執行結果
[圖]

點了確定後會在 Console 視窗顯示「點選了確定按鈕」

按鈕的 style: 也可以使用 .destructive 代表是個危險的動作
按鈕文字會變成紅色，像這樣
[圖]



使用三個按鈕

        let alert = UIAlertController(title: "標題文字", message: "要顯示的訊息", preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "取消", style: .cancel, handler: nil))
        alert.addAction(UIAlertAction(title: "確定", style: .default, handler: nil))
        alert.addAction(UIAlertAction(title: "略過", style: .default, handler: nil))
        self.present(alert, animated: true, completion: nil)

執行結果
[圖]


三個按鈕以上會變成上下排列
style: 設定 .cancel 的按鈕會被放在最下面


加上文字輸入框

例如要做登入功能，讓使用者輸入帳號與密碼

        let alert = UIAlertController(title: "登入", message: "請輸入帳號密碼", preferredStyle: .alert)
        // 加上文字輸入框
        alert.addTextField { textField in
            textField.placeholder = "帳號"
        }
        alert.addTextField { textField in
            textField.placeholder = "密碼"
            textField.isSecureTextEntry = true
        }
        // 加上按鈕
        alert.addAction(UIAlertAction(title: "取消", style: .cancel, handler: nil))
        alert.addAction(UIAlertAction(title: "確定", style: .default, handler: { action in
            //點了確定後要做的事
            if let usernameTextField = alert.textFields?[0],
                let passwordTextField = alert.textFields?[1] {
                print("輸入的帳號為： \(usernameTextField.text!)")
                print("輸入的密碼為： \(passwordTextField.text!)")
            }
        }))
        self.present(alert, animated: true, completion: nil)

執行結果
[圖]





參考
Swift 起步走 提示框 UIAlertController
AppCoda Introduction to UIAlertController, Swift Closures and Enumeration
StackOverflow How would I create a UIAlertView in Swift?







--
※ 作者: Knuckles 時間: 2017-03-26 23:43:37
※ 編輯: Knuckles 時間: 2017-05-17 00:35:48
※ 看板: KnucklesNote　文章推薦值: 0 目前人氣: 0 累積人氣: 1542　
分享網址: 複製 已複製
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇