Converting Storyboard from iPhone to iPad

Question

I have an iPhone application which has a storyboard. Now I want to provide an iPad application too. So I asked me whether there is a function which helps me convert my iPhone storyboard to an iPad storyboard.

To be specific:

Is there a similar function or is there only the manual way ?

Solution 1

I found out a kind of solution:

1. Duplicate your iPhone-Storyboard and rename it MainStoryboard_iPad.storyboard

2. Close Xcode and then open this file any text editor.

3. Search for targetRuntime="iOS.CocoaTouch"and change it to targetRuntime="iOS.CocoaTouch.iPad"

4. Change the code in the MainStoryboard_iPad.storyboard from:

   <simulatedScreenMetrics key="destination" type="retina4"/> to

   <simulatedScreenMetrics key="destination"/>

5. Now save everything and reopen Xcode. The iPad-Storyboard has the same contents as the iPhone-file but everyting could be disarranged.

This saved me hours - hopefully this will help you

Solution 2

If you had created a universal project, by default empty iPad storyboard would have been created, you just have to select iPhone storyboard select all (Command+A), copy (Command+C) and paste it on iPad storyboard. Make sure to move the entry point from the empty storyboard to newly copied storyboard before compiling.

Solution 3

That didn't quite work for me. I did something a little bit different.

1. Create a new story board file for the iPad version
2. Open both the new file and the file i want to copy in textwrangler (text editor)
3. Copied the xml text from old file to the new file between these xml tags
4. First Tag <scenes> <!--Contents View Controller-->
5. Paste Here
6. End Tags </class> </classes>

That worked for me. I got a new layoutout with all my outlets connected, which alone saved me a few hours.

Solution 4

1. Create New Storyboard file with MainStoryboard_iPad.storyboard
2. Copy All the views from MainStoryboard and paste to MainStoryboard_iPad.storyboard

Solution 5

From reading many threads on stackoverflow i discovered the solution is-

1.Duplicate your iPhone-Storyboard and rename it MainStoryboard_iPad.storyboard

2.right click on the storyboard -> “open as” -> “Source Code”.

3.Search for targetRuntime="iOS.CocoaTouch"and change it to targetRuntime="iOS.CocoaTouch.iPad"

5.Search for <simulatedScreenMetrics key="destination" type="retina4"/> and change it to to <simulatedScreenMetrics key="destination"/>

4.Now save everything and right click on MainStoryboard_iPad.storyboard “open as” ->"IOS StoryBoard" 5. you may also have to change your constraints. Thats all you have done.

View more solutions

Comments

[dehlen]

oh thanks i didnt know i had to mark them, i marked one answer now as the correct one. I also did this in my old threads, thanks.

[iOS Test]

A detailed info with steps and images found here at datacalculation.blogspot.in/2014/09/…

[Piotr Justyna]

+1 If I could, I would give you +100 from my own reputation. Brilliant advice! The only thing I couldn't do was to open the storyboard with Dashcode, so I used TextWrangler (but I think any text editor would do). Thanks!

[Ben G]

Good advice, thanks. While you're at it, you may also probably want to change all the width="320" to width="768", height="480" to height="1024", etc... directly from here. As it's much simpler than doing it element by element in IB.

[hokkuk]

don’t use Dashcode, nor textWrangler, inside xCode simply: right click on the storyboard -> “open as” -> “Source Code” when done, do the same thing except use “Interface Builder - IOS StoryBoard"

[Filip Radelic]

@PiotrJustyna you can do that. Press start a bounty under the question, select desired amount and Reward existing answer...

[Martol1ni]

When I am changing all the widths and height, the viewcontrollers is still in iphone-format in IB. Am I doing it wrong, or doesn't it automatically change in IB? Excellent tip, by the way. +1

[Marcus Schwab]

My VCs are also in iPhone format, anyone figure out how to change it to iPad format?

[Marcus Schwab]

to get the iPad format also change the code in the MainStoryboard_iPad.storyboard from: <simulatedScreenMetrics key="destination" type="retina4"/> to <simulatedScreenMetrics key="destination"/>

[Shereef Marzouk]

+1 the others didn't work for me and this makes everything work as expected

[Howard Pautz]

May the Planets and Stars smile upon you, David ! You turned 5+ hours of work into 15 minutes. :)))

[Ruhee Jaiswal]

You can do this from within Xcode. Just right/control click on the .storyboard files and click Open As > Source Code to view the raw XML.

[Matt Reid]

Best answer, easy solution & allows you to modify the interface easily afterwards unlike the top answer. :)

[Brad Parks]

I did the above, but my app was displaying fine in Storyboard, but not in the Simulator (still looked iPhone sizes).... To fix it, go to "Project | Build Settings | Targeted Device Family" and set it to "iPad".

[Amiel Martin]

This also worked for me with a storyboard that was already for iPad but had one UIViewController that I copied from the iPhone storyboard.

[Alper]

XCode fixed the width and height for me automatically. No need to do a massive find and replace.

[Ben]

This is the best way of doing it. because all the views and components will be resized to ipad format.

[catamphetamine]

to sum it all up: making universal app: 1. copy the iPhone storyboard 2. targetRuntime="iOS.CocoaTouch" -> targetRuntime="iOS.CocoaTouch.iPad" 3. width="320" -> width="768" 4. height="568" -> height="1024" 5. <simulatedScreenMetrics key="destination" type="retina4"/> -> <simulatedScreenMetrics key="destination"/>

[Dinesh]

I feel you need to add one more step of updating the deployment section for different devices. ![enter image description here][1] [1]: i.stack.imgur.com/gZrFp.jpg

[super9]

There's no need for to change type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" in the latest version of ios7.

[s73v3r]

It may be a bug in Xcode, but I've never had this work. The resultant iPad storyboard doesn't get added to the project, and it doesn't seem like it's created.

[Pranav Khandelwal]

10000+ like for this answer.

[Aditya Aggarwal]

Select Main.storyboard from file navigator then xcode>file>Duplicate, then dialogue popup opens to name the file just name it as Main~ipad.storyboard,then save it and you are done .

[user3344977]

I would just like to add that with xcode 5, and when duplicating the entire project to make a SEPERATE iPad app, I had to do these two additional steps to get this to work properly. I'm not sure if both are required, I just did both before running it and getting it to look correct on an iPad. 1. Target > Build Settings > Targeted Device family > Change all to iPad except "iOS Defaults". 2. Open projectname-Info.plist > Change "Main storyboard file base name" to your ipad storyboard's name.

[Logger]

@tharkay I have existing iPhone project now i want it to support iPad. I followed the same steps but only splash screen and navigation bar coming properly but all components in the view not resizing to iPad those are coming in iPhone size

[deepax11]

I would advise to open project in version editor and make necessary change. As simple as that :)

[iOS Test]

A great answer found here in very simple and easy steps datacalculation.blogspot.in/2014/09/…

[Shubham]

Hi Chrish, I'm new in the phython. so I'm not able to understand the code to change iphone storyboard into iPad. so can you please help me out on this. My ipad storyboard is converting into iphone storyboard without any issues. but I need to convert my iphone storyboard to iPad. So where the require changes to need in above script or you can share the script which convert iphone into ipad. Thanks in advance.

[tryKuldeepTanwar]

what about the layout ?

[Charles Robertson]

@Chris Robertson Chris, if I wanted to use this script for iPhone to iPad conversion, would I change the 'scale = 320./768.' to 'scale = 768./320.'?

[chetan panchal]

where will i find <simulatedScreenMetrics key="destination" type="retina4"/>