第4页 | Beginning IOS Programming_ Building and Deploying IOS Applications | 阅读 ‧ 电子书库

Chapter 3
Starting a New App

WHAT YOU LEARN IN THIS CHAPTER:

Creating a new project in XcodeExploring Xcode’s layout and editorsUsing Interface Builder to edit StoryboardsRunning your app in the simulator and on a device

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER

You can find the wrox.com code downloads for this chapter at www.wrox.com/go/begiosprogramming on the Download Code tab. The code is in the chapter 03 download and individually named according to the names throughout the chapter.

In Chapter 2, “Introduction to Objective-C,” you learned about Objective-C, the language used to write iOS applications. In this chapter you learn about Xcode, the Integrated Development Environment used to actually create an iOS application. Xcode is similar to Microsoft Visual Studio or Eclipse. You start by creating a project; then you edit the code and user interface files within Xcode. It wasn’t always this way. Just a few years ago, Xcode was strictly for code editing while you worked on your User Interface files in Interface Builder. Today Interface Builder is integrated within Xcode to make it more familiar to developers coming from other platforms.

CREATING A NEW APP IN XCODE

Xcode is the IDE for developing both iOS applications as well as Mac OS X desktop applications. To start the Bands app, create a new iOS project in Xcode.

TRY IT OUT: Creating a Single View iOS ApplicationIn the Xcode menu, select File ⇒ New ⇒ Project.In the Templates dialog, as shown in Figure 3-1, select Application under iOS on the left; then select the Single View Application and click Next. FIGURE 3-1In the Options dialog, as shown in Figure 3-2, enter Bands in the Product Name. Then select iPhone from the Devices list, and click Next. FIGURE 3-2Choose where you would like to save your project and click Create.How It WorksThe first step to any iOS application is creating a project in Xcode. The project holds all of the code files and art assets as well as settings and configuration files used to compile and distribute the application. Xcode offers a variety of project templates that include the code files and user interface files you need to build an empty application.To start the Bands app, you selected the Single View Application template. This template provides the code files and user interface files needed for an application with only one view. This template is a nice starting place for most applications, because you can add more views to a project as you build your application.The name of the project is often the name of the application you are building, though it does not have to be. You can change the name of the application in the configuration files. In this book the project name is Bands, which is the same name as the application.Finally, you saved the project to disk. The project is contained in a single directory with a handful of subdirectories. Figure 3-3 shows what the Bands project looks like in Finder.FIGURE 3-3The code files for the project are created in a subdirectory with the same name as the project, which is the Bands directory for your new project. Xcode projects are also created with default unit test files that are created in a directory with the project name followed by Tests, which is the BandsTests directory. The .xcodeproj file is a package, meaning that it’s technically a directory but presented as a single file in Finder. It holds all of the configuration files and resource files Xcode uses.

Discussing Xcode Templates

Xcode offers a variety of project templates you can start with. In the previous section, you created the Bands project using the Single View Application. The Calculator app is an example of a single view application. Table 3-1 lists the other templates included by default in Xcode 5 and an example Apple application if one exists.

TEMPLATE NAME DESCRIPTION EXAMPLE APP

Master-Details Application An application that typically uses a table view to list objects and a navigation controller to transition to a details view of the object. Contacts

Page-Based Application An application that contains different views and allows the user to transition between them by swiping to the left or right. These apps have a series of dots along the bottom so the user knows how many views there are and which one they are on. Compass

Tabbed Application An application that has a tab bar along the bottom that is used to switch between the different views. Music

Utility Application An application with a main view and a secondary view with an info button to switch between the two. iOS 6 Weather

OpenGL Game A game application that uses OpenGL for drawing. Infinity Blade

SpriteKit Game A game application that uses SpriteKit for drawing. Disco Bees

Empty A project that contains only a window and an application delegate file. N/A

TABLE 3-1: Xcode Default Templates

It’s important to think about what type of template makes sense for your application when you first create a project, because it gives you a head start. However, that doesn’t mean you are stuck with that application architecture. Though you started the Bands app with the Single View Application template, you will modify it to be more of a Master Detail–type application as you add new features.

