#(Swift)How to use ToolBar in TextField to move next and back TextField

目的：學習如何透過 ToolBar 在 TextField 之間快速移動

第一步

在 storyboard 新增四個 TextField 並拉 @IBOutlet Collection

第二步

在 Textfield 鍵盤上使用 ToolBar，並且新增 previous, next, flexibleSpace, done 按鍵

關鍵程式： sizeToFit(), setItems(), inputAccessoryView, flexibleSpace

setItmes()中的第一個參數要放入建立的按鍵，依序由左至右對應到鍵盤上方的空格，flexibleSpace 是固定在中間的白色鍵

inputAccessoryView 也就是鍵盤上的白色空間，如果沒有輸入這段程式碼，製作的按鍵也無法顯示

Apple Developer Documentation

func addToolBarOnKeyboard() {
        for (index, TextField) in TextFieldCollection.enumerated() {
            //ToolBar 製作
            let ToolBar = UIToolbar()
            ToolBar.sizeToFit()
            //製作 previous 按鍵
            let previousButton = UIBarButtonItem(image: UIImage(systemName: "chevron.up"), style: .plain, target: nil, action: nil)
            //製作 next 按鍵
            let nextButton = UIBarButtonItem(image: UIImage(systemName: "chevron.down"), style: .plain, target: nil, action: nil)
            //製作 Done 按鍵
            let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: nil, action: nil)
            //製作 空白 按鍵
            let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
            ToolBar.setItems([previousButton, nextButton, flexibleSpace, doneButton], animated: true)
            TextField.inputAccessoryView = ToolBar

    }

第三步

製作按鈕的事件，先判斷是否為第一個 TextField ，若為第一個 TextField 則 previous 按鍵設定為無法點選。

⭐ ️接著在 else 中使用 index 參數，此時要搭配 TextField 中的關鍵程式 becomeFirstResponder ，使用這段程式能幫助我們進行 TextField 的跳轉
而我們進行跳轉回到前一個 TextField 時，target 就想成目前程式執行的對象是誰，這時候就是設定前一個 TextField 對吧？ index 就要 -1 ，跳轉到下一個 TextField 則是 index + 1

func addToolBarOnKeyboard() {
        
        for (index, TextField) in TextFieldCollection.enumerated() {
            ....
            //判斷是否為第一個 TextField
            if TextField == TextFieldCollection.first {
                //關閉 previous 按鍵
                previousButton.isEnabled = false
            }else {
                previousButton.target = TextFieldCollection[index - 1]
                previousButton.action = #selector(TextField.becomeFirstResponder)
            }
            
            //判斷是否為最後一個 TextField
            if TextField == TextFieldCollection.last {
                //關閉 next 按鍵
                nextButton.isEnabled = false
            }else {
                nextButton.target = TextFieldCollection[index + 1]
                nextButton.action = #selector(TextField.becomeFirstResponder)
            }
        }
    }

第四步

設定 Done 的事件，先在 ViewController 新增 @objc func closekeyboard()

最後在 doneButton 的 action 新增剛剛的程式即可完成

func addToolBarOnKeyboard() {
        
        for (index, TextField) in TextFieldCollection.enumerated() {
            ....
            //製作 Done 按鍵
            let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: nil, action: #selector(closekeyboard))
}
//done 收鍵盤
    @objc func closekeyboard() {
        view.endEditing(true)
    }

GitHub

GitHub - jasonyen1009/ToolBarinTextField