Fixing the iPad Layout

Topics covered in this iOS Development tutorial:

Fixing the detail view for iPad, Fixing the views

Exercise Preview

Exercise Overview

In this exercise, we’ll finish correcting the iPad layout.

Getting Started

1. If you completed the previous exercise you can skip the following sidebar. We recommend you finish the previous exercises (B1–B3) before starting this one.

   If you completed the previous exercise, Jive Factory.xcworkspace should still be open. If you closed it, re-open it (from yourname-iOS Dev Level 2 Class > Jive Factory).

   If You Did Not Complete the Previous Exercises (B1–B3)

   1. Close any files you may have open and switch to the Desktop.
   2. Navigate to Class Files > yourname-iOS Dev Level 2 Class.
   3. Duplicate the Jive Factory Ready for Fixing the iPad Layout folder.
   4. Rename the folder to Jive Factory.
   5. Open Jive Factory > Jive Factory.xcworkspace.

Fixing the Detail View for iPad

1. In the Project navigator, click on Main_iPad.storyboard.
2. Zoom in on the Bands Detail View Controller by Ctrl–clicking or Right–clicking on a blank area of the Editor and choosing Zoom to 100%.
3. If the Document Outline is not open, click the Show Document Outline button .
4. In the Document Outline, expand into Bands Detail View Controller Scene > Bands Detail View Controller > View and select Band Image.

5. In the Utilities area, click on the Size inspector tab .

6. Set the following options:

   X:	20
   Y:	40
   Width:	96
   Height:	96

   The Y position is slightly different from the iPhone layout because we do not have an area under the status bar in the iPad layout. (Because we are using the split view controller, the iPad layout does not have a Back bar that creates extra unusable space under the status bar.)

7. Let’s change the Y positions of the rest of the elements to match the photo. Select the Band Name Label.

   NOTE: Normally you’d drag the labels into a layout that you like, but because we have a specific layout in mind, we’ll give you the exact positions and sizes.

8. In the Size inspector , set Y to 40.

9. Set the remaining labels to the following Y size in the Size inspector:

   Band Type Label:	60
   Venue Label:	80
   Show Date Label:	100
   Show Time Label:	100
   Show Details Label:	119
   Band Description Label:	164

10. The layout should now look like this (don’t worry about the line yet):

    

Fixing the Views

Looks good so far, but our line and video web view are too small for the iPad. Let’s make them bigger. It will be easier to use the Document Outline to select the line.

1. In the Bands Detail View Controller section, inside View there is another View (above Video Web View). Select that nested View.

2. In the Size inspector , set the following:

   Y:	152
   Width:	703

   The divider line now stretches across the entire width. Let’s fix the Web View next.

3. In the Document Outline, select Video Web View (you can also click on it on the Editor).

4. In the Size inspector , set the following:

   X:	20
   Y:	221
   Width:	663
   Height:	421

5. That’s better. Let’s see how it looks in the Simulator. Click Run.
6. When the Simulator finishes loading, notice the layout on the right looks better.
7. Click on another band row to see the correct info loads for that band. Cool! Notice the band description text is wrapping onto more than one line. With the increased screen space, we want this description to stay on one line.
8. Switch back to Xcode.
9. Select the Band Description Label.
10. In the Size inspector , set Width to 663.
11. In the Utilities area, click the Attributes inspector tab .
12. Set Lines to 1.
13. Run it.
14. When the Simulator finishes loading, click on a band to see all the text stays on one line.
15. Switch back to Xcode.
16. Click the Stop button.

17. Leave the project open, we’ll continue working on it in the next exercise.