How can I add a toolbar above the keyboard?

Question

I have created a UIToolBar programmatically and added a UITextField on it. Now, I need that toolbar to be above the keyboard when I click in another text field.

UIToolbar *toolBar=[[UIToolbar alloc]initWithFrame:CGRectMake(0,400, 320, 60)];
[self.view addSubview:toolBar];

UITextField *txtView=[[UITextField alloc]initWithFrame:CGRectMake(0, 400, 260, 30)];
txtView.backgroundColor =[UIColor  grayColor];
txtView.placeholder=@"Address";
UIBarButtonItem *txtfieldItem=[[UIBarButtonItem alloc]initWithCustomView:txtView];
toolBar.items =[NSArray arrayWithObject:txtfieldItem];

Miksen

you already have the answer here. plz check into it... https://mcmap.net/q/266370/-displaying-suggestion-toolbar-above-ios-keyboard – Chambertin

possible duplicate of How to get keyboard with Next, Previous and Done Button? – Jeffereyjefferies

textField.inputAccessoryView = yourToolBar; – Dianthus

There is a newer way to do it than using a UIToolBar, pinkstone.co.uk/… – Lipetsk

Answer 1

UIToolbar* numberToolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, 50)];
numberToolbar.barStyle = UIBarStyleBlackTranslucent;
numberToolbar.items = [NSArray arrayWithObjects:
                               [[UIBarButtonItem alloc]initWithTitle:@"Cancel" style:UIBarButtonItemStyleBordered target:self action:@selector(cancelNumberPad)],
                               [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],
                               [[UIBarButtonItem alloc]initWithTitle:@"Done" style:UIBarButtonItemStyleDone target:self action:@selector(doneWithNumberPad)],
                               nil];
[numberToolbar sizeToFit];
phonenumberTextField.inputAccessoryView = numberToolbar;

To Dismiss Keyboard:

[[UIApplication sharedApplication] sendAction:@selector(resignFirstResponder) to:nil from:nil forEvent:nil];

---

Swift 3:

let numberToolbar = UIToolbar(frame: CGRectMake(0, 0, UIScreen.mainScreen().bounds.width, 50))
numberToolbar.barStyle = UIBarStyle.Default
numberToolbar.items = [
            UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.Plain, target: self, action: "cancelNumberPad"),
            UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil),
            UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Plain, target: self, action: "doneWithNumberPad")]
    numberToolbar.sizeToFit()
    phonenumberTextField.inputAccessoryView = numberToolbar

Swift 4.2:

let numberToolbar = UIToolbar(frame:CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 50))
numberToolbar.barStyle = .default
numberToolbar.items = [
UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(cancelNumberPad)),
UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(doneWithNumberPad))]
numberToolbar.sizeToFit()
phonenumberTextField.inputAccessoryView = numberToolbar

...

@objc func cancelNumberPad() {
    //Cancel with number pad
}
@objc func doneWithNumberPad() {
    //Done with number pad
}

Poppied

Or it can be done using storyboard like here – Leucocratic

you can add this to all textfields by doing UITextField.appearance().inputAccessoryView = /* your tool bar setup code */ – Sciamachy

in swift 4 selector should be like this: UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.done, target: self, action: #selector(self.OnTapDone(_:))) – Cloche

Toolbar width should be set based on screen-size not view-size, editing that in now along with a method to dismiss keyboard – Bedwell

Answer 2

You do not need to do this in code anymore.

1. Just simply drag UIView to the top bar of current scene and customize it as you want.

2. In code simply put IBOutlet for both: toolbarView and textView and make connections.

   @IBOutlet private var toolbarView: UIView!
   @IBOutlet private var textView: UITextView!
   

3. In viewDidLoad setup your toolbarView as accessoryView of your UItextView.

   override func viewDidLoad() {
       super.viewDidLoad()
   
       textView.inputAccessoryView = toolbarView
   }
   

The result is following:

Plantain