You can also modify the default templates or even add your own. If you are creating new projects often, you may want the default template to add files with your file naming conventions. This is an advanced topic and not recommended for beginners, but it’s nice to know the option is there as you become an expert yourself.

Learning About Bundle Identifiers

The Bundle Identifier is the unique identifier for your application. This identifier is used throughout the Apple system, so you need to know it. The identifier is typically reverse-domain style with the company identifier you entered followed by your product name. An example of this using Wrox and Bands would be wrox.Bands. Though Xcode doesn’t enable you to set this in the New Project steps, you can edit it after you create the project. You learn how to do this in Chapter 12, “Deploying Your iOS Apps.”

Exploring the Xcode Project Layout

After you create your project, you can see the Xcode Workspace Window. The layout is similar to other IDEs. Figure 3-4 shows the Xcode IDE.

FIGURE 3-4

On the left is your navigation panel. The default view for this panel is the project navigator, which shows your project and its files, as well as any groups or folders you create. Yellow folders represent groups. They’re used to group files together within the project, but they do not correspond to folders on disk. You can add folders, which map to folders on disk, which are shown as blue. Typically, groups are used instead of folders, but that’s more of a developer preference. This panel also enables you to navigate your project using symbols as well as searching all files within the project. It also shows you all your breakpoints.

The center panel is the editor. Depending on the type of file selected, you see different editors. Selecting the project in the navigation panel brings up the settings editor. Files bring up the text editor, whereas user interface files bring up Interface Builder.

The right panel is the utility panel. Here you see additional information that supplements the editor panel. You can see how this panel is used as you continue the book.

The last panel is the debug area. It’s typically hidden while you use the editor and then is shown while you debug the application. It contains your console as well as buttons to step through code along with variable information.

Discussing the UIKit Framework

Before you start building the user interface it is important to understand the components and frameworks you will use. All iOS applications are built using the UIKit framework that is part of Cocoa Touch. Apple uses a naming convention to help you know what framework a class or protocol is part of. The convention is to prepend the name of the class with the frameworks abbreviation. With the UIKit framework all classes and protocols start with UI.

The application itself is represented by the UIApplication object and its companion protocol UIApplicationDelegate. Every project you create using one of Xcode’s templates will include a class called AppDelegate that implements the UIApplicationDelegate protocol. You use the methods of this protocol to know when important events in the life of the application occur. This includes when the application launches, becomes active, or is about to be terminated. The Bands app does not do anything with these events, but it’s important for you to understand why the file is included when the project is created.

All of the user interface objects are also part of UIKit. You use them to build your application in a way that is visually familiar to other applications so the user knows how to interact with your application. With that knowledge it’s time to start working on the user interface of the Bands app.

Discussing the Main Storyboard

Main.storyboard is the user interface file for your application. Storyboards were introduced to Xcode with the iOS 5 SDK. Storyboards enable you to build and view the entire flow of the application. The two main components of the Storyboard are Scenes and Segues. Scenes are views in your application’s user interface. Typically, they have their own UIViewController subclass in your project. Segues represent how your app navigates from view to view. You learn more about using multiple scenes and segues in Chapter 5.

ADDING A LABEL TO A STORYBOARD

The most basic of user interface objects in any language is a text label. In iOS it’s called a UILabel. The following Try It Out shows you how to add UIKit objects to a view in your Main.Storyboard.

TRY IT OUT: Adding a UILabel to a SceneSelect the Main.storyboard from the Navigation pane.At the bottom of the Utility pane, select the Objects tab represented by the cube.In the search box at the very bottom of the screen, type label to filter the objects in the list.Drag the label onto your scene in Interface Builder, as shown in Figure 3-5. FIGURE 3-5How It WorksThe storyboard is the user interface file for the project. In the Model-View-Controller design pattern it is the “View” role. The project right now has only one scene that is represented by a single UIView object of the UIKit framework. You build the user interface of an application by adding other UIKit objects to the storyboard. In Xcode these objects are all listed in the Utility pane. You can use the search bar at the bottom of the pane to filter the list and quickly find the object you are looking for. In this Try It Out you added a UILabel object to the base UIView. This is how you will build all of the user interfaces for the Bands app.

