CHAPTER 4: More User Interface Fun

109

real application, here you would do whatever processing the user requested. We’re just going to pretend we did something, and notify the user using an alert.

If the user has entered a name in the top text field, we’ll grab that, and we’ll use it in the message that we’ll display in the alert. Otherwise, we’ll just craft a generic message to show.

NSString *msg = nil;

if (nameField.text.length > 0)

msg = [[NSString alloc] initWithFormat:

@"You can breathe easy, %@, everything went OK.", nameField.text];

else

msg = @"You can breathe easy, everything went OK.";

The next lines of code are going to look kind of familiar. Alert views and action sheets are created and used in a very similar manner.

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Something was done" message:msg

delegate:nil

cancelButtonTitle:@"Phew!"

otherButtonTitles:nil];

Again, we pass a title to be displayed. We also pass a more detailed message, which is that string we just created. Alert views have delegates, too, and if we needed to know when the user had dismissed the alert view or which button was tapped, we could specify self as the delegate here, just as we did with the action sheet. If we had done that, we would now need to conform our class to the UIAlertViewDelegate protocol also, and implement one or more of the methods from that protocol. In this case, we’re just informing the user of something and giving the user only one button. We don’t really care when the button is tapped, and we already know which button will be tapped, so we just specify nil here to indicate that we don’t need to be pinged when the user is finished with the alert view.

Alert views, unlike action sheets, are not tied to a particular view, so we just tell the alert view to show itself without specifying a parent view. After that, it’s just a matter of some memory cleanup, and we’re finished. Save the file. Then build, run, and try out the completed application.

Spiffing Up the Button

If you compare your running application to Figure 4–2, you might notice an interesting difference. Your Do Something button doesn’t look like the one in the figure. And it doesn’t look like the button on the action sheet or those in other iPhone applications, does it? The default round rect button doesn’t really look that spiffy, so let’s take care of that before we finish up the app.

www.it-ebooks.info

110	CHAPTER 4: More User Interface Fun

Most of the buttons you see on your iOS device are drawn using images. Don’t worry; you don’t need to create images in an image editor for every button. All you need to do is specify a kind of template image that iOS will use when drawing your buttons.

It’s important to keep in mind that your application is sandboxed. You can’t get to the template images that are used in other applications on your iOS device or the ones used by iOS itself, so you must make sure that any images you need are in your application’s bundle. So, where can you get these image templates?

Fortunately, Apple has provided a bunch for you. You can get them from the iPhone sample application called UICatalog, available from the iOS Developer Library:

http://developer.apple.com/library/ios/#samplecode/UICatalog/index.html

Alternatively, you can simply copy the images from the 04 - Control Fun folder from this book’s project archive. Yes, it is OK to use these images in your own applications, because Apple’s sample code license specifically allows you to use and distribute them.

So, from either the 04 - Control Fun folder or the Images subfolder of the UICatalog project’s folder, add the two images named blueButton.png and whiteButton.png to your Xcode project.

If you tap one of the buttons in the project navigator, you’ll see that there’s not much to them. There’s a trick to using them for your buttons.

Go back to the nib file you’ve been working on and single-click the Do Something button. Yeah, we know, the button is now invisible because we marked it as hidden, but you should have no problem seeing the ghost image. In addition, you can also click the button in the dock’s list.

With the button selected, press 4 to open the attributes inspector. In the inspector, use the first popup menu to change the type from Rounded Rect to Custom. You’ll see in the inspector that you can specify an image for your button, but we’re not going to do that, because these image templates need to be handled a little differently.

Using the viewDidLoad Method

UIViewController, our controller’s superclass, has a method called viewDidLoad that we can override if we need to modify any of the objects that were created from our nib. Because we can’t do what we want completely in Interface Builder, we’re going to take advantage of viewDidLoad.

Save your nib. Then switch over to BIDViewController.m and look for the viewDidLoad method. The Xcode project template created an empty version of this method for you. Find it, and add the following code to it. When you’re finished, we’ll talk about what the method does.

- (void)viewDidLoad { [super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

UIImage *buttonImageNormal = [UIImage imageNamed:@"whiteButton.png"]; UIImage *stretchableButtonImageNormal = [buttonImageNormal

www.it-ebooks.info

CHAPTER 4: More User Interface Fun

111

stretchableImageWithLeftCapWidth:12 topCapHeight:0]; [doSomethingButton setBackgroundImage:stretchableButtonImageNormal

forState:UIControlStateNormal];

UIImage *buttonImagePressed = [UIImage imageNamed:@"blueButton.png"]; UIImage *stretchableButtonImagePressed = [buttonImagePressed

stretchableImageWithLeftCapWidth:12 topCapHeight:0]; [doSomethingButton setBackgroundImage:stretchableButtonImagePressed

forState:UIControlStateHighlighted];

}

This code sets the background image for the button based on those template images we added to our project. It specifies that, while being touched, the button should change from using the white image to the blue image. This short method introduces two new concepts: control states and stretchable images. Let’s look at each of them in turn.

Control States

Every iOS control has four possible control states and is always in one, and only one, of these states at any given moment:

Normal: The most common state is the normal control state, which is the default state. It’s the state that controls are in when not in any of the other states.

Highlighted: The highlighted state is the state a control is in when it’s currently being used. For a button, this would be while the user has a finger on the button.

Disabled: Controls are in the disabled state when they have been turned off, which can be done by unchecking the Enabled checkbox in Interface Builder or setting the control’s enabled property to NO.

Selected: Only some controls support the selected state. It is usually used to indicate that the control is turned on or selected. Selected is similar to highlighted, but a control can continue to be selected when the user is no longer directly using that control.

Certain iOS controls have attributes that can take on different values depending on their state. For example, by specifying one image for UIControlStateNormal and a different image for UIControlStateHighlighted, we are telling iOS to use one image when the user has a finger on the button and a different image the rest of the time.

Stretchable Images

Stretchable images are an interesting concept. A stretchable image is a resizable image that knows how to resize itself intelligently so that it maintains the correct appearance. For these button templates, we don’t want the edges to stretch evenly with the rest of the image. End caps are the parts of an image, measured in pixels, that should not be

www.it-ebooks.info