for alertView input text you can use this: alert.textFields?.first?.inputAccessoryView = toolbarView – Waterlogged

This is really great :) useful for textfields too. – Litigant

Answer 3

For swift (1.2):

let numberToolbar = UIToolbar(frame: CGRectMake(0, 0, self.view.frame.size.width, 50))
numberToolbar.barStyle = UIBarStyle.Default

numberToolbar.items = [
    UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.Plain, target: self, action: "keyboardCancelButtonTapped:"),
    UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil),
    UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Plain, target: self, action: "keyboardDoneButtonTapped:")]

numberToolbar.sizeToFit()
yourTextView.inputAccessoryView = numberToolbar

Helmholtz

Answer 4

You Can Use this code it work for me.

-(void)viewdidload
{
 UIToolbar* keyboardDoneButtonView = [[UIToolbar alloc] init];
 [keyboardDoneButtonView sizeToFit]; 
 UIBarButtonItem* doneButton = [[UIBarButtonItem alloc] initWithTitle:@"Done"
                                                        style:UIBarButtonItemStyleBordered target:self
                                                                  action:@selector(doneClicked:)];
  [keyboardDoneButtonView setItems:[NSArray arrayWithObjects:doneButton, nil]];
  textField.inputAccessoryView = keyboardDoneButtonView;
 }
-(void)doneClicked:(id)sender
{
NSLog(@"Done Clicked.");
[self.view endEditing:YES];
} 

Langevin

Answer 5

You can use the UITextFields inputAccessoryView property

    txtField.inputAccessoryView = toolBar;

Meeks

Answer 6

Swift 3

    let toolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 50))
    toolBar.barStyle = UIBarStyle.default
    toolBar.items = [
        UIBarButtonItem(title: "Button1", style: UIBarButtonItemStyle.plain, target: self, action: #selector(test2)),
        UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil),
        UIBarButtonItem(title: "Button2", style: UIBarButtonItemStyle.plain, target: self, action: #selector(test1))]
    toolBar.sizeToFit()

    myTextField.inputAccessoryView = toolBar

Rosaliarosalie

Answer 7

Swift 5.0 and above

           let toolBar = UIToolbar(frame: CGRect(x: 0.0,
                                                  y: 0.0,
                                                  width: UIScreen.main.bounds.size.width,
                                                  height: 44.0))//1
            let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)//2
            let DoneButton = UIBarButtonItem(title: "Done", style: .plain, target: target, action: #selector(tapDone))//3
            toolBar.setItems([flexibleSpace, DoneButton], animated: false)
           textField.inputAccessoryView = toolBar
       // Done Action
        @objc func tapDone() {
           self.view.endEditing(true)
         }

Mccabe

Answer 8

textField.inputAccessoryView=[weakSelf addToolBar];
[textField setKeyboardType:UIKeyboardTypeNumberPad];

and add a method

-(UIToolbar *)addToolBar
{

    UIBarButtonItem *done=[[UIBarButtonItem alloc]initWithTitle:@"DONE" style:UIBarButtonItemStyleDone target:self action:@selector(done:)];
    UIToolbar *toolBar=[[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 30)];
    NSArray* toolBarItems=[[NSArray alloc]initWithObjects:done, nil];
    [toolBar setItems:toolBarItems];
    return toolBar;
}

Irrespective

The first part is add the toolbar in the top of keyboard. and second is created toolbar – Irrespective

Thank you for interesting in ios – Irrespective

@DURGESHKUMAR Can you please explain this line? textField.inputAccessoryView=[weakSelf addToolBar]; – Bolshevism

Answer 9

In Swift 3 and 4

 let toolBar = UIToolbar()
 toolBar.barStyle = UIBarStyle.default
 toolBar.isTranslucent = true
 toolBar.isUserInteractionEnabled = true
 toolBar.sizeToFit()
 toolBar.items = [
        UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.plain, target: self, action: #selector(self.sendCodeBtnAction(sender:)))]

    tfPhone.inputAccessoryView = toolBar

Legged