Exploring Interface Builder

Interface Builder is the user interface editor in Xcode. The left side of the editor shows all the user interface objects and their hierarchy. Notice that the Label is listed under the View because it’s a subview. Selecting objects in the hierarchy selects them in the scene shown in the main portion of the editor.

The Utilities pane in Interface Builder has a series of inspectors on top and the collection libraries on bottom. The most commonly used library is the Objects library, which lists all the UIKit objects used to build an iOS application.

Setting Attributes

After you add a UI object to your view, you need to set its attributes, which you learn how to do in the following Try It Out.

TRY IT OUT: Setting the Labels Text AttributeSelect the label.On the Utilities tab, select the Attributes Inspector represented by the slider icon.Change the text of the label by replacing Label with Bands.In the view, drag the side boundary of the label to fit the new text, as shown in Figure 3-6. FIGURE 3-6How It WorksAll UIKit objects have attributes. These attributes can be set either at runtime or at design time. Changing the text from Label to Bands sets the text attribute of the label. Other attributes you can set for a label are all your typical text attributes such as color, font, and alignment.

Exploring the Inspectors

There are five other inspectors. The File inspector shows you attributes of the file. The Quick Help inspector shows you documentation of the selected object. The Identifier inspector enables you to set the parent class of an object, which you learn about in Chapter 5. The Size inspector enables you to change the size and origin of the object as well as its auto layout constraints. Finally, there is the Connections inspector, which Chapter 4, “Creating a User Input Form,” discusses.

Aligning UI Objects

Interface Builder shows you guidelines as you add subviews. These guidelines, shown as dashed lines, are designed by Apple to show you the recommended spacing between objects as well as how they align to the boundaries of the view.

TRY IT OUT: Centering a UI ObjectSelect the label in the view.Drag the label to the left side of the view until you see the left guideline appear.Drag the label to the right side of the view until you see the right guideline appear.Drag the label to the center of the screen until you see the horizontal and vertical centering guidelines.How It WorksInterface Builder shows you the various guidelines as you move UI objects around in the view. You can use these to build place your objects in context to other objects and boundaries.

RUNNING IN THE SIMULATOR

Xcode includes the iOS simulator to help you quickly develop and prototype your app without needing to run on a device. Debugging with the simulator is faster than on a device and enables you access to some Xcode tools that aren’t available to the device.

The simulator runs in its own window on your Mac. You can simulate iPhone 3.5-inch and 4-inch devices as well as iPads both in standard or retina display. You can also change the version of the OS the simulator runs.

NOTE Retina displays were first introduced with the iPhone 4. They have a higher resolution with more pixels per inch, making text and images appear sharper without looking pixelated.WARNING iOS devices are case-sensitive when using filenames. The simulator is not. If you run into issues with resources not loading correctly, make sure you use the case-sensitive filename.

Choosing a Device

To launch the simulator, you first need to select the device you would like to test with, as shown in the following Try It Out.

TRY IT OUT: Running the App in the iPhone Retina (4-inch) SimulatorIn Xcode, locate the scheme selector next to the Run button.In the drop-down, select iPhone Retina (4-inch) in the Simulator section.Click the Run button. The simulator launches; then runs your application, as shown in Figure 3-7. FIGURE 3-7How It WorksUsing the scheme selector, you selected to run the application in the simulator on an iPhone Retina 4-inch device. The app was then compiled, installed, and launched in the simulator using your selection.

Learning to Test on All Device Sizes

You must test your application on all devices you plan to support, because of the different screen sizes. You also need to keep these different sizes in mind while designing your user interface. The following Try It Out demonstrates a layout issue found only by testing with multiple devices.

