How To Port an iPhone Application to the iPad (Storyboard)

Juan González picture Juan González · Jan 27, 2012 · Viewed 9.4k times · Source

I just finished my iPhone app and I want to make it Universal. I've read a few posts already but they're a bit old (2010 or so).

What I got:

  • Simple iPhone app, recently created (iOS 5 - Storyboard), with three screens.
  • My app represents a table with three cards that you can flip touching them. The user can input (on the second screen) text to be displayed on the cards.
  • When I created the project I checked "Universal" so I have two Storyboards. After that nothing else I did had to do with iPad (except for a line on my "contact support" email option where I used UIModalPresentationPageSheet).

What I'd like to accomplish:

  • Same app on the iPad: my application is so straightforward I don't have any use for split views or details. I just want the same objects and layout but with bigger and better graphics (table, cards, etc).

I like it because it'd make a great introduction-level migration.

I have no idea where to start. When I run the iPad simulator a white screen comes up and that's it.

Answer

Juan González picture Juan González · Feb 1, 2012

Well this is done.

As with almost everything, this is pretty easy once you know what to do.

I'd say that for those cases like mine, where the UI doesn't change in more than sizes or (x,y) coordinates the process could be summarized like this:

  1. Replicate every UI element on the iPad Storyboard (copy and paste will do) and adjust position and size as you see fit
  2. Re-wire everything again. Every button, segue (you'll have to add the segue name again too), etc.
  3. Verify within your code every place where your UI is affected (e.g. x,y coordinates), identify whether the app is running on an iPhone or iPad, and divide your code accordingly
  4. If you have any localization on the application you'll have to update the new UI elements on the iPad Storyboard
  5. Select the target for testing on the simulator and try it out

In order to identify in which device the app is running you can use the following:

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
    //I'm running on the iPad
} else {
    //I'm running on the iPhone
}

And that's it. Again, in a simple case like mine the reuse of code is absolute (100%), the new code you'll have to add is minimum (basically IF statements where needed), and the UI elements duplication is as easy as copy and paste.

I hope this is useful to someone else and if you have recommendations to improve this they're more than welcomed.