How to convert your iPhone Storyboard into an iPad Storyboard

Sometimes it’s just easier to start from an existing Storyboard rather than build everything again from scratch. Especially so when you want to create an iPad version of your iPhone app.

When you change your deployment info to Universal, Xcode even offers to copy your existing storyboard for you. That’s really nice – but even though it behaves like an iPad storyboard, when you open it in Interface Builder it still looks like you’re creating an iPhone layout. This makes re-arranging things difficult.

Help it at hand with a simple tweak. Under the hood, a Storyboard is just an XML file and as such as a plethora of key/value pairs we can change by hand.

First, make sure you display your layouts in “3.5inch” mode. You can do that by clicking that little icon at the bottom of Interface Builder:

Screen Shot 2014-05-19 at 11.20.25

Next head over to the File Inspector and right-click your storyboard, then select “Open as Source Code”. This will display all that XML code.

Screen Shot 2014-05-19 at 11.08.32

In the second line of the document you’ll find a very long line – somewhere in it you’ll find something like this:

targetRuntime="iOS.CocoaTouch"

Simply change that line to

targetRuntime="iOS.CocoaTouch.iPad"

This will make Interface Builder display your storyboard with iPad characteristics. All we now have to do is to make it look like a Storyboard again rather than XML code – so head back and right-click on the file again, then select “Open as Interface Builder – iOS Storyboard”.





Jay is the founder of Pinkstone Pictures and WP Hosting. He has been developing iOS Apps since 2011, 9 of which have made it to the App Store. In his spare time he likes to develop WordPress plugins or drawing on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.