TRY IT OUT: Running the App in the iPhone Retina (3.5-inch) SimulatorIn Xcode, select the iPhone Retina (3.5-inch) device from the simulator section.Click the Run button. The simulator switches to the iPhone Retina 3.5-inch device, as shown in Figure 3-8. FIGURE 3-8How It WorksWhat you have done here is switch the device type the simulator should use. As a result, the label you centered in Interface Builder is no longer centered in the simulated application. This is because the iPhone Retina 3.5 has less screen space. To keep the label centered, you need to use Auto Layout.

LEARNING ABOUT AUTO LAYOUT

Auto Layout is a feature of Xcode that helps you define where your User Interface objects should be no matter the size of the screen your app runs on. As shown in the previous section, iPhones with a 3.5-inch display have less screen space than iPhones with a 4-inch display. The size of the screen can also change if the device is rotated. The following Try It Out shows how you can use Auto Layout to ensure that your label stays centered on the screen.

TRY IT OUT: Setting Auto Layout ConstraintsIn Xcode, click Main.storyboard in the Project Navigator.Select your label in Interface Builder.At the bottom of the screen, click the Align button to bring up the Alignment Constraint options, as shown in Figure 3-9. FIGURE 3-9Check Horizontal Center in Container and Vertical Center in Container, and click the Add 2 Constraints button. Xcode adds lines, which represent your constraints, as shown in Figure 3-10. FIGURE 3-10Run the app in the iPhone 3.5-inch simulator. Your label remains centered, as shown in Figure 3-11. FIGURE 3-11How It WorksBy adding the center horizontally and center vertically constraints to your label, you have it set to always be centered in the view no matter the size of the screen.

Discussing Auto Layout Basics

Auto Layout works by adding different constraints to your user interface objects. Constraints can be set either between the object and its container, as you did in the Try It Out, or between two objects.

In the Try It Out, you set the constraint using the menu at the bottom of the scene. Alternatively, you can select the object you want to add a constraint to, Control-drag a line to the other object you want in the constraint, and highlight it, as shown in Figure 3-12. When you release the mouse button you see a dialog box with the available constraints.

FIGURE 3-12

You can view what constraints each object has either in the Storyboard hierarchy on the left side of Interface Builder or by selecting the size inspector in the Utilities pane, as shown in Figure 3-13.

FIGURE 3-13

Auto Layout is a powerful feature of Xcode that has many uses depending on the type of user interface you build. To learn more about Auto Layout in the Interface Builder, check out the help documentation from Apple at https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html.

Testing Rotation

Rotating a device also changes the screen size of your app. The simulator enables you to test rotation.

TRY IT OUT: Rotating the SimulatorRun the app in the iPhone 3.5-inch simulator.From the menu, select Hardware ⇒ Rotate Left. The simulator rotates to the left and moves to Landscape orientation, as shown in Figure 3-14. FIGURE 3-14From the menu, select Hardware ⇒ Rotate Right. The simulator rotates to the right and back to portrait.How It WorksThe simulator enables you to test rotation in your app by giving you hardware commands to rotate the simulated device. You can also use the keyboard instead of the menu using the Command-arrow key combination. Its important to test your application in all orientations you plan on supporting. Supporting rotation in your application is an option. You set which orientations you support in the application settings.

EXPLORING APPLICATION SETTINGS

Now that you have your application running, it’s time to set its version number, icon, and other settings to make it complete. Xcode uses property list files, known as plists, to store this information. You can view your application’s info plist by expanding Supporting Files group in the project navigator and selecting the Bands-info.plist file. Though you can edit your settings using the plist editor, you may find it easier to use Xcode’s settings editor instead.

Setting Version and Build Numbers

Every iOS application, just like any desktop application, has a version and build number used to identify which version of the app is being run. The following Try It Out walks you through setting these using Xcode’s settings editor.

TRY IT OUT: Setting Properties Using the Info Property EditorIn the Project Navigator, select the project.In the editor, select the General tab, and bring up the info property editor, as shown in Figure 3-15. FIGURE 3-15In the Identity section, set the Version to 1.0 and Build to 0.1.Select the Bands-info.plist file from the Project Navigator. You see the Bundle Version String, Short property set to 1.0 and the Bundle Version property set to 0.1, as shown in Figure 3-16. FIGURE 3-16How It WorksThe Xcode info property editor helps you change your application settings without needing to know the specific property names used in the underlying Bands-info.plist file.

