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 ?

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. — dehlen, Jul 09 '12 at 22:21
A detailed info with steps and images found here at http://datacalculation.blogspot.in/2014/09/how-to-convert-iphone-storyboard-in-to.html — iOS Test, Oct 07 '14 at 04:57

score 537 · Accepted Answer · edited Jul 24 '14 at 17:19

537

I found out a kind of solution:

Duplicate your iPhone-Storyboard and rename it MainStoryboard_iPad.storyboard
Close Xcode and then open this file any text editor.
Search for targetRuntime="iOS.CocoaTouch"and change it to targetRuntime="iOS.CocoaTouch.iPad"
Change the code in the MainStoryboard_iPad.storyboard from:

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

<simulatedScreenMetrics key="destination"/>
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

edited Jul 24 '14 at 17:19

Kevin Chen

994
8
24

answered Jan 01 '12 at 19:28

tharkay

5,913
2
26
33

20

+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! – Piotr Justyna Jan 03 '12 at 17:19
45

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. – Ben G Feb 06 '12 at 22:39
63

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" – hokkuk Mar 14 '12 at 16:23
16

@PiotrJustyna you can do that. Press `start a bounty` under the question, select desired amount and `Reward existing answer`... – Filip Radelic Jun 28 '12 at 01:10
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 – Martol1ni Oct 27 '12 at 15:17
My VCs are also in iPhone format, anyone figure out how to change it to iPad format? – Marcus Schwab Nov 06 '12 at 05:46
33

to get the iPad format also change the code in the MainStoryboard_iPad.storyboard from: `` to `` – Marcus Schwab Nov 06 '12 at 06:32
3

May the Planets and Stars smile upon you, David ! You turned 5+ hours of work into 15 minutes. :))) – Howard Pautz Mar 14 '13 at 17:41
1

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". – Brad Parks Jul 31 '13 at 00:54
This also worked for me with a storyboard that was already for iPad but had one UIViewController that I copied from the iPhone storyboard. – Amiel Martin Aug 22 '13 at 18:36
1

XCode fixed the width and height for me automatically. No need to do a massive find and replace. – Alper Nov 06 '13 at 14:40
8

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. -> – catamphetamine Jan 06 '14 at 19:51
2

I feel you need to add one more step of updating the deployment section for different devices. ![enter image description here][1] [1]: http://i.stack.imgur.com/gZrFp.jpg – Dinesh Feb 27 '14 at 18:23
10000+ like for this answer. – Pranav Khandelwal Jul 21 '14 at 12:27
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 . – Aditya Aggarwal Jul 31 '14 at 12:25
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. – user3344977 Aug 28 '14 at 20:41
@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 – Logger Sep 26 '14 at 11:03
I would advise to open project in version editor and make necessary change. As simple as that :) – deepax11 Oct 06 '14 at 16:19
A great answer found here in very simple and easy steps http://datacalculation.blogspot.in/2014/09/how-to-convert-iphone-storyboard-in-to.html – iOS Test Oct 07 '14 at 04:58
where will i find – chetan panchal Sep 21 '17 at 13:42

score 61 · Answer 2 · answered Oct 12 '12 at 22:45

61

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.

answered Oct 12 '12 at 22:45

Malls

735
5
2

9

Best answer, easy solution & allows you to modify the interface easily afterwards unlike the top answer. :) – Matt Reid Jul 13 '13 at 20:49
what about the layout ? – tryKuldeepTanwar Jun 09 '16 at 09:58

score 10 · Answer 3 · answered Oct 13 '12 at 21:55

10

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

Create a new story board file for the iPad version
Open both the new file and the file i want to copy in textwrangler (text editor)
Copied the xml text from old file to the new file between these xml tags
First Tag <scenes> 
Paste Here
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.

answered Oct 13 '12 at 21:55

Nelson Brian

688
6
7

1

+1 the others didn't work for me and this makes everything work as expected – Shereef Marzouk Jan 14 '13 at 11:01
4

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 Kantor Jun 25 '13 at 21:26

