Figure 2-29. Selecting the run target
Click the Run button. Xcode will build your app and start it running in the simulator. If, for some unexpected reason, there are problems building your app, messages describing those problems can be foundin the issue navigator(View ➤ Navigator ➤ Show Issue Navigator).
Your app will appear in the iPhone simulator, and should look like the one on the left in Figure 2-30.
Figure 2-30. The first test of your app
Tap the button in the upper-left, and the second screen slides smoothly into view. (Don’t worry if the placement of the buttons isn’t ideal—you’ll fix that shortly.) Scroll the text by dragging it with your mouse (remember that themouse is your simulated finger). Tap the back button to return to the initial screen. Your app has all of the standard behavior of an iOS app: a touch interface, title bars, animation, navigation, and everything works exactly as youexpect it to.
Finishing Your App
Return to the Xcode workspace window and click the Stop button in the toolbar to stop your app. Finish your app by repeating (most of) the steps in the section “Adding New Screens.” Start by adding three more view controllers, as shown in Figure 2-31.
Figure 2-31. Adding the remaining view controllers
Into each new view controller, add an image view object and set its image resource name to one of the following (working clockwise): KaySage2, LeonoraCarrington2, and FridaKahlo2.
You could repeat all of the steps for adding and customizing a new text view for each of the three new images, or you could save yourself a lot of work by copying the work you’ve already done. While holding down the Optionkey, drag the UITextView object from the Remedios Varo scene and drop it into the Kay Sage scene, asshown in Figure 2-32. This gesture duplicates an object.
Figure 2-32. Replicating a text view object
Duplicating an object in Interface Builder creates a new object with all of the properties of the original. The only thing left to do is position it in the view and change its text. You’ll find the text for the other three screens in theSurrealists (Resources) folder. When you get to the text view for Frida Kahlo, change the text color to black, so it’s easier to read.
The last step is to create a push segue from each button to the appropriate view and set the title of its navigation bar. When you’re done, you’ll have a storyboard that looks like Figure 2-33.
Figure 2-33. Finished Surrealist app storyboard
Debugging Your App
Run your new app. Tap a button to show the details for that artist. Browse the text and use the navigation bar to return to the initial screen. Return to Xcode. Stop the app and change the simulator to iPhone Retina (3.5–inch),and run it again. Does something seem out of sorts?
The buttons on the initial screen have odd gaps, and get cut off on the 3.5-inch iPhone. In other scenes, images and text views are also clipped, as shown in Figure 2-34. This is a problem. Programmers call it a bug.
Figure 2-34. Initial test of Surrealist app
“Bug” is usually used to describe a flaw in computer code, but any defect in how your app
behaves or operates is a bug, and you need to fix it. The process of tracking down and fixing bugs is called debugging.
In this case, the problem has to do with how the buttons are resized, or repositioned, for different devices. Various models of the iPhone have different screen dimensions and resolutions. iOS adjusts the size of your screen views to fit the model that it’s running on, which may alter the layout from what you see in Interface Builder.
Adding Constraints
When a view changes size, a feature called auto-layout repositions its subviews. Those subviews are repositioned based on a set of constraints. A constraint is simply a rule about an object. Here are some examples ofconstraints:
n the height of the object must be at least 40 pixels
n the bottom edge of the object should be 20 pixels from the bottom edge of its superview
n the object should be centered horizontally
There are often several such constraints for a single view. iOS evaluates all of the constraints to determine how each view should be adjusted so that all of the constraints are satisfied.
You can define individual constraints in Interface Builder or ask Xcode to generate some
or all of them for you. Xcode creates constraints based on how you’ve positioned your view and its relationship with nearby views. Usually, Xcode’s guess is exactly what you want. If it’s not, you can define them yourself.
or all of them for you. Xcode creates constraints based on how you’ve positioned your view and its relationship with nearby views. Usually, Xcode’s guess is exactly what you want. If it’s not, you can define them yourself.
Your Surrealist app needs constraints so that the text and images in the four artist scenes resize properly on different devices; and you want the four buttons in the initial scene to evenly fill the screen. Start with the former,as those are the easiest.
Return to Xcode and the Main.storyboard file. Select the Kay Sage scene by clicking on the view controller object dock immediately below the scene, as shown in Figure 2-35. In the bottom right corner of the editor pane, click on theResolve Auto Layout Issues button (the one with the dot in the middle), and choose the Reset to Suggested Constraints in View Controller item, also shown in Figure 2-35.
Figure 2-35. Using the suggested constraints
Xcode analyses the layout of your views in the scene and adds its recommended constraints to
each one. Select the text view, and Interface Builder shows you the constraints now attached to that view, as shown in Figure 2-36. Xcode has added vertical and horizontal constraints that keep the
text view positioned a pleasing distance from the top, left, and bottom edges of its superview, and a width constraint that determines its width. Click on a constraint to view, or edit, its properties in the attributes inspector,shown on the right in Figure 2-36.
Figure 2-36. Xcode’s recommended constraints
This set of constraints is said to be “complete.” Together, these four rules unambiguously determine the height, width, and position of the text view. If some of these constraints were omitted, iOS would use the original height,width, and/or position of the view. As you’ve seen, this can result in views overlapping or being positioned beyond the edge of their superview.
Repeat this process for the other three scenes: select the scene’s view controller and choose the Reset to Suggested Constraints in View Controller item from the Resolve Auto Layout Issues button.
The position and size of the four buttons in the initial scene are not, however, typical of the size or placement of button objects in iOS. Xcode’s suggested constraints, therefore, won’t be much help. You’ll have to design theseconstraints yourself. Consider how you want these buttons sized and positioned, and then develop the simplest set of rules that describe that to iOS. Here are the constraints that I came up with:
The top edges of the upper two buttons should be at the bottom edge of the navigation bar.
The bottom edges of the lower two buttons should be at the bottom edge of the superview.
The left edges of the left two buttons should be at the left edge of the superview.
The right edges of the right two buttons should be at the right edge of the superview.
The buttons on the left should touch the buttons on the right.
The upper buttons should touch the lower buttons.
All of the buttons should be the same height and width.
That set of rules will position and size the four buttons so they completely fill the screen, creating four equal-sized quadrants. You add these constraints to Xcode just as they are described here.
Start with the first constraint. Either hold down the Control key and click, or right-click, the Remedios Varo button and drag up to the navigation bar area. Release the mouse button and choose Top Space to Top Layout Guide, as shown in Figure 2-37.
Figure 2-37. Adding a vertical constraint to a button
You’ve now created a constraint that tells iOS to position the top edge of the Remedios Varo button some distance from the bottom edge of the navigation bar. But you don’t want it to be “some distance,” you want it to touch thenavigation bar. Click on the constraint to select it, as shown in Figure 2-38, and use the attributes inspector to set the constraint’s value to 0. The constraint now says there should be
no distance between the top edge of the button view and the bottom of the navigation bar.
Figure 2-38. Editing the properties of a constraint
Repeat this with the Kay Sage button. You’ve now established the first set of constraints. The next set is
created just like the first. Control+click/right click on the Frida Kahlo button, drag down, and choose the
Bottom Space ToBottom Layout item from the menu, as shown in the middle of Figure 2-39.
This sets the space between the bottom edge of the view and the bottom edge of its superview.
Figure 2-39. Setting a bottom edge constraint
Repeat with the Leonora Carrington button. Zero-width constraints are difficult to select, but you can select it in the object outline, as shown on the left in Figure 2-39. These buttons were already positioned at the bottom ofthe superview, so the constraint’s value is already 0 (as shown on the right in Figure 2-39).
Continue adding constraints until you’ve defined them all:
1. With the two left buttons: control+click/right-click on the button, drag left, and choose Leading Space to Container.
2. With the two right buttons: control+click/right-click on the button, drag right, and choose Trailing Space to Container.
3. With the two left buttons: control+click/right-click on the button, drag to the button on its right, and choose Horizontal Spacing. Make sure the constraint’s value is 0, meaning the right edge of the leftview should touch the left edge of the right view.
4. With the two upper buttons: control+click/right-click on the button, drag down to the button below it, and choose Horizontal Spacing. There’s probably a gap between the two buttons, so select theconstraint and set its value to 0 in the attributes inspector.
5. Again with the two upper buttons: control+click/right-click on the button, drag down to the button below it, and choose Equal Height. This constraint says that the height of the upper button should be thesame as the lower button.
The constraints for the buttons on the initial screen are now complete. The only solution to the set of constraints you just created must position the four buttons so they are all the same size and fill the screen. The currentsize and position of the buttons do not, however, agree with those constraints and Xcode
indicates this with adjustment warnings (those little orange numbers), as shown in Figure 2-40.
Figure 2-40. Finished button constraints with resize warnings
The warnings are telling you that iOS will resize or move the view by the displayed amount when your app runs. You can ignore the warnings if you like. But if you want your Interface Builder layout to look more like what your interface will be when it runs, adjust the position of your views so they agree with their constraints.
Xcode will do that for you. You can click on the warning arrow next to the view controller group in the outline. It will slide over to reveal the warnings for the views in that controller (shown on the left in
Figure 2.40). From here, youcan review and resolve each issue individually. Alternatively, choose the Update All Frames in View Controller item from the Resolve Auto Layout Issues button, as shown on the lower-right in Figure 2-41. Xcode adjusts thesize and position of your views so the layout in Interface Builder agrees with the constraints.
Figure 2-41. Adjusting views to agree with their constraints
Run your app, as shown in Figure 2-42. Compare these screens with those in Figure 2-34.
Figure 2-42. Correctly positioned buttons
Testing Your App
Will your constraints solution work for all devices? That’s an excellent question. As part of your app development, you need to thoroughly test your app to make sure it works—as you intended—under all circumstances. Thisphase of app development is every bit as important as the design and engineering phases.
Start by testing your app on different devices. The iOS Simulator can simulate all available device form factors. Choose different hardware, as shown in Figure 2-43, to test how your app runs in other configurations. Sometesting has to be done on real hardware, and you’ll explore that in later chapters.
Figure 2-43. Testing different hardware configurations
This is a pretty simple app, but there are still a number of things you’ll want to test before pronouncing it finished:
n See that the layout of all screens looks pleasing on different devices
n Make sure each button segues to the correct screen
n Test that the text is correct and can be scrolled
n Check all of the titles
Does everything check out? Then your first iOS app is a success!
Summary
Give yourself a round of applause; you’ve covered a lot of ground in this chapter. You’ve learned your way around Xcode, added resources to a project, and used Interface Builder to create, configure, and connect the objects ofyour interface. And, you did that all without writing a single line of computer code.
The point of this chapter wasn’t to avoid writing Objective-C code. We are, after all, computer programmers. If we’re not writing code, what are we getting paid for? The point was to illustrate how much functionality you can add,and how much tedious detail you can avoid, using Interface Builder and iOS objects.
Are your coding fingers itchy? In the next chapter you’ll write a more traditional app—one with code.
No comments:
Post a Comment