Setting Supported Rotation Orientations

Supporting rotation in your application is optional. Designing an application that looks nice in both portrait and landscape can be challenging and may not be worth the effort. The following Try It Out shows how to support only Portrait orientation in your app.

TRY IT OUT: Setting Supported Rotation OrientationsIn the Project Navigator, select the project.In the Deployment Info section, check Portrait and uncheck Upside Down, Landscape Left, and Landscape Right.Run the application in the iPhone 4-inch simulator.Rotate the simulator to Landscape orientation. You see that the app no longer rotates to this orientation, as shown in Figure 3-17. FIGURE 3-17How It WorksIn your application settings there is an array of supported orientations, which are listed under the Supported Interface Orientations property. By checking only Portrait in the info property editor, you remove all other orientations, leaving just Portrait in the array.

Setting the App Icon

An application isn’t complete without an icon. The icon is one of the most important parts of your application. It’s the first thing a user will see when browsing the App Store, so it needs to look nice as well as catch the user’s eye. This book won’t go into what makes for a good icon, but Apple does lay out some things to keep in mind in the Human Interface Guidelines at https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/AppIcons.html. If you can afford to, it is best to hire a designer to create your icon.

You will need icons of different sizes depending on what devices you plan on supporting. For iPhones and iPod touches with a retina display, you need an icon that is 120 × 120 pixels in size. If you plan on supporting non-retina display iPhones and iPod touches you need an icon that is half that size, 60 × 60. For retina display iPads and iPad minis you need an icon that is 152 × 152 while non-retina display iPad and iPad minis need an icon that is 76 × 76 in size. Since this book is primarily about coding an iOS application and not design you can use the simple 120 × 120 icon included with the sample code. The following Try It Out walks through setting the app icon in Xcode.

TRY IT OUT: Setting the Bands App IconDownload the BandsIcon.png file from www.wrox.com to your desktop.In the Project Navigator, select the project.In the App Icons section, click the arrow next to the Source drop-down to bring up the icon settings editor, as shown in Figure 3-18. FIGURE 3-18Drag the BandsIcon.png file onto Xcode, and drop it on the iPhone App iOS 7 placeholder.Run the application in the simulator.Return to the home screen in the simulator by selecting Hardware ⇒ Home from the menu. You see the new icon on the simulator home screen, as shown in Figure 3-19. FIGURE 3-19How It WorksApplication icons have specific names used to identify them and show them properly. Instead of needing to know these names, Xcode uses asset catalogs. By dragging the file onto the Xcode icon settings editor, you have added the icon to the project, and Xcode has added it to its proper asset catalog, so the system knows how to show your app icon on the home screen.

Setting Launch Images

When iOS first launches your application, it may take a little bit of time before the app is ready to use. Instead of showing a blank screen, Apple requires you to supply a launch image. The image can be anything you want it to be, but it is recommended that you use an image that represents what your app will look like when it is ready to use. This creates a seamless visual experience to the user. You need to provide launch images for all device sizes and orientations your app supports. The following Try It Out shows how to create launch images and set them in your project.

TRY IT OUT: Creating and Setting Launch ImagesRun your app in the iPhone 4-inch simulator.Select File ⇒ Save Screen Shot from the simulator menu. This creates a new PNG image on your desktop.In Xcode, select your project from the Project Navigator.In the Launch Images section, click the arrow next to the Source selector to bring up the launch image editor, as shown in Figure 3-20. FIGURE 3-20Drag the screen shot file from your desktop and drop it on the second placeholder. The project will automatically be saved once the image is dropped.Run your application again using the iPhone 3.5-inch simulator.Repeat step 2 to create another screen shot image on your desktop.Drag the new screen shot file from your desktop, and drop it on the first placeholder. Again the project will automatically be saved once the image is dropped.How It WorksXcode determines if your application supports iPhone 4-inch displays by looking at what launch images are included. If no images are included, it assumes the app supports the 4-inch display. By using the screen shot feature of the simulator, you created image files that represent your user interface after the app is loaded and ready for use. Similar to icons, iOS uses specific names to know which launch images to use on different devices. Xcode saves you from having to know these names by again using the asset catalog, so the system knows which images to use without you memorizing the specific filenames.

