Developing for the iPad is nearly identical as developing for the iPhone, so you should almost always release a version of your application for both. iPad users can always run your iPhone application in 2x mode (which stretches your iPhone application to fit the dimensions of the iPad screen), but this makes for an overall poor experience.
In a development document1 called "Introducing Universal Application for iPhone OS", Apple provides a clear and concise document for creating your application for both the iPhone and the iPad. Rather than restating that document, we felt it would be more beneficial to walk you through how to update an iPhone app to support the iPad in converting an actual application.
You’ll follow a few standard steps to convert iPhone applications into iPad applications:
1 Configure Xcode. Add iPad to the build target.
2 Update the Info.plist, which is needed to support multiple interface orientations.
3 Add iPad-specific interface components.
4 Update the views. Because the device is larger, you need to update the frames of all your views.
5 Add multiple-orientation support.
In this topic, you’ll convert the collage application that you created in topic 11 to an iPad application.
Configuring Xcode
The process for updating your build target to include iPad support is simple. This is because the latest version of Xcode includes a tool that performs the migration for you. Apple strongly recommends against manually updating your files to support the iPad.
Figure D.1 Upgrading your build target for the iPad
Follow these steps:
1 Open the collage project in Xcode. This is a project we created in topic 11, section 11.4.
2 Select collage project in the navigation view. The editor view will display the project summary. Select your collage target, and choose Universal for Devices option (see figure D.1).
3 Xcode will present a dialog to confirm that you would like to transit to universal target. Select Yes.
As soon as you perform the upgrade, you’ll notice that an iPad folder is added to your project. It contains a new Main-Window-iPad.xib file for the main window of your application. Now run the application in the iPad Simulator. Because you have multiple targets, you must specify which target to run. Make sure the target is iPad 4.3 Simulator. (see figure D.2).
Your application should now run in the iPad Simulator (see figure D.3)
Figure D.2 Collage application running on the iPad
Figure D.3 Set the target to collage-iPad 4.3 Simulator.
Notice that most of the interface is resized for you. This is because you have a simple interface composed of native UI elements. More complicated interfaces would require more updates.
Updating Info.plist to support multiple orientations
In all iOS applications you can define the support interface orientations. In order to do this, you must add the UISupportedInterfaceOrientations key to your project’s Info.plist. The steps to do this manually are as follows.
1 Open the Info.plist file, right-click in the plist window, and select Add Row.
2 In the Key column, type UISupportedInterfaceOrientations~ipad. The ~ipad after the field denotes that this field applies to the iPad only. You can just as easily add ~iphone or ~ipod to apply the field to the other devices.
3 Right-click the field and set the value type to Array.
4 Right-click again, add a row, and add each of the three interface types. Figure D.4 shows what the plist should look like when you’re finished.
Alternatively, you can simply update Info.plist to support multiple orientations by several mouse clicks. Select collage Targets and under Summary tab, drag down to iPad Deployment Info. You will find the Supported Device Orientations. Click on Portrait, Landscape Left and Landscape Right options.
Figure D.4 Collage application running on the iPad
If you tap the arrow in the lower-left corner of the screen to add images, the application present the "UIImagePickerController modally instead of via the UIPopover-Controller". You’ll now make the necessary change to correctly display the picker.
Adding iPad-specific interface components
With the iPhone, the UIImagePickerController is presented modally. The iPad screen is much bigger, so it’s recommended to present a list of options using a UIPopover-Controller instead. As you start experimenting with iPad development, you’ll notice little changes like this that vary from project to project. The compiler generally notifies you of these issues by printing a message to the terminal.
You can use a simple method from the SDK to determine the device for which you’re building. Based on the build device, you handle the UIImagePickerController differently. Open the file collageViewController.m, and update the choosePic method to look like the following listing.
Listing D.1 Adding compiler directives in collageViewController.m
As of this writing, this is the currently accepted way to determine if you’re building for the iPhone or the iPad. Although the condition of the if statement is likely to change in the future, the logic will remain the same.
You first determine if the build target is the iPad O. If so, the code displays the UIImagePickerController inside of a UIPopoverController that is oriented around the button that was tapped. The picker’s behavior remains the same—it’s just presented in a different manner. Finally, the code presents the picker modally if you’re building for the iPhone.
The application is now almost fully functional. You can choose photos, add them to the screen, and move and scale them. But one problem remains: if you notice, the area that you have to work with is restricted to 320 x 400 pixels. This is because you need to update the frame of the working area.
Updating your views for the iPad
When you’re updating applications, you’ll spend the most time updating your view frames. If you’re an iPhone developer, you’re probably so used to the 320 x 480 resolution that you have no problem hardcoding those numbers in your applications. Because you now have a 1024 x 768 interface, you must make your view sizes a little more dynamic.
The best approach to resizing views is to make all of their sizes relative to the device size. That way, you can build for all devices without using compiler directives. You can obtain the size of the screen by using the following method call on UIScreen:
This returns a CGSize containing your device’s height and width. What makes it even more dynamic is the fact that these values are automatically adjusted when the device is rotated. This will aid you in the next section as well.
In the collage application, two major areas break on the iPad. The first is the working area in which you can place images: currently, you’re restricted to the 320 x 480 resolution. Second, the UISlider has been absolutely placed and appears in the center of the screen. Figure D.5 shows these issues.
Let’s start by solving the issue of photos being restricted to the 320 x 480 frame. Open tempImageView.m, and change the touchesMoved: method to look like listing D.2.
Figure D.5 Broken interface on the iPad
Listing D.2 Updating the image-view frame in tempImageView.m
You get the current dimensions of the device’s screen O and then restrict the x position of the user’s photo to the screen bounds ©. You do the same thing for the y coordinate ©.
If you run the application at this point, you can drag the photos all around the screen. But there is still a problem with the UISlider: it’s obviously in the wrong area.
In the original application, the UISlider was positioned to appear on top of the toolbar. You did this by placing it on top of the UIToolbar at the bottom. This wasn’t the best approach for building on multiple devices. The solution is to add the UISlider as a subview of the UIToolbar. That way, as the UIToolbar scales and rotates, so does the UISlider. Open CollageViewController.m, locate imagePicker-Controller:didFinishPickingImage:, and update the lines
Now that the UISlider is a subview of the toolbar at the bottom, you won’t have to worry about its positioning. It will always appear in the toolbar next to the Done button. Figure D.6 shows the updated interface with these improvements.
Figure D.6 Updated iPad interface
The application is starting to look much more complete. But one problem remains: when the user rotates the device, the interface stays in portrait mode. You need to tell the interface to rotate as well as update the frames of the main views.
Adding multiple-orientation support
As we mentioned earlier, adding support for all orientations is necessary for iPad applications. To do this, you must implement the shouldAuto-rotateToInterfaceOrientation method on all your views. This method should respond to the interface changes and return YES. To update the application, open col-lageViewController.m and add the following code:
Because you’ve been careful when updating your view frames in the previous topics, no real work is needed here. The code returns YES if you’re building for the iPad device and returns YES for the iPhone if in portrait mode.
Figure D.7 The collage application in landscape mode
All built-in interface components should rotate and resize automatically. Problems generally occur when you create custom views with hardcoded sizes. Making sure you develop according to the device’s screen size will drastically reduce the amount of work you have to do in this method. Figure D.7 shows what the final interface looks like in landscape mode.
For the most part, converting applications won’t be as simple as this, because the collage is such a basic application. But the conversion patterns are the same. For more information about how to support universal applications please read the Apple’s developer article titled "Introducing Universal Application for iPhone OS" as listed in the beginning of this topic.