score 8 · Answer 4 · edited Jan 05 '15 at 06:22

8

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

edited Jan 05 '15 at 06:22

Shailesh

3,072
3
24
33

answered Jul 10 '13 at 06:38

Kirit Vaghela

12,572
4
76
80

score 8 · Answer 5 · edited May 12 '16 at 10:04

8

1 - Create your "MainStoryboard_iPad.storyboard";

2 - Right-click on you "MainStoryboard_iPhone.storyboard" and "Open as -> Source Code". Copy everything;

3- Right-click on you "MainStoryboard_iPad.storyboard" and "Open as -> Source Code". Paste everything. Now Search and change:

targetRuntime="iOS.CocoaTouch" to targetRuntime="iOS.CocoaTouch.iPad"
type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" to type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.iPad.XIB"

4 - Save. Now reopen but using the interface builder. You will only have to re-arrange.

This method can be used for .xib files too

edited May 12 '16 at 10:04

Mihir Oza

2,768
3
35
61

answered Oct 23 '13 at 16:18

Ricardo Anjos

1,417
18
22

1

This is the best way of doing it. because all the views and components will be resized to ipad format. – Ben Dec 08 '13 at 11:15
1

There's no need for to change type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" in the latest version of ios7. – super9 Mar 10 '14 at 03:23

Bharat · Answer 6 · 2013-10-24T06:17:39.997

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.

Symmetric · Answer 7 · 2012-03-08T19:22:19.923

