How to add buttons above keyboard

Question

How to add button above the keyboard like this one in Stack Exchange app? And when you long press the text in UITextView How to add "Select" and "Select All"?

Answer 1

I would recommend to create a toolbar for your UITextField's accessoryView property.

The idea is to add this toolbar once, before the textfield would show for the first time. Therefore, we assign the delegate to self, and override the textFieldShouldBeginEditing delegate call with our implementation to add the accessoryView.

Here is a simple example, how can u achieve it:

import UIKit

class ViewController: UIViewController {
    // your `UITextfield` instance
    // Don't forget to attach it from the IB or create it programmaticly
    @IBOutlet weak var textField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Assign the delegate to self
        textField.delegate = self
    }
}

// MARK: Create extension to conform to UITextfieldDelegate
extension ViewController: UITextFieldDelegate {
    func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool {
        setupTextFieldsAccessoryView()
        return true
    }

    func setupTextFieldsAccessoryView() {
        guard textField.inputAccessoryView == nil else {
            print("textfields accessory view already set up")
            return
        }

        // Create toolBar
        let toolBar: UIToolbar = UIToolbar(frame:CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 44))
        toolBar.barStyle = UIBarStyle.black
        toolBar.isTranslucent = false

        // Add buttons as `UIBarButtonItem` to toolbar
        // First add some space to the left hand side, so your button is not on the edge of the screen
        let flexsibleSpace: UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil) // flexible space to add left end side

        // Create your first visible button
        let doneButton: UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.done, target: self, action: #selector(didPressDoneButton))
        // Note, that we declared the `didPressDoneButton` to be called, when Done button has been pressed
        toolBar.items = [flexsibleSpace, doneButton]

        // Assing toolbar as inputAccessoryView
        textField.inputAccessoryView = toolBar
    }

    func didPressDoneButton(button: UIButton) {
        // Button has been pressed
        // Process the containment of the textfield or whatever

        // Hide keyboard
        textField.resignFirstResponder()
    }
}

This should be your output:

Answer 2

to add a toolbar with a done button which dismisses the keyboard above a UITextField you can write a UITextField extension with the following function:

public func addAccessoryView() {
    let doneButton = UIBarButtonItem.init(barButtonSystemItem: UIBarButtonSystemItem.Done, target: self, action: "resignFirstResponder")
    let flexSpace: UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: self, action: nil)
    let toolbar = UIToolbar()
    toolbar.barStyle = UIBarStyle.Default
    toolbar.translucent = true
    toolbar.tintColor = Color.blue
    toolbar.sizeToFit()
    toolbar.setItems([flexSpace, doneButton], animated: false)
    toolbar.userInteractionEnabled = true
    self.inputAccessoryView = toolbar
}

you can then call the function in your textfield like this:

textfield.addAccessoryView()

Answer 3

The first question, you can set textField's inputAccessoryView to your custom view, this can customize the keyboard's header.

The result:

You can do it like below;

first, you should instance the view you want to add above the keyboard.

class ViewController : UIViewController {

@IBOutlet weak var textField: UITextField!
override func viewDidLoad() {
    super.viewDidLoad()

    textField.inputAccessoryView = Bundle.main.loadNibNamed("CustomAccessoryView", owner: self, options: nil)?.first as! UIView?

In your CustomAccessoryView, you can set the action of the button:

import UIKit

class CustomAccessoryView: UIView {

    @IBAction func clickLoveButton(_ sender: UIButton) {

        print("Love button clicked")
    }
}

Answer 4

Just copy and paste simple code for you accessory button embedded with keypad

func addKeyboardToolbar()  {
    let ViewForDoneButtonOnKeyboard = UIToolbar()
    ViewForDoneButtonOnKeyboard.sizeToFit()
    let button = UIButton.init(type: .custom)
    button.setImage(UIImage.init(named: "login-logo"), for: UIControlState.normal)
    button.addTarget(self, action:#selector(doneBtnfromKeyboardClicked), for:.touchUpInside)
    button.frame = CGRect.init(x: 0, y: 0, width:UIScreen.main.bounds.width, height: 30) //CGRectMake(0, 0, 30, 30)
    let barButton = UIBarButtonItem.init(customView: button)
    ViewForDoneButtonOnKeyboard.items = [barButton]
    postTextView.inputAccessoryView = ViewForDoneButtonOnKeyboard
}


func doneBtnfromKeyboardClicked (){
        self.contentView.endEditing(true)
    }