How to Add a Toolbar to Your iOS App
How to Add a Background Image to Your iOS App
How to Use the Library Pane for iOS App Development

How to Add a Button to Your iOS App

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:

1

Select the Button in the Library.

Drag it onto the view.

2

Click 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.

3

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

Custom buttons can help set you apart from the masses.

4

Choose 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.

5

Using 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.

6

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

Another constraint will automatically be added.

7

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

The vertical constraint will be added.

8

Give 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.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Use Inspector and Quick Help Pane for iOS App Development
How to Create an Outlet for the Map Controller in Your iOS App
How to Use a Navigation Controller in the Master View for Your iOS App
How to Add the Events Controller to Your iOS App
How to Create an iOS App
Advertisement

Inside Dummies.com