Custom Keyboard tool bar in Swift

In this article, I would like to show you how to custom ToolBar for keyboard using UIToolBar in Swift.

I will create custom class for ToolBar KeyboardToolBar: UIToolBar .

class KeyboardToolBar: UIToolbar {
  lazy var flexibleSpace: UIBarButtonItem = {
    let bar = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    return bar
  }()
  lazy var titleLabel: UILabel = {
    let label = UILabel(frame: CGRect.zero) label.translatesAutoresizingMaskIntoConstraints = false
    label.tintColor = .gray
    label.textAlignment = .center
    return label
  }()
  lazy var doneButtonItem: UIBarButtonItem = {
    let button = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(doneButtonClicked))
    return button
  }()
  lazy var doneButton: UIButton = {
    let button = UIButton()
    button.setTitle("Done", for: .normal)
    button.setTitleColor(.systemBlue, for: .normal)
    button.addTarget(self, action: #selector(doneButtonClicked), for: .touchUpInside)
    return button
  }()
  private var title: String?
  private var onDoneButtonClicked: () -> Void = {}
  override init(frame: CGRect) {
    super.init(frame: frame)
  }
  required init?(coder: NSCoder) {
    super.init(coder: coder)
  }
  // MARK: - User Interaction
  @objc func doneButtonClicked() {
    onDoneButtonClicked()
  }
  // MARK: - Helper
  func configure(title: String?, onDoneButtonClicked: @escaping () -> Void) {
    self.title = title
    self.onDoneButtonClicked = onDoneButtonClicked
    setupView()
  }
  private func setupView() {
    titleLabel.text = title
    let labelItem = UIBarButtonItem(customView: titleLabel)
    self.sizeToFit()
    self.setItems([flexibleSpace, labelItem, flexibleSpace, doneButtonItem], animated: true)
  }
}

And, Implement this class on your ViewController.

@IBOutlet weak var textField: UITextField!
let keyboardToolBar = KeyboardToolBar()
override func viewDidLoad() {
  super.viewDidLoad()
  keyboardToolBar.configure(title: "Your title", onDoneButtonClicked: {
    self.textField.resignFirstResponder()
  })
  textField.inputAccessoryView = keyboardToolBar
}