How to Add a Button to Your iOS App - dummies

How to Add a Button to Your iOS App

By Jesse Feiler

The more objects, the merrier. Let’s say you want to add a nice Test Drive button to your iOS app which, when clicked, will send our 1959 Cadillac Eldorado Biarritz convertible on its merry way. Here’s how it’s done:

1Select the Button in the Library.

Drag it onto the view.

2Click the Attributes Inspector button on the Inspector selector bar.

The button attributes you’re going to set using the Attributes inspector are all Objective-C properties. Note that you can also set these properties programmatically.

The Type pop-up menu in the Attributes inspector is set to System. The button is shown in its default State configuration — in this case, unselected and unhighlighted. If you were to click the State Config pop-up menu and choose another configuration, such as Highlighted or Selected, you’d be able to change the font, text color, shadow, background, and other attributes in the Attributes inspector for the selected state.

This particular button, being distinctly generic, is remarkably unexciting. To liven things up just a tad, you’re going to add a background image.

3In the Attributes inspector, choose Custom from the Type pop-up menu.

Custom buttons can help set you apart from the masses.

4Choose Button from the Background drop-down menu.

So why are you using the Background drop-down menu rather than the Image drop-down menu to place an image as your button? When you choose an image from the Background drop-down menu, you’re simply doing that — setting the image for the button.

You’ll still add the title and so on using the Attributes inspector. If you were to choose from the Image drop-down menu, you would have included the title as part of the image and you wouldn’t have been able to add it in the Inspector.

5Using Size inspector, resize the button to 96 points by 37 points using the width and height in the fields provided.

You can also use the resize handles.

6To center the button, select it and choose Editor→Align→Horizontal Center in Container.

Another constraint will automatically be added.

7To center it vertically, select it and choose Editor→Align→Vertical Center in Container.

The vertical constraint will be added.

8Give this button a title (buttons don’t have text; they have titles) by going back to the Attributes inspector, entering Test Drive in the Title field, and pressing Return.

You could double-click the button and enter the Title there and press Return as well. However, doing so may cause the button to resize itself.

You could select a different Background image and title for each button state by cycling through the State Config choices and repeating Steps 2 through 5.

Whenever you enter text, be sure to press Return. Anything you enter won’t change the current setting unless you press Return or click in another field.