CHAPTER 4: More User Interface Fun

91

Closing the Keyboard

Let’s see how our app works, shall we? Select Product Run. Your application should come up in the iPhone simulator. Click the Name text field. The traditional keyboard should appear. Type in a name. Now, tap the Number field. The numeric keypad should appear (see Figure 4–17). Cocoa Touch gives us all this functionality for free just by adding text fields to our interface.

Figure 4–17. The keyboard comes up automatically when you touch either the text field or the number field.

Woo-hoo! But there’s a little problem. How do you get the keyboard to go away? Go ahead and try. We’ll wait right here while you do.

Closing the Keyboard When Done Is Tapped

Because the keyboard is software-based, rather than a physical keyboard, we need to take a few extra steps to make sure the keyboard goes away when the user is finished with it. When the user taps the Done button on the text keyboard, a Did End On Exit event will be generated, and at that time, we need to tell the text field to give up control so that the keyboard will go away. In order to do that, we need to add an action method to our controller class.

www.it-ebooks.info

92	CHAPTER 4: More User Interface Fun

Select BIDViewController.h in the project navigator, and add the following line of code, shown in bold:

#import <UIKit/UIKit.h>

@interface BIDViewController : UIViewController

@property (strong, nonatomic) IBOutlet UITextField *nameField; @property (strong, nonatomic) IBOutlet UITextField *numberField;

- (IBAction)textFieldDoneEditing:(id)sender;

@end

When you selected the header file in the project navigator, you probably noticed that the assistant we opened earlier has adapted to having a source code file selected in the main editor pane, and now automatically shows the selected file's counterpart. If you select a .h file, the assistant will automatically show the matching .m file, and vice versa. This is a remarkably handy addition to Xcode 4! As a result of this behavior, BIDViewController.m is now shown in the assistant view, ready for us to implement this method.

Add this action method at the bottom of BIDViewController.m, just before the @end:

- (IBAction)textFieldDoneEditing:(id)sender { [sender resignFirstResponder];

}

As you learned in Chapter 2, the first responder is the control with which the user is currently interacting. In our new method, we tell our control to resign as a first responder, giving up that role to the previous control the user worked with. When a text field yields first responder status, the keyboard associated with it goes away.

Save both of the files you just edited. Let’s hop back to the nib file and trigger this action from both of our text fields.

Select BIDViewController.xib in the project navigator, single-click the Name text field, and press 6 to bring up the connections inspector. This time, we don’t want the Touch Up Inside event that we used in the previous chapter. Instead, we want Did End On Exit, since that event will fire when the user taps the Done button on the text keyboard.

Drag from the circle next to Did End On Exit to the File’s Owner icon, and connect it to the textFieldDoneEditing: action. You can also do this by dragging to the textFieldDoneEditing: method in the assistant view. Repeat this procedure with the other text field, save your changes, and then press R to run the app again.

When the simulator appears, click the Name field, type in something, and then tap the Done button. Sure enough, the keyboard drops away, just as you expected. All right! What about the Number field, though? Um, where’s the Done button on that one (see Figure 4–17)?

www.it-ebooks.info

CHAPTER 4: More User Interface Fun

93

Well, crud! Not all keyboard layouts feature a Done button. We could force the user to tap the Name field and then tap Done, but that’s not very user-friendly, is it? And we most definitely want our application to be user-friendly. Let’s see how to handle this situation.

Touching the Background to Close the Keyboard

Can you recall what Apple’s iPhone applications do in this situation? Well, in most places where there are text fields, tapping anywhere in the view where there’s no active control will cause the keyboard to go away. How do we implement that?

The answer is probably going to surprise you because of its simplicity. Our view controller has a property called view that it inherited from UIViewController. This view property corresponds to the View in the nib file. The view property points to an instance of UIView in the nib that acts as a container for all the items in our user interface. It has no appearance in the user interface, but it covers the entire iPhone window, sitting “below” all of the other user interface objects. It is sometimes referred to as a nib’s container view because its main purpose is to simply hold other views and controls. For all intents and purposes, the container view is the background of our user interface.

Using Interface Builder, we can change the class of the object that view points to so that its underlying class is UIControl instead of UIView. Because UIControl is a subclass of UIView, it is perfectly appropriate for us to connect our view property to an instance of UIControl. Remember that when a class subclasses another object, it is just a more specific version of that class, so a UIControl is a UIView. If we simply change the instance that is created from UIView to UIControl, we gain the ability to trigger action methods. Before we do that, though, we need to create an action method that will be called when the background is tapped.

We need to add one more action to our controller class. Add the following line to your

BIDViewController.h file:

#import <UIKit/UIKit.h>

@interface BIDViewController : UIViewController

@property (strong, nonatomic) IBOutlet UITextField *nameField; @property (strong, nonatomic) IBOutlet UITextField *numberField;

-(IBAction)textFieldDoneEditing:(id)sender;

-(IBAction)backgroundTap:(id)sender;

@end

Save the header file.

Now, switch over to the implementation file and add the following method at the end of the file, just before @end:

- (IBAction)backgroundTap:(id)sender { [nameField resignFirstResponder]; [numberField resignFirstResponder];

}

www.it-ebooks.info

94	CHAPTER 4: More User Interface Fun

This method simply tells both text fields to yield first responder status if they have it. It is perfectly safe to call resignFirstResponder on a control that is not the first responder, so we can call it on both text fields without needing to check whether either is the first responder.

TIP: You’ll be switching between header and implementation files a lot as you code. Fortunately, in addition to the convenience provided by the assistant, Xcode also has a key combination that will switch between counterparts quickly. The default key combination is ^ , although you

can change it to anything you want using Xcode’s preferences.

Save this file. Now, select the nib file again. Make sure your dock is in list mode (click the triangle icon to the bottom right of the dock to switch to list view). Single-click View so it is selected. Do not select one of your view’s subitems. We want the container view itself.

Next, press 3 to bring up the identity inspector (see Figure 4–18). This is where you can change the underlying class of any object instance in your nib file.

Figure 4–18. We switched Interface Builder to list view, and then selected our view. We then switched to the identity inspector, which allows us to change the underlying class of any object instance in our nib.

The field labeled Class should currently say UIView. If not, you likely don’t have the container view selected. Now, change that setting to UIControl. Press return to commit the change. All controls that are capable of triggering action methods are subclasses of UIControl, so by changing the underlying class, we have just given this view the ability to trigger action methods. You can verify this by pressing 6 to bring up the connections inspector. You should now see all the events that you saw when you were connecting buttons to actions in the previous chapter.

Drag from the Touch Down event to the File’s Owner icon (see Figure 4–19), and choose the backgroundTap: action. Now, touches anywhere in the view without an active control will trigger our new action method, which will cause the keyboard to retract. Connecting to File’s Owner like this is exactly the same as connecting to the method in the code. For a view controller nib file, the File’s Owner is the view controller class, so that was just a slightly different way of achieving the exact same result.

www.it-ebooks.info