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.
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.
3.) In our textFieldDidBeginEditing method we need to set our inputAccessoryView property to the toolbar.
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.
4.) Let’s implement the next method.
5.) And the 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.
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.
8.) Now we need to open the toolbar item itself. Double click Toolbar in the document window.
9.) We need to add two more buttons to the toolbar. Drag a Bar Button Item onto the toolbar.
Then drag a Flexible Space Bar Button Item onto the toolbar, and finally add another BarButtonItem to the right end of the toolbar.
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.
11.) Repeat step 7 for the last two buttons naming them Next and Close.
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.
That’s it, save everything click Build and Run and admire the keyboard toolbar.