Customizing the App for iPad

Topics covered in this iOS Development tutorial:

Creating a new iPad storyboard, Setting the interface orientation

Exercise Preview

Exercise Overview

The app we worked with in previous exercises was designed for the iPhone. In this exercise you’ll start learning how to adjust it to work well on the iPad.

Getting Started

1. We suggest you complete the previous band app exercises (1B–4D) before doing this one. If you did not do the previous exercises, complete the sidebar below.

   If you completed the previous exercises 1B–4D, re-open Jive Factory.xcworkspace (from yourname-iOS Dev Level 2 Class > Jive Factory).

   If You Did Not Complete the Previous Exercises (1B–4D)

   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 Customizing iPad folder.
   4. Rename the folder to Jive Factory.
   5. Open Jive Factory > Jive Factory.xcworkspace.
2. Before we make any changes, let’s take a look at how our app currently looks on an iPad. At the top left of Xcode, click on iPhone 13 Pro and change the active scheme to
   iPad Pro (12.9 inch).
3. Click the Run button.

4. When the Simulator finishes loading, notice the app isn’t quite sized right. Even though we’re running the iPad Simulator, the build settings on our app are specific to iPhone.

   NOTE: You may need to scroll around the window to see the whole app if the preview is too large for your screen.

5. If the simulator is too big for your screen, hover over one of the screen’s corners until you see a resize handle . Drag the resize handle so that the simulator fits better.
6. In the bottom right corner, click the 1X button, then click the 2X button to see it at 2x again. Notice that it appears to be low-resolution at 2X. That’s because, as we mentioned, it’s set for iPhone size. The 2X button just scales up the app. While the app functions, we can make it a lot better than this.

7. Switch back to Xcode.

   We want to create a universal app for both iPhone and iPad. We can use the code that we’ve written so far for both by making a few changes.

8. Click the Project navigator tab if you’re not already in it.
9. Click on the Jive Factory project name (not the folder) at the top of the Project navigator to open the Project Settings Editor.

10. Slightly to the right of the Project navigator, to the left of the General tab, make sure Jive Factory is selected as a Target.

    

11. If you are not in the General tab, click on it at the top.

12. You may remember that at the beginning of the book, we told you to set this app for iPhone only. In the Deployment Info section, from the Devices menu, change iPhone to Universal.

    NOTE: Xcode will create a Universal app by default.

13. Let’s see what that did. Click the Run button.
14. When the Simulator finishes loading, notice the app now displays in the iPad layout. Cool!
15. At the bottom, click on the Map tab. Looking good.
16. At the bottom, click on the Featured tab.

17. Click on the Nicole Atkins cell to go into the detail view.

    As you can see, the content positioning/layout is still designed for the iPhone. With the wider screen size, we really need to rethink how we are laying out this app on the iPad. We should create a new layout for the iPad that takes advantage of the extra screen space.

18. Switch back to Xcode.

Creating a New Storyboard for iPad

Within the project, we’re going to create a new storyboard, specifically for the iPad layout, so that we can leave our original storyboard for iPhone as is.

1. In the Project navigator, click on Main.storyboard. (We want the new storyboard to come after this file.)
2. Hit Cmd–N to open a new file.
3. In the template dialog, Under iOS and User Interface, double–click on Storyboard.
4. Next to Save As, type: Main_iPad.storyboard
5. You should be in the Jive Factory folder so click Create.
6. Let’s copy all the elements from the original iPhone storyboard to our new iPad storyboard. In the Project navigator click on Main.storyboard.
7. If the Document Outline is open, click Hide Document Outline .
8. If the Debug area is open, click the Hide the Debug area button at the top-right corner of Xcode.
9. Click onto a blank area of the Editor, then press Cmd–A to select all.
10. Press Cmd–C to copy.
11. In the Project navigator, click on Main_iPad.storyboard.
12. Click onto an empty area of the Editor and hit Cmd–V to paste.
13. Click the Hide Document Outline button .
14. Ctrl–click or Right–click on an empty area of the Editor and choose Zoom to 50% so you can see everything.
15. Click onto a blank area of the Editor to deselect everything.
16. Click the top bar of the Tab Bar Controller to select it.
17. Hold Shift and click on the top bar of each of the other controllers until they are all outlined in blue (selected).
18. At the bottom of the Editor, click on View as: iPhone 13 Pro… (or whichever device view it is set to) to show the different display options.
19. Click on iPad Pro 9.7".

20. As shown below, arrange the controllers so that they have the same setup as the iPhone storyboard (feel free to zoom out as needed):

    

21. We also need to specify the Initial View Controller again. Select the Tab Bar Controller.
22. In the Attributes inspector tab , in the View Controller section, check on
    Is Initial View Controller.
23. Now that we have the iPad storyboard, we need to tell the Xcode project to use it for iPads. In the Project navigator, click on the Jive Factory project name to open the Project Settings Editor.
24. In the General tab, in the Deployment Info section, set Devices to iPad.

25. From the Main Interface menu, choose Main_iPad.storyboard.

Setting the Interface Orientation

For the iPad, it would be nice if we had the bands listed on the left, so that when one is tapped, the details would load on the right. In the next exercise, we’re going to use something called a split view controller to do this. The split view controller works best on a landscape orientation, so we’re going to lock the iPad into landscape orientation. While we’re at it, let’s also lock the iPhone into portrait orientation because our app wasn’t designed for landscape on the iPhone.

1. You should still be in the Project Settings Editor. If not, in the Project navigator, click on the Jive Factory project name to open the Project Settings Editor.
2. First let’s set the iPhone. Next to Devices, set the menu to iPhone.
3. Next to Device Orientation, we only want Portrait to be checked. If any other orientations are checked, uncheck them.
4. Now for the iPad. Set Devices to iPad.
5. Click the appropriate orientations on or off so only Landscape Left and Landscape Right are checked.
6. We want to be able to use this app on all devices, so set Devices to Universal. This will remember the orientation settings we assigned for each type of device.

7. Click the Run button.

   When the Simulator finishes loading, notice the iPad app now defaults to landscape orientation!

8. Choose Hardware > Rotate Right to see that it won’t switch even when the device is rotated (which is what we want for this app).
9. Choose Hardware > Rotate Left to switch back to normal.
10. Switch back to Xcode.
11. Click the Stop button.
12. In the Project navigator, click on Main_iPad.storyboard.
13. Notice the controllers still appear in portrait orientation. Let’s change them to landscape mode. Select the Tab Bar Controller.

14. At the bottom of the Editor, under View as change the Orientation to Landscape .

    Notice all the controllers connected to the Tab Bar Controller have also switched to landscape mode.

15. The controllers may be overlapping. If so, move them apart so they have some space between them and no longer overlap.
16. Go to File > Save.

17. Keep this file open. In the next exercise, we’ll make the app look more suitable for the iPad by adjusting the UI and adding a Split View Controller, which is only available for the iPad.