Adding an Info Button
The DeepThoughts app is supposed to display an animation of text flowing down the view, and the user (after the app is finished) will be able to change the text and the speed of the animation either by tapping an Info button (which is similar to the iPhone version of this app) or by tapping the view itself. To add a user interface button and set it to be an Info button, follow these steps:
- Make your way over to the Groups & Files list and double-click
DeepThoughtsViewController.xib in the Resources folder to open
the file in Interface Builder (if it isn't already open).
Interface Builder should appear with the DeepThoughtsView Controller.xib window, the Library window, the Inspector window, and the View window. If you followed the steps of the previous section, the Library window should already be open; if it isn't already open, choose Tools → Library to show it. - Click the Classes tab at the top of the Library window and then select
UIResponder from the drop-down menu below the Classes tab.
Selecting Classes and then UIResponder narrows your search through the Library window so that you can find the class you need quickly. To place the Info button in the view, you need the UIButton class. - Drag the UIButton class object from the Library onto the View window.
Again, if the View window is obscured by other windows, just drag the UIButton class object directly on top of the View icon in the DeepThoughtsViewController.xib window, so that it appears underneath the image you added in the previous section (which is also part of view).
After all this dragging, the UIButton class object appears under View in the DeepThoughtsViewController.xib window as a Rounded Rect Button, which is its default setting. - Select the Rounded Rect Button item in the DeepThoughtsView
Controller.xib window and then click the Attributes tab of the
Inspector window (or choose Tools → Attributes Inspector) if it isn't
already selected.
The Attributes Inspector shows Button Attributes. - In the Attributes Inspector, choose Info Light from the Type dropdown menu.
The Rounded Rect Button item transforms itself into the Light Info Button item in the DeepThoughtsViewController.xib window. - Drag the Light Info Button to its position in the View window.
Notice the lines displayed by Interface Builder. They're there to make it easy to place the interface element. Interface Builder also displays lines at the borders to help you stay within Apple's User Interface Guidelines. (The lines are actually blue, but that's kind of hard to see in a black-andwhite illustration.) - Choose File → Save to save your changes to the DeepThoughtsView
Controller.xib file.
You can also close Interface Builder and save changes to the file by choosing Interface Builder → Quit Interface Builder and then clicking Save while closing it.
Placed the Info button in the upper-left corner of the app's view so that when the iPad is rotated (either left or right), and the display orientation switches from portrait to landscape (or vice-versa), the Info button would still be in the upper-left corner.
It's extremely important with iPad apps to design your app's view to take into consideration both portrait and landscape orientations - that's one of the features of the iPad that truly improves the user experience with the content.
You can see what the Light Info button looks like in its Default State Configuration. Click the pop-up menu under the Type pop-up menu in the Attributes Inspector window to choose other configurations, such as Highlighted State Configuration or Selected State Configuration, to see what the button looks like when highlighted or selected. You can also change the text color, shadow, background, and other attributes in the Attributes Inspector.
While you're in a graphical mindset - especially if you're in the middle of processing graphic images for your app or designing interface elements - take the time to create your app icon and add it to your app, as spelled out in the next section.
