8.%d Xcode-UIAlertController

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 則是在下方畫面彈出的提示框。

點擊動作有三種，其中 .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)}