Everything that your app needs to run must be part of the app that you build. If your app needs an image, that image must be included in its resources. Image files, Interface Builder files, sound files, and anything else that’snot computer code, are collectively referred to as resources.
You can add virtually any file as a resource to your app. Resource files are copied into your app’s
bundle when it is built and are available to your app when it runs.
Xcode has a special way of organizing commonly used resources, like images, into a single resource called an asset catalog. To add new images to an asset catalog, select the catalog in the project navigator, as shown in Figure2-17. Locate the resource files you want to add in the Finder. Find the Learn iOS Development Projects folder you downloaded in Chapter 1. Inside the Ch 2 folder you’ll find the Surrealists (Resources) folder, which contains eightimage files. With the files and your workspace window visible, drag the image files into the group list (left side) of the asset catalog, as shown in Figure 2-17.
Figure 2-17. Dragging resource files into an asset catalog
The files will be copied to your project folder, added to the project navigator, and added to your
app as a resource. The asset catalog lets you easily organize multiple resolutions of the same image, although in this example only low resolution images have been added. Dropping images into the group list, as you did here,created new groups in the catalog. You can later add additional
(high-resolution or platform-specific) versions of the same image by dropping them into the preview pain of a group, shown on the right in Figure 2-18. Xcode can’t edit these files, but the preview
pane (see Figure 2-18) let’s you review thumbnails of them.
Figure 2-18. Previewing image files
Customizing Buttons
With the necessary resource files added, it’s time to customize your buttons. Select the Main.storyboard
file again and select the upper-left button. Reveal the attributes inspector (View ➤ Utilities ➤ Show Attributes Inspector) and change the title property to Remedios Varo and the background property to RemediosVaro1, asshown in Figure 2-19.
Figure 2-19. Customizing the first button
The background property is the resource name of the image you want the button to use for its background. You can type it in, but Xcode recognizes common image types and includes the image resources you just added tothe drop-down list. Just select the filename from that list.
Customize the remaining three buttons (working clockwise), setting their title and background image as follows:
n Kay Sage, KaySage1
n Leonora Carrington, LeonoraCarrington1
n Frida Kahlo, FridaKahlo1
As a finishing touch, select Kay Sage’s button and change the text color to black (so it’s easier to read). When you’re all done, your interface should look like
Figure 2-20.
Figure 2-20. Finished buttons
Using Storyboards
Storyboards simplify your app development by allowing you to plan out your app’s screens, and define how the user will navigate between them, all in Interface Builder.
Before storyboards, you could layout each screen, but youhad to write code to move between them. It wasn’t a lot of code, nor was it complex, but it was a chore. With storyboards, you can do most of that work in Interface Builder—without writing any code at all.
Repetitive code is a drag on development. The time you spend writing the same code, over and over again, is time you don’t have to develop cool new features. What you want is a frictionless development environment, wherethe simple tasks are taken care of for you, leaving you time to work on the stuff that makes your app special.
Apple works very hard on making iOS and Xcode as frictionless as possible. Every release adds new classes and development tools to make developing high-quality apps easier. For example, before the introduction ofgesture recognizers, writing code to detect multi-touch gestures (like a pinch or a three fingered swipe) was a complicated task, often requiring a page or more of code. Today—as you might have guessed already—your appcan detect these gestures simply by dropping a gesture recognizer object into your design and connecting it to an action.
Let’s use storyboards to define the remaining screens of your app, and how the user will navigate between them.
Adding New Screens
Before you can create a transition between two screens, called a segue (pronounced “seg-way”),
you must first create another screen (called a scene in storyboard-speak). Return to the object library and drag in a new view controller object into your Mainstoryboard file, as shown in Figure 2-21.
Figure 2-21. Adding a new view controller
In Figure 2-21, I’ve zoomed out (using the magnifying controls in the bottom right corner of the editor pane) so I can see the entire storyboard. To edit the contents of a view, however, Interface Builder needs to be zoomed in onthat view. There are a couple of ways to accomplish this:
n Double-click in the canvas to zoom out/in.
n Click the zoom toggle (=) or magnifying glass (+) in the lower-right of the canvas and scroll to center the view.
Locate the Image View object in the library. Drag one into the empty view, as shown in Figure 2-22.
Figure 2-22. Adding an image view object
If the image view object didn’t snap to fill the whole view, drag it around until it does. With the new image view object still selected, switch to the attributes inspector. Change the Image property to RemediosVaro2, and change the image mode to Aspect Fill, as shown in Figure 2-23.
Figure 2-23. Customizing the background image view
Now add a scrolling text field to this screen. Locate the Text View (not the Text Field!) object in the library. Drag a new text view into the window and position it, using the automatic user interface guides, in the upper-rightcorner of the screen, as shown in Figure 2-24.
Figure 2-24. Adding a text view
With the text view selected, use the attributes inspector to change the following properties:
n Set text color to white
n Reduce the font size to 12.0
n Uncheck the editable option
n Further down, uncheck Shows Horizontal Scrollers
n Click on the background color, in the color picker use the grey slider to choose 50% grey with a 33% alpha or opacity (see Figure 2-25)
Figure 2-25. Setting a semi-transparent background color
The text for this object can be found in the Surrealists (Resources) folder where you found the image files. You won’t add these files to your project, however. Instead, open the file named Prose - Remedios Varo, copy the text, switch backto Xcode, and paste it into the text property of the attributes inspector, as shown in
Figure 2-26.
Figure 2-26. Pasting text into a text field object
Creating a Segue
With your screen finished, it’s time to define the segue between the main screen and this one. You want this screen to appear when the user taps on the Remedios Varo button. To create this segue, hold down the control key, click on the Remedios Varo button, drag the connection to this new view controller, and release the mouse, as shown in Figure 2-27.
Figure 2-27. Creating a segue
When you release the mouse button, a pop-up menu will appear with the possible segue types. Choose push (see Figure 2-27). When your user taps the Remedios Varo button, your app will perform a “push” transition(sliding the new screen into view) and present the new view.
Setting Navigation Titles
The initial view controller is, itself, under the control of the navigation controller object you created at the beginning. The job of the navigation controller is to present a series of views underneath a navigation bar. The navigation bar—which you’ve seen a hundred times—displays the title of the screen you’re looking at, and optionally has a back button to return you to the screen you came from. The navigation controller handles all of the details.
When you added a push segue to the second screen, the second screen fell under the control of the navigation controller too. A push segue—which only works in conjunction with navigation controllers, by the way—replaces oneview with another, and makes the original view the target of the back button in the new view.
So that this is meaningful to your user, you’ll want to set the titles for each screen. This will make the navigation bar intelligible.
Select the navigation bar in the initial view controller and have the attributes inspector handy.
Change the title of the navigation bar to Woman Surrealists, and set the back button property to Surrealists. Most Interface Builder objects with a title can be edited simply by double-clicking on the title in the canvas, and shown in Figure 2-28. Alternatively, you can select the object and edit its title property in the attributesinspector. Setting the optional back button property will assign a more succinct title to the back button on screens that return to this one.
Figure 2-28. Editing the navigation bar title
Finally, select the navigation bar in the second screen you created and change its title to Remedios Varo. You might want to adjust the size or position of the text field so the navigation bar doesn’t obscure it.
No comments:
Post a Comment