Xcode
Uialertviewcontroller
Uialertaction
Swift

8.%d Xcode-UIAlertController

春麗 S.T.E.M.

8 min readJul 28, 2021

目錄

⦿ 提示框
⦿ Objective-C 方法
⦿ 登入帳號與密碼

提示框

在 APP 裡面，會看到大量的提示框，有的提示框彈出訊息，告訴你哪邊發生錯誤，或是這地方不該這樣操作；有的提示框是創建帳號時讓你可鍵入帳號及密碼。

我們在畫面加入四個 button，按下 button 後彈出各式提示框如下：

在 Xcode 中，我們會使用 UIAlertController 來做這樣的提示框，若你參照網路上的資料是舊的，例如起步走的這篇練習，要適時地做語法的修正。

在 viewDidLoad( ) 中，為了加入 button，我們加入下面的程式碼：

// 取得螢幕大小後面定位或設置元件大小用
let fullScreenSize = UIScreen.main.bounds.sizelet myButton = UIButton(type: .system)
myButton.frame = CGRect(x: 0, y: 0, width: 100, height: 30)
        
myButton.setTitle("簡單提示", for: .normal) 
// 設置 RGB 及透明度
myButton.backgroundColor = UIColor.init(red: 0.9, 
                                        green: 0.9, 
                                        blue: 0.9, 
                                        alpha: 1)
// 設置元件大小及位置
myButton.center = CGPoint(x: fullScreenSize.width/2, 
                          y: fullScreenSize.height * 0.15)
        
*/ 將 button 加入點擊動作, 選擇器裡是另外編寫 Objective-C 的方法
   偵測點擊手勢是 touchUpInside 才會觸發方法 /*
myButton.addTarget(nil, 
                   action: #selector(simpleHint), 
                   for: .touchUpInside)

在 addTarget 中，將第一個參數設為 nil，接著，調用 #selector(方法)，如你的 Objective-C 方法叫做 myMethod()，放在 selector 中不用加上 ()，只需要寫 mythod；touchUpInside 意思是點了以後手指離開螢幕。

要記得的是用代碼生成的 button 要記得 self.view.addSubview(myButton)，如果是在 Storyboard 中生成的元件，則只需要讓 Storyboard 中的元件繼承你的 class。

繼續閱讀｜回目錄

Objective-C 方法

再來看到 button 加入 Objective-C 方法的宣告，需在 function 前面加上 @objc ，這即是按下 button 後的動作，程式碼如下：

 @objc func simpleHint() {    // 宣告 .alert 的提示框
    let alertController = UIAlertController(
        title: "提示", 
        message: "請按確認繼續", 
        preferredStyle: .alert
    )
    // 宣告點擊動作
    let okAction = UIAlertAction(
        // 在多個點擊動作裡 .cancel 只能有一個
        title: "確認", style: .default) { _ in
        print("按下確認後，閉包裡執行印出這行文字")
    }
    // 將動作加入提示框    
    alertController.addAction(okAction)
    self.present(alertController, animated: true, completion: nil)
}

提示框的兩種樣式（preferredStyle），.alert 就是常見的由中間畫面彈出的提示框，.actionSheet 則是在下方畫面彈出的提示框。

Get 春麗 S.T.E.M.’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

點擊動作有三種，其中 .destructive 會將 title 設置為紅色；而 .cancel 在多個提示框動作裡是唯一的，若設置兩個 .cancel，會出現這樣的回報：

Preview Crashed。

最後要 self.present，self 指的是你所在的 class 自身，通常是 View Controller，而 handler 這個 escaping closure 是可選的，預設為 nil，即是動作可有可無。

當然也可以編寫後再加入，可參考另篇文章如下：

#13 Xcode App 的解鎖畫面(passcode)

先上圖

medium.com

而提示框加入動作，依照程式由上而下，在畫面中是由左至右的按鍵順序。

繼續閱讀｜回目錄

登入帳號與密碼

雖然文章開頭說這個提示框可以是創建帳號時使用，不過這個練習看起來像登入用，一般來說，輸入帳號密碼我們會用 textField 來達成，而創建帳號可以參考系列文章，否則依這種形式的輸入框來說，更適合用作密碼解鎖。

練習畫面如下：

一樣地，button 加入的 Objective-C 方法，程式碼如下：

@objc func login() {
        let alertController = UIAlertController(
             title: "登入", 
             message: "請輸入帳號密碼", 
             preferredStyle: .alert
        )
        // 加入兩個 textField, 並設置 placeholder（同 text）
        alertController.addTextField { (textField: UITextField) in
            textField.placeholder = "帳號"
        }
        
        alertController.addTextField { (textField: UITextField) in
            textField.placeholder = "密碼"
            // 輸入密碼時會自動轉成星號, 是謂安全輸入
            textField.isSecureTextEntry = true
        }
        
        // 加入 cancel action
        let cancelAction = UIAlertAction(
            title: "取消", style: .cancel, handler: nil
        )
        alertController.addAction(cancelAction)
        
        // 加入 ok action
        let okAction = UIAlertAction(title: "登入", style: .default) {(action: UIAlertAction) in
           
let account = (alertController.textFields?.first)! as UITextField
let password = (alertController.textFields?.last)! as UITextField
            
            print("輸入的帳號是\(account.text ?? "")")
            print("輸入的密碼是\(password.text ?? "")")
        }
        alertController.addAction(okAction)        self.present(alertController, animated: true, completion: showMe)}