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 ?

Answer 1

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

Answer 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.

Answer 3

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.

1. Copy your iPad storyboard into a new file. (e.g. iPhoneStoryboard.storyboard)

2. Run the script below with the copied storyboard filename as the first parameter.

3. 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()

Answer 4

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.

Answer 5

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

Answer 6

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