RUNNING ON A DEVICE

Running your application in the simulator enables you to quickly prototype and test your app. But to actually get a feel for your application, you need to test using an actual device. To do this, first, you need to enroll in the iOS Developer Program. The developer program costs $99 a year, but it is necessary to test on physical devices as well as getting your app into the App Store. You also get access to all Apple’s technical resources including the Apple Developer Forums. You can enroll from the iOS Dev Center at https://developer.apple.com/devcenter/ios/.

All apps that run on an iOS device require a provisioning profile. The provisioning profile is a form of Digital Rights Management (DRM). When you buy an app from the App Store, it gets installed using an App Store provisioning profile. When you test your app during development, you need to install a developer provisioning profile. Both types of provisioning profiles require a certificate, which is used to sign the profile. Xcode can handle this for you, as shown in the following Try It Out.

TRY IT OUT: Provisioning a Device for TestingConnect your device to your Mac.In Xcode, open the Organizer by selecting Window ⇒ Organizer from the menu.Select Devices from the top of the Organizer window, as shown in Figure 3-21. FIGURE 3-21Select your connected device, and click the Use for Development button in the main part of the window.Select your account name from the dialog box that appears, then click Choose.When the Certificate Not Found dialog displays, click Request to request a new certificate and wait for Xcode to complete the task.In Xcode select iOS Device in the scheme selector, and click Run. Xcode installs the app on your device and runs it.How It WorksYou have now registered your device with your developer account, created a certificate, and then created a team provisioning profile. This profile is managed by Xcode and can now be used to test your application on your device.

SUMMARY

In this chapter you created your first iPhone application using Xcode. You learned about Xcode’s layout as well as how to use different editors such as Interface Builder and the info properties editor. You also learned how to use the simulator to test your app on different devices and in different orientations, including using Auto Layout to make sure your user interface displays how you want it depending on the screen size and orientation of the device. Finally, you learned how to register a test device with your account in the iOS Developer Program and provisioned it to run your first iPhone application.

EXERCISESWhat is the name of the pane on the left side of Xcode?What is the Cocoa framework used to create an iOS applications user interface?What type of file is used to store application settings?What is the name of the Xcode feature you use to make sure your applications user interface is displayed correctly no matter what size device it is running on?What is the name of the inspector used to change user interface object attributes in Interface Builder?Change the color of the Bands label from black to light gray.Add a new label with text Bottom aligned with the bottom and center guidelines of the scene with an auto layout constraint keeping it at the bottom.Change the version number to 1.1.WHAT YOU LEARNED IN THIS CHAPTERTOPIC KEY CONCEPTS Creating an Xcode Project All iOS applications are built in Xcode. The Xcode project organizes all of the code files, art assets, configuration files and settings. Building a User Interface The user interface is the “view” role in the Model-View-Controller design pattern. It’s the part of the application the user interacts with. In Xcode the user interface is built using storyboards with scenes and segues showing the flow of the application. Using Auto Layout iOS devices come in different sizes. They are also handheld devices that the user can rotate which changes the screen dimensions. Apple has designed its Auto Layout feature in Xcode to ensure your user interface is displayed correctly no matter what device or orientation it is being viewed in. Changing App Settings There are many settings to an iOS application. They are stored in property list files, also known as plist files. Xcode includes editors you can use to change these settings so you don’t need to know the keys and valid setting options, though you can edit the plist files directly if you choose. Running in the Simulator The iOS simulator is an essential tool in developing iOS applications. It allows you to test your application using any iOS device quickly without needing test devices connected to your development machine. Running on a Device In order to test your application on a physical iOS device, it needs to be registered and provisioned with Apple through your developer account. Provisioning a test device can be done within Xcode.