Display toolbar with keyboard in iOS

Keyboard is the most basic component that we use to interact with our application, input data to a field.
In most of the cases the buttons available on default keyboard is enough to fulfill the requirement but to make the application more interactive, intuitive we may tend to add some stuffs, controls over keyboard to aid our requirement in an elegant way.

For an example, consider a situation where user needs to input some description in a UITextView on a screen.
One way could be that you use the keyboard return/done tap event to dismiss the keyboard and that may sound okay, but what if user wanted to supply a line break (paragraph) in his description text. In this case, user has no way but to leave it as it is, henceforth leaving a user down.

Other way could be display a pair of buttons, "Cancel" "Apply" , in the top on the navigation bar of screen. This will again work, but from a users perspective, user needs to type some 100 characters on keyboard and move his thumb all the way up to reach those abandoned buttons. Again a no-no from user point of view.

Now, what if we add a toolbar right above the keyboard with those "Cancel", "Apply" button. Yeay!!!
Like this..Sounds good.

How to do it ???

There could be plenty of ways to show a toolbar above keyboard, like adding a custom view on self view, animating the view all the way from bottom to keyboard height with matching keyboard animation speed and again reversing the sequence when keyboard goes away. Annoying.. (Not to mention, I used to the same before coming to know the best solution).

Yes, the solution itself is in the UITextField and UITextView classes in the "inputAccessoryView" property.
It is an accessory view to display when the UITextField or UITextView becomes first responder. and this accessory view is displayed right above the keyboard, as we wanted for our problem.

For example we can create a custom view or a xib with toolbar and required buttons and set the inputAccessoryView as our view. The supplied view will be displayed above the keyboard.

It can be done as below,

UIView *accessoryView=[[[NSBundle mainBundle] loadNibNamed:@"AccessoryView" owner:self options:nil] lastObject];

    _textField.inputAccessoryView=accessoryView;

//    _textField.inputView=accessoryView;    

    accessoryView=nil;

Here, we are loading a custom xib "AccessoryView" and assigning it to the inputAccessoryView of the current responder textField. Thus the AccessoryView will be displayed above the keyboard with "Cancel" and "Apply" buttons.

To add, "inputView" property of UITextField and UITextView classes is the view to be displayed when they become the first responder.
For example, if in above code "inputAccessoryView" is replaced by "inputView", it will show "AccessoryView" only when the textField becomes first responder i.e, keyboard won't be there.

"inputAccessoryView" are useful in more cases like to display auto complete text, display addition characters, smileys etcs while user types. This may look elegant and usable in any way! Like this one,

More info on "inputAccessoryView" and "inputView" can be found here.

You can download an example code and checkout yourself.

Hope this helps.

Follow @twitterapi

Tweet