This is going the other way, but I was able to do a select all & copy in my iPad storyboard (~35 scenes) and paste it into my iPhone storyboard. The scene sizes were automatically adjusted. I only saw two problems, I had to replace UISplitViewController (since it's only iPad), and the default background became transparent instead of gray (still working on fixing that properly, without manually setting the background for everything).

EDIT: It seems the default background for UITableView in the Attributes inspector is rather strange. I had to manually set the background to "Group Table View Background Color" for grouped table views, and "White Color" for non-grouped table views. It then was displayed as "Default" (I assume since it then matched a hardcoded value). -- Actually, even easier, changing from "Grouped" to "Static" and back seems to reset the default color.

score 4 · Answer 8 · answered Jan 15 '14 at 23:32

Here's something that saved me hours and might help those of you with Python skills.

I've been building an app for the last two months, focused on just iPad iterating the UX with the team.

Today focused on building out iPhone version, followed the steps above (thanks!) but I didn't want to then have to resize all the ui elements from iPad dimensions in the visual storyboard editor.

So I wrote this little python jig script to scan through the storyboard file for x, y, width, height and scale everything down by by ratio 320./768. Allowed me then to just focus on fine adjustments.

Copy your iPad storyboard into a new file. (e.g. iPhoneStoryboard.storyboard)
Run the script below with the copied storyboard filename as the first parameter.
Will generate output file with suffix _adjusted.storyboard (e.g. iPhoneStoryboard.storyboard_adjusted.storyboard)

Hope it helps...

import re
import sys
import math

afile = sys.argv[1]

scale = 320./768.

number_pattern = '[-0-9]+(.[0-9]+)?'
#width_pattern = 'width="[-0-9]+( ?px)?"'
width_pattern = 'width="[-0-9]+(.[0-9]+)?( ?px)?"'
height_pattern = 'height="[-0-9]+(.[0-9]+)?( ?px)?"'
x_pattern = 'x="[-0-9]+(.[0-9]+)?( ?px)?"'
y_pattern = 'y="[-0-9]+(.[0-9]+)?( ?px)?"'


def replacescaledvalue(scale,pattern,sometext,replacefmt) :
    ip = re.search(pattern, sometext, re.IGNORECASE)
    if(ip) :
        np = re.search(number_pattern,ip.group(0))
        if(np) :
            val = float(np.group(0))
            val = int(math.floor(val*scale))
            sval = replacefmt+str(val)+'"'#+'px"'
            newtext = re.sub(pattern,sval,sometext)
            return newtext
    else :
        return sometext

fin = open(afile)
fout = open(afile+"_adjusted.storyboard", "wt")
for line in fin:
    newline = line
    newline = replacescaledvalue(scale,width_pattern,newline,'width="')
    newline = replacescaledvalue(scale,height_pattern,newline, 'height="')
    newline = replacescaledvalue(scale,x_pattern,newline, 'x="')
    newline = replacescaledvalue(scale,y_pattern,newline, 'y="')
#   print newline
    fout.write( newline )

fin.close()
fout.close()

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. — Shubham, Nov 14 '14 at 11:35
@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.'? — Charles Robertson, Oct 26 '16 at 16:43

Svitlana · Answer 9 · 2017-08-22T10:06:21.993

4

For Xcode10

Just duplicate Main.storyboard
Then re-name files to Main_iPad.storyboard and Main_iPone.storyboard
Set appropriate names in .plist

4.Just select the proper .storyboard to configure

edited Aug 22 '17 at 10:06

answered Aug 22 '17 at 09:58

Svitlana

2,938
1
29
38

score 3 · Answer 10 · answered Feb 26 '13 at 12:32

3

Go to your Target Summary and change devices to universal, then go down and set the ipad version to any storyboard you like including a copied and renamed one if you like.

answered Feb 26 '13 at 12:32

AMAN77

6,218
9
45
60

score 3 · Answer 11 · answered Aug 21 '13 at 17:27

Just as a quick gotcha note to those who may have had my issue with this:

My issue:

The storyboard content copied over nicely to a new board file I added. However, it would not put changes over to my provisioned iPad. Noticing that I had to switch over the designated storyboard for the build target (see image) let the changes show.

I'd post an image if I had the points, but the setting is located in:

Project navigator on the left side source menu, root target of project (center pane) general tab, (second subhead) deployment info, with the iPad button tab selected.

From there, choose your storyboard under "main interface."

Thanks for the post, I hope this mention helps a snag somewhere.

score 3 · Answer 12 · answered Mar 12 '14 at 16:53

3

Just for fun, on XCode 5.1 and iOS 7.1 I also needed to change the values of "toolVersion" and "systemVersion" to this:

toolsVersion="5023" systemVersion="13A603"

Without this, the new storyboard file wouldn't compile

answered Mar 12 '14 at 16:53

TooManyEduardos

4,206
7
35
66

Ciprian Rarau · Answer 13 · 2015-03-09T13:52:04.660

Using the XCode6 Size Classes you no longer need to convert the storyboard to iPad. The same Storyboard can be used for both the iPhone and the iPad, saving you from keeping two files up to date.

The resulting storyboard is compatible with iOS7+.

Read more about this here: https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html#//apple_ref/doc/uid/TP40014436-CH6-SW1

Use size classes to enable a storyboard or xib file to work with all available screen sizes. This enables the user interface of your app to work on any iOS device.

score 2 · Answer 14 · answered Mar 16 '14 at 00:28

2

This functionality is now built-in. For example, if one changes the project settings in Deployment Info -> Devices from iPhone to Universal, the following dialog will show up:

enter image description here

answered Mar 16 '14 at 00:28

Freddie

1,019
10
11

3

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. – s73v3r Apr 01 '14 at 18:08

score 2 · Answer 15 · edited May 12 '16 at 10:19

I followed this thread when I was hit with the same issue yesterday. The steps I followed

For Xcode 5.1, I had to do some cleanup of iPhone storyboard like missing reuseIdentifiers of Table cells, provide story board id for every controller, remove unused scenes.
Copy MainStoryboard_iPhone.storyboard to MainStoryboard_iPad.storyboard.
Using vi editor - changed targetRuntime="iOS.CocoaTouch" to targetRuntime="iOS.CocoaTouch.iPad"
Change the code in the MainStoryboard_iPad.storyboard from: <simulatedScreenMetrics key="destination" type="retina4"/> to <simulatedScreenMetrics key="destination"/>
Open the project in Xcode.
Changed the Deployment devices to Universal - Chose the option of NOT copying the iPhone Storyboard.
Xcode will default the Deployment Target to 7.1, took care of the deprecated functions.
To fix the misplaced view error in iPad Storyboard - Changed the Frame Layout for Controllers giving errors.

That was it.. Thanks all for your help..

score 2 · Answer 16 · answered Dec 21 '15 at 02:47

There is a really simple solution for Xcode versions that support size classes (Tested in Xcode 7 which is the current version at the time of writing). Check the "use size classes" checkbox on a storyboard file (File Inspector), confirm that dialog that appears. Then uncheck that same checkbox - Xcode will ask you if you want to use this storyboard with an iPhone or iPad, and convert the screens in it appropriately. No need to directly edit the storyboard file. For both iPad and iPhone, just copy the same storyboard and configure one for iPad and one for iPhone using the described method.

And Before someone suggest to use size classes - while great, they are less convenient for heavily customized UI, such as games etc

One of the cleverest tips on all of SO ! Sadly, it no longer works as of 2022. bummer! — Fattie, Nov 30 '22 at 15:46

score 1 · Answer 17 · answered Aug 10 '13 at 19:16

The easiest and most reliable way to do this is to copy paste from your iPad storyboard.

Create a new storyboard and name it something like MainStoryboard_ipad.
Make your app a Universal app by setting the Devices property to Universal on the Summary page of the Target properties for your project.
Open your iPhone storyboard and select all and copy
Open your iPad storyboard and paste.

You'll have to go about resizing, but it can be faster than recreating the whole storyboard.

score 1 · Answer 18 · edited May 12 '16 at 10:14

A Different Approach

Add an empty-View-Controller with Navigation-Controller in the iPad-Storyboard
Change the Class to the Class of your first ViewController used for iPhone, "fooViewController"
Add the Storyboard-Identifier in the iPhone-Storyboard "fooViewController_storyboard_identifier" for the first ViewController
Go to "fooViewController.m"
Add bool Variable bool nibWasLoadForIpad=false
Go to viewDidLoad-Method

if ( UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad && !nibWasLoadForIpad)
{
    nibWasLoadForIpad=true;
    UIStoryboard* Storyboard_iphone=[UIStoryboard storyboardWithName:@"Main_iPhone" bundle: nil];
    fooViewController *controller = [Storyboard_iphone instantiateViewControllerWithIdentifier:@"fooViewController_storyboard_identifier"];
    [self.navigationController pushViewController:controller animated:YES];
    self.modalPresentationStyle = UIModalPresentationCurrentContext;
}

(ps. Know problem is that the view-backgrounds will be set to white)

score 1 · Answer 19 · answered Aug 11 '17 at 16:28

1

I just change (additionally to the answer from @tharkay):

 <device id="ipad9_7" orientation="landscape">

and works great !

I use this in XCode 8.3.3

answered Aug 11 '17 at 16:28

Beto

3,438
5
30
37

score 0 · Answer 20 · answered Jul 04 '13 at 15:05

0

You should create a bug report with Apple. You can say it's a duplicate of mine (10167030) which has been open since September 2011. The frustrating thing from my point of view is that the feature existed in Xcode 3...

answered Jul 04 '13 at 15:05

Stephen Darlington

51,577
12
107
152

score 0 · Answer 21 · answered Dec 31 '13 at 18:52

Thanks for the answers everybody.

I followed the above steps but when I ran the app under the simulator or my iPad it kept on just using the iPhone storyboard.

For some reason, when I changed the target device to be Universal instead of iPhone, Xcode (v5.0) didn't update the app-Info.plist file to include the iPad storyboard, so I had to manually add the following entry (using the plist editor in Xcode):

Main storyboard file base name (iPad) ==> MainStoryboard_iPad

Converting Storyboard from iPhone to iPad

21 Answers21

A Different Approach

Linked

Related