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.

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: Replicate every UI element on the iPad Storyboard (copy and paste will do) and adjust position and size as you see fit Re-wire everything again. Every button, segue (you'll have to add the segue name again too), etc. 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 If you have any localization on the application you'll have to update the new UI elements on the iPad Storyboard 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.

ios5migrationportstoryboarduniversal

Juan González

Reputation: 1526

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

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.

Upvotes: 9

Answers (3)

Arun_

Reputation: 1826

Open the Storyboard file in finder,Copy your iPhone-Storyboard and rename it Main-iPad.storyboard

Inside xCode, right click on the storyboard -> “open as” -> “Source Code”

Search for targetRuntime="iOS.CocoaTouch"and make it targetRuntime="iOS.CocoaTouch.iPad"

Now save everything and reopen Xcode -> the iPad-Storyboard contains the same as the iPhone-file but everyting could be disarranged you have to arrange it by your self.

Finally to get the iPad format also change the code in the MainStoryboard_iPad.storyboard from: to

Then go to your "StroryBoardEx-Info.plist" file,search for "Main nib file base name (iPad)" and make it "Main-iPad.storyboard"

Upvotes: 4

Cekk

Reputation: 159

If you just want to reuse your iphone storyboard, just go to your project settings. In TARGETS tab Info, there are rows 'Main storyboard file base name' and 'Main storyboard file base name (iPad)'. Just edit the iPad one to have the same value as the other. In my case I had to edit it as 'Main storyboard file base name (iPad)' with value 'MainStoryboard_iPhone'.

Upvotes: 3

Juan González

Reputation: 1526

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:

Replicate every UI element on the iPad Storyboard (copy and paste will do) and adjust position and size as you see fit
Re-wire everything again. Every button, segue (you'll have to add the segue name again too), etc.
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
If you have any localization on the application you'll have to update the new UI elements on the iPad Storyboard
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.

Upvotes: 12

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

Answers (3)

Related Questions