Design [Boom! App]

Before firing up Xcode and typing furiously, you need to have a plan. This is the design phase of app development. Over the lifetime of your app, you may revise your design several times as you improve it, but before you beginyou need a basic idea of what your app will look like and how you want it to work.

Your design may be written out formally, sketched on a napkin, or just be in your head. It doesn’t matter, as long as you have one. You need to, at the very least, be able to answer some basic questions. What kinds of deviceswill your app run on (iPhone/iPod, iPad, or both)? Will your app run in portrait mode, sideways, or both? What will the user see? How will the user navigate? How will they interact with it?

A rough sketch of this app is shown in Figure 2-1. The app is very simple, so it doesn’t require much in the way of initial design. The surrealist app will have an opening screen containing portraits of famous women surrealists.Tapping one will transition to a second screen showing a representative painting and a scrollable text field with information about the artist’s life. You’ve decided this is going to run only on an iPhone or iPod Touch, and only in Portrait orientation. This will simplify your design and development.

Figure 2-1. Sketch of Surrealist app

Creating the Project

The first step is to create your project. Click the New Project button on the startup window or choose the New ➤ New Project… commandReview the available templates, as shown in Figure 2-2.

Figure 2-2. iOS project templates

Your design gives you a basic idea of how your app will work, which should suggest which Xcode project template to start with. Your app’s design isn’t a perfect fit with any of these, so choose the Single View Applicationtemplate—it’s the simplest template that already has a view. Click on the Next button.

The next step is to fill in the details about your project (see Figure 2-3). Name the project Surrealists and fill in your organization name and identifier. Consistent with your design choices, change the Devices option fromUniversal to iPhone, as shown in Figure 2-3.

Figure 2-3. Setting the project details

There’s also a Class Prefix setting. This option sets a very short string that will be used to consistently name all new classes you add to your project. It’s traditionally two capital letters, but it could be anything. You’ll want toavoid the two character prefixes already used by iOS, particularly NS and UI. Leave it blank for this project—you won’t be creating any classes.

Click the Next button. Pick a location on your hard drive to save the new project and click Create.

Setting Project Properties

You now have an empty Xcode project; it’s time to start customizing it. Begin with the project settings by clicking on the project name (Surrealists) in the project navigator, as shown in the upper left of Figure 2-4. The editorarea will display all of the settings for this project. Choose the Surrealist target from the pop-up menu, in the upper-left corner of the editor (see Figure 2-4), and then choose the General tab in the middle.

Figure 2-4. Target Settings

Scroll down the target settings until you find the Deployment  Info section. Uncheck the Landscape   Left and Landscape   Right  boxes in Device  Orientation, so that only the Portrait orientation is checked.

To review, you’ve created an iPhone-only app project that runs exclusively in portrait orientation.

You’re now ready to design your interface.

Building an Interface

Click the Main.storyboard file in the project navigator. Xcode’s Interface Builder editor appears in the edit area, as shown in Figure 2-5.

Figure 2-5. Interface Builder

Interface Builder is the secret sauce in Apple’s app kitchen. In a nutshell, it’s a tool that adds, configures, and interconnects objects within your app—without writing any code. You can define most of the visual elements ofyour app in Interface Builder. Interface Builder edits storyboard, xib, and (legacy) nib files.

Interface Builder displays the objects in the file in two views. On the left (see Figure 2-5) are the objects organized into a hierarchical list, called the outline. Some objects can contain other objects, just as folders can containother folders, and the outline reflects this. Use the disclosure triangles to reveal contained objects.

The view on the right is called the canvas. Here you’ll find the visual objects in your Interface Builder file. Only visual objects (like buttons, labels, images, and so on) appear in the canvas. Objects that don’t have a visual aspectwill only be listed the outline. If an object appears in both, it doesn’t matter which one you work with—they’re the same object.