Xcode storyboard: Why does the iPad storyboard show iPhone sized views?

Question

I have a universal app that uses storyboards. There is an iPhone storyboard and an iPad storyboard. However, in interface builder, the viewcontrollers for the iPad storyboard are still sized for the iPhone. How do I get the iPad storyboard to show iPad sized view controllers?

I realize that the view controller display in interface builder is design-time-only eye-candy, but having iPhone sized VCs makes it really hard to lay out the UI correctly.

Solution 1

After some digging through the storyboard source code, it turns out that the iPad storyboard was copied from the iPhone storyboard. So, the question really became how do I convert an iPhone storyboard into an iPad storyboard?

The answer is surprisingly simple. I ran across this SO answer -- to convert an iPhone storyboard to an iPad storyboard, do the following:

1. From Xcode, right-click on the storyboard and choose Open As -> Source code

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

3. Right-click on the storyboard again and choose Open As -> iOS Storyboard

The storyboard will now show all views in the correct size.

Solution 2

When you first create a storyboard you select a Device Family (iPhone or iPad) that the storyboard is targeted for. I don't know of a way to change the device family once the storyboard has already been created.

However, to solve your problem I recommend the following:

Create a new storyboard by going to: New -> File -> User Interface -> Storyboard (Be sure to select Device Family = iPad when choosing the options.)

Go to your old storyboard, select and copy everything by pressing Command-A, Command-C. Then go to your and paste everything by pressing Command-V. Your view controllers will now be iPad-sized.

You can then delete the old storyboard and rename your new storyboard to whatever the old name was.

Solution 3

This answer is not a solution, but will help to get one of the reasons why such things happen.

The issue occurs when you try to disable:

"Use Auto Layout"

When you uncheck it, the popup window appears. There is select:

"Keep size class data for: iPhone", by default is selected iPhone (no matter which iPad or iPhone project you created).

If you will not mention on it, your storyboard will be auto converted to iPhone sizes.

Do not forget to choose right device.

Comments

[Bilbo Baggins]

Seems weird that you can actually copy/paste the entire story board.

[Hussain Mansoor]

I also copied the iPhone storyboard for iPad and all views are working fine just 2 textViews. Can you please tell me how to disable this lock or where is this option available because I have not locked anything on my iPhone storyboard. Thanks

[rmvz3]

Thank you very much. This was driving me crazy.

[bladnman]

Thank you Michael! As a note this can also be done on a XIB. The root element of the XIB xml (document tag) has the very same reference to "targetRuntime". Do as Michael advises there.

[Kashif]

I did this and now it only shows iPad for preview (iPhones are gone). any idea why?

[septerr]

I dont get a device family selection when I create a new storyboard. Xcode version is 6.2.

[BigSauce]

You're amazing. Thank you for this answer!

[morph85]

If you have already make the change to iPad and you still cannot find iPhone, in the file property, turn on "Use Size Classes" to see all options including iPhone and iPad size.

[becker]

Cool!! this one did it for me

[Echelon]

Unbelievable that I still had to do this in 2017!

[Rakshitha Muranga Rodrigo]

This is working still in for 2019 / Xcode 11 ... Thanks a lot!

[Rakshitha Muranga Rodrigo]

<device id="ipad12_9" orientation="landscape" layout="fullscreen" appearance="light"/> Check this line of code as well notice the id="ipad12_9" part. (Xcode 13.3.1)