如何将工具栏添加到键盘扩展？

Question

我正在构建一个自定义键盘，但我找不到任何关于它的教程或文章。
我想要做的是添加一个工具栏，就像您在下面的屏幕截图中看到的那样。作为参考，您甚至可以在 iPhone 中使用建议的单词工具栏。
我正在处理一个 xib 文件，如果我向它添加一个工具栏，当我运行我的应用程序时它不会显示。
我发现的所有解决方案都只是用于在用户在您的应用程序中使用默认键盘时对其进行编辑。我的是自定义键盘。
抱歉，如果我没有添加任何参考代码，但由于我正在处理一个 xib 文件，我不需要任何关于功能的东西，而只是关于外观，我没有必要......

我需要的工具栏不仅显示在我的应用程序中。

Answer 1

这是一个解决您的问题的解决方案，如何创建自定义 UIToolBar 并向其添加自定义元素，如 UIButton 等：

#Swift 5

   class ViewController: UIViewController, UITextFieldDelegate {


   // will be added later to our custom ToolBar)
   let dragButton = UIButton()

   // the toolbar will appear above a keyboard of the UITextField
   // it can be an outlet from a storyboard also
   let someTextField = UITextField()


  // here is our didLoad method)
  override func viewDidLoad() {
      super.viewDidLoad()

      someTextField.delegate = self
    
   //For exemple here we call our function what does all the toolbar setups
    setupToolBar()
    
 }

   //setup toolbar
   func setupToolBar(){

    // to add a target for our drag button
    // the target is below the setupToolBar function)
    dragButton.addTarget(self, action:#selector(dragClicked), for: .touchDown)
    dragButton.backgroundColor = .red
    dragButton.frame = CGRect(x: 0, y: 0, width: 80, height: 4)
    dragButton.contentMode = .scaleAspectFit
    dragButton.setBackgroundImage(UIImage(named: "drag"), for: .normal)
    

     // So here we do some stuff with the toolBar
    let toolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 100))
    toolBar.barTintColor = .clear
    toolBar.setBackgroundImage(UIImage(), forToolbarPosition: UIBarPosition.any, barMetrics: UIBarMetrics.default)
    toolBar.setShadowImage(UIImage(), forToolbarPosition: UIBarPosition.any)
    toolBar.backgroundColor = .white
    toolBar.isOpaque = false

    //The flexible space helps to arrange things inside the toolBar
    let flexibleSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: nil, action: nil)

    let ourButton = UIBarButtonItem.init(customView: dragButton)

    // we added 2 flexible spaces to keep are button at the center of the toolBar
      toolBar.setItems([flexibleSpace, hideButton, flexibleSpace], animated: true)
    // and we add our toolBar with our UIButton above our someTextField keyboard)        
    someTextField.inputAccessoryView = toolBar
    }


   // Ok, here is our selector for dragButton in toolBar 

   @objc private func dragClicked(){
    
      // here we can put some code what our button should perform
        self.someTextField.endEditing(true)

      }

     }

您还可以在类下方的某处创建 UITextField 的扩展，并在那里创建自定义工具栏

Answer 2

实际上，代码非常简单。在您的视图控制器中：

//Create an IBOutlet for the text field you would like to use the extension on your storyboard
@IBOutlet weak var textField: UITextField!

override func viewDidLoad() {
    super.viewDidLoad()
    
    //Create or initiate an instance of the custom view you would like to use on top of the keyboard. 
    //The code below simply creates a green plain bar, but you can go ahead and add any buttons and other elements you need.
    let customView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 45))
    customView.backgroundColor = UIColor.green
    
    //Set the inputAccessoryView of the text field to be equal to the customView
    textField.inputAccessoryView = customView
}

我要做的是为自定义视图创建一个 .xib 文件，这可以让您更轻松地使用所有按钮和其他 UI 来设计它。 （如果你不知道如何使用 xib，你可以在这里或在 YouTube 上搜索，它们会派上用场）

或者，有一些 CocoaPods 可以做你想做的事，例如看看这个：

https://github.com/ruddfawcett/RFKeyboardToolbar