Adding Objects [Boom! App]

You get new objects from the library. Choose the View ➤ Utilities ➤ Show Object Library command.

This will simultaneously make the utility area on the right visible and switch to the object library (the little cube), as shown in Figure 2-6.

Figure 2-6. Object Library

To add an object to your app, drag it from the library and drop it into the Interface Builder editor. Your app needs a navigation controller object, so scroll down the list of objects until you 

find the Navigation Controller. You cansimplify your search by entering a keyword into the search field at the bottom of the library pane (see Figure 2-7).

Figure 2-7. Adding a Navigation Controller

Drag the navigation controller object from the library into the canvas, as shown in Figure 2-7, and drop it anywhere in the blank space. You just added an object—several, actually—to your app.

Deleting and Connecting Objects

The library’s navigation controller object is really a cluster of objects. A navigation controller, as the name implies, manages how a user moves between multiple screens, each screen being controlled by a single view controllerobject. The navigation controller is connected to the view controller of the first screen that will appear, called its root view controller. Don’t worry about the details; you’ll learn all about navigation controllers in Chapter 12.

For your convenience, the navigation controller in the library creates both a navigation controller object and the root view controller that it starts with. This root view controller happens to be a table view controller. You don’t needa table view controller. Instead, you want this navigation controller to use the no-frills view controller you already have.

Start by discarding the superfluous table view controller. Select just the table view controller that’s connected to the navigation controller, as shown in Figure 2-8. Press the Delete key, or choose Edit ➤ Delete.

Figure 2-8. Deleting the table view controller

Now you need to connect your new navigation controller to the plain-vanilla view controller your project came with. Drag the view controller and position it to the right of the navigation controller (see Figure 2-9).

Figure 2-9. Designating the initial view controller

The unconnected arrow attached to the view controller indicates the initial view controller for your app. You want to make the navigation controller the first controller, so drag the arrow away from the simple view controller anddrop it into the navigation view controller, as shown in Figure 2-9.

The last step is to reestablish the navigation controller’s connection with its root view controller. There are numerous ways of making connections in Interface Builder. I’ll show you the two most popular. Hold down the controlkey, click on the navigation controller, and then drag a line from it to the view controller, as shown in Figure 2-10.

Figure 2-10. Setting the root view controller connection

When you release the mouse, a pop-up menu will appear listing all of the possible connections between these two objects. Click the root view controller connection. Now the navigation controller will present this view controlleras the first screen when your app starts.

I did promise to teach you two ways of connecting objects. The second method is to use the connections inspector in the utility area. Choose View ➤ Utilities ➤ Show Connections Inspector, or click on the little arrow iconin the utilities pane, as shown in Figure 2-11.

Figure 2-11. Using the connections inspector

To use the inspector, first choose an object. In this case, choose the navigation controller. The connections inspector will show all of the connections for that object. Find the connection labeled root view  controller. To theright of each connection is a little circle. To set a connection, click

and drag that circle to the object you want it connected to—in this case, the view controller. To clear

(or “break”) a connection, click the small “x” in the connection field.

So far, you’ve created a new project. The project template included a simple view controller. You added a new navigation controller object (along with an unneeded table view controller, which you discarded) to your app. Youdesignated the navigation controller as the one that takes control of your app when it starts, and you connected that controller to the empty view controller. Now it’s time to put something in that empty view.

Adding Views to a View

Now we get to the fun part of this project: creating your app’s content. Start by adding four buttons, which you’ll customize, to your opening screen. To do that, you need to work in your initial screen’s view object.

The view controller object is not a single object, it’s a bag of objects. I said earlier that some object may contain other objects; view controllers and views are two such objects. Start by selecting the view object. There are twoways of doing this in Interface Builder. You can find the object in the outline on the left (see Figure 2-12), and select it. The other is to “drill down” to the object you want. Click in the center of the view controller object (in themiddle of Figure 2-12). This will select the view controller object. Click again and you’ll select the view object contained in that object. If that view contained another object, clicking again would select it, and so on.

Figure 2-12. Selecting the view object

Now that you know how to find and select an embedded view object, it’s time to add some new view objects to it. In the object library, find the Button  object—type “button”  in the search field to make this easier. Grab a Button object and drag it into the view object, as shown in Figure 2-13.

Figure 2-13. Adding a button object

Repeat this three more times, so you have four button objects inside the view, approximately like those shown in Figure 2-14. Now you want to resize these buttons so they fill the entire screen. To help you lay them out evenly,add some guides. Click inside the superview so that none of the button objects are selected and choose Editor ➤ Add Vertical Guide. By default, a new guide is created in the middle of the view, which is exactly what you want.

Figure 2-14. Positioning buttons

Using the guides, position and resize each button so it fills one quarter of the view. Start by dragging the button to the lower left corner of a quadrant. The view will “snap” to the nearest layout 

guide. Grab the opposite resizinghandle and drag it out to fill the quadrant, as shown in

Figure 2-14. It doesn’t have to be perfect at this stage; you’ll neaten this up later in the chapter.

When you’re all done, you’ll have four buttons that fill the screen (see Figure 2-15).

Figure 2-15. Customizing button objects

Editing Object Properties

Now it’s time to customize your buttons. Select all four buttons—click on one button, and then while holding down the shift key, click once on each of the other three. Choose View ➤ Utilities ➤ Show Attributes  Inspector, or click on thesmall control icon in the inspector pane, as shown in Figure 2-15.

The attributes inspector is used to change various properties about an object (or objects). The properties in the inspector will change depending on what kind of object you have selected. If you select multiple objects, theinspector will present just those properties that all of those objects have in common.

With the four buttons selected, make the following changes using the attributes inspector:

n     Change Type to Custom

n     Click the up arrow next to the font attribute until it reads System  Bold  18.0

n     Click the Text Color drop-down arrow and choose white

n     Find the Control group and select the bottom vertical alignment icon

When you’re all done, your view should look like the one in Figure 2-16. The next step is to add an image and a label to each one, individually. To do that, you’re going to need to add some resources to your project.

Figure 2-16. Customized buttons