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"?

Solution 1

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")
    }
}

Solution 2

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:

Solution 3

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)
    }

Solution 4

You'll have to use the inputAccessoryView of your textfield.

you can put the code snippet below in your viewDidLoad():

 override func viewDidLoad() {
    super.viewDidLoad()
      let button = UIButton(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 60))
      button.backgroundColor = UIColor.blue
      button.setTitle("NEXT", for: .normal)
      button.setTitleColor(UIColor.white, for: .normal)
      button.addTarget(self, action: #selector(self. yourButton), for: .touchUpInside)
      numtextField.inputAccessoryView = button

 }

 @objc func nextButton()
 {
      print("do something")
 }

View more solutions

Comments

[Jovan Milosavljevic]

When i am adding a XIB file which class do i implement, because UIView doesn't allow me to create XIB file?

[Jovan Milosavljevic]

It worked :D How to connect that button with UITextView in another ViewController so When that button is tapped in my TextView selected text should be Bold?