iPhone Keyboard Tutorial Part 3 – add a toolbar to the keyboard

This is part three of a tutorial on the keyboard. We’ve learned how to dismiss the keyboard when a user either selects the return key, or touches elsewhere on the screen. We’ve also learned how to scroll or view behind the keyboard so that the current text field is always viewable. Now we are going to look at adding our own custom toolbar to the keyboard that will hold buttons to tab through the text fields and also a button to dismiss the keyboard. let’s get started

You can get the code from part 2 here.

1.) First thing to do is open our header file and add some things. We are going to want to add an IBOutlet for our tool bar, an NSArray, two IBActions and a bar button. Here’s what our header file will look like after we add our new elements.

Header File

2.) Next we need to open our implementation file and implement our array. This will happen in the viewDidLoad method and we just need to initialize it with our textFields.

viewDidLoad method

3.) In our textFieldDidBeginEditing method we need to set our inputAccessoryView property to the toolbar.

setting our inputAccessoryView

I added it to the top of the method here. We also need to look through our text field array and find the one we are currently editing. I added this for loop at the bottom of the method.

loop through text fields array

4.) Let’s implement the next method.

next method

5.) And the previous method

previous method

You are now done in the implementation file you can save and close it.

6.) Double click KeyboardTestViewController.xib to open it up in Interface Builder. We need to add our tool bar. Find the UIToolbar in the Library and drag it into our document under where you see Control.

sib window

Make sure Toolbar is not in Control, but under it instead.

7.) Add a reference from the Toolbar to the File’s Owner. You can do this by making sure Toolbar is selected, go to Connections Inspector (common 2), click the little circle next to New Referencing Object and drag to File’s Owner, then select toolbar from the list that pops up.

Connecting the toolbar to the outlet

8.) Now we need to open the toolbar item itself. Double click Toolbar in the document window.

Toolbar Item

9.) We need to add two more buttons to the toolbar. Drag a Bar Button Item onto the toolbar.

Library

Then drag a Flexible Space Bar Button Item onto the toolbar, and finally add another BarButtonItem to the right end of the toolbar.

Toolbar with three buttons

10.) Now let’s change the names of the buttons. Select the first button and change it’s Title in the Attributes Inspector (command 1), change the first one Prev.

Attributes Inspector

11.) Repeat step 7 for the last two buttons naming them Next and Close.

Final Toolbar look

12.) Next we need to link our buttons to the IBActions we created. Select File’s Owner in the document window, then go to Connections Inspector (command 2). You see the two new IBActions in the Received Actions sections along with our other actions. Click the little circle next to the action named previous and drag to the Prev button on the tool bar. The drag from the little circle next to next to the Next button. And finally drag from the little circle next to our dismissKeyboard action we created last time and connect it to the Close button.

Connect our buttons to the IBActions

That’s it, save everything click Build and Run and admire the keyboard toolbar.

Here’s the code.

This entry was posted in Keyboard and tagged , , , , , , . Bookmark the permalink.

13 Responses to iPhone Keyboard Tutorial Part 3 – add a toolbar to the keyboard

  1. itay says:

    I was looking for something just like this. Thanks could be perfect for me.

  2. Ali says:

    Kent – I am just starting out in writing code of the iPhone/iPad, so thanks for all the effort you’ve put into these tutorials (I’ve downloaded all of them!)

  3. Marcal says:

    I works great!, as usual.

    I’m trying to do a variation of that and I’ve come to have a problem. I posted it here:

    https://devforums.apple.com/thread/119512?tstart=0

    could you give me your 2 cents about it?
    I didn’t want ask directly in your coments because it’s a little long to explain.

    thanks!

    • Kent says:

      Hey Marcal, a little behind on the comments and just now replying to yours. Looks like you got the issue solved. Is that true? Are you still hung up on something?

      The reason your condition was always true when putting it in viewDidLoad was because viewDidLoad only gets called the very first time that view is loaded. So whatever the condition was at that time it was going to stay for the duration of the time you had the app open.

      Let me know if you are still having issues.

      Thanks,
      Kent

  4. Snuffy says:

    “The reason your condition was always true when putting it in viewDidLoad was because viewDidLoad only gets called the very first time that view is loaded. ”

    Not at all. -viewDidLoad gets called every time the view is LOADED. There is a difference between the view being loaded and the view APPEARING.

    If a view gets unloaded due to a memory warning or otherwise, it will have to be reloaded by the controller, and -viewDidLoad will indeed be called, even though it is not “the very first time that view is loaded.”

  5. Toby says:

    Hi, this is very helpful. I am trying to find part 2 and part 1 of this series because they sound very useful, too, but I cannot find it with the built-in search function. Could you please post the links?

    Thanks,
    Toby

  6. Robert Vukovic says:

    Hi Kent,

    Thank you for this tutorial. I think I have found a bug in your example. There is variable barButton that is never set and I see that is should change the button title. But I was not able to get this functionality, buttons always stay Prev/Next.
    Can you please explain how to initialize this barButton?

    Thanks!

  7. Aman Sinha says:

    I tried your way for the keypad next and previous but its not supporting in landscape mode.Can u please help me out?What changes do i need to make???please reply…

  8. Alexandre Viennot says:

    Hi,

    Thank you for this tutorial, I would like to know how to disable the filling of the central bar on a split keyboard. I do not know if my explanation is clear but when the keyboard is split the central area is full.

    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>