iOS 5 Programming Cookbook

4.4. Adding a Storyboard to an Existing Project

Problem

You have already coded your app without storyboards and now you would like to start using storyboards instead handling the flow of your app manually.

Solution

Follow these steps to allow your non-storyboard apps to take advantage of storyboards:

1. From the File menu, choose New→New File...

2. In the New File dialog, make sure you have selected the Resource subcategory of the iOS category on the left. Then choose the Storyboard item on the right and press Next (see Figure 4-24).

   

   Figure 4-24. Adding a storyboard to an existing application

3. In this screen, pick the Device Family for which you want to create your storyboard. If your app is an iPhone- or iPad-only app, pick the appropriate device family. If your app is universal, you will need to select one device family now, create the storyboard file, and then come back and create another one for your other device family. Once you are done, press the Next button.

4. Now select where to save your storyboard. I had a universal app based on the Single View Application template, so I have now created two storyboard files under the names StoryboardiPhone.storyboard and StoryboardiPad.storyboard.

1. In your project structure, find the Info.plist file. Note that this .plist file might have been stored under a different name. For instance, I have named my project Adding a Storyboard to an Existing Project and my Info.plist is stored under the name Adding a Storyboard to an Existing Project-Info.plist. Once you click on this file, the property list editor will open automatically.

2. If you have any of these keys, delete them from the .plist file, because storyboarding renders them superfluous:

   • NSMainNibFile (might appear as Main nib file base name).

   • NSMainNibFile~ipad (might appear as Main nib file base name (iPad)).

3. If you have an iPhone or iPad only app, create a new key called UIMainStoryboardFile for iPhone or UIMainStoryboardFile~ipad for iPad. If you have a universal app, create both these keys.

4. For the values of these keys, provide the filenames of the storyboards that you created without the .storyboard extension.

5. Make sure to save the .plist file.

6. Last but perhaps most important, remove the code that set up the view controllers from the application:didFinishLaunchingWithOptions: method in your app delegate’s implementation. With storyboards, you will no longer need to set up view controllers manually in your app delegate, so have a look at the aforementioned method and remove the unnecessary setup.

Discussion

Apps created without storyboards (either on older versions of Xcode or using the new versions without storyboarding) have a different structure from apps that use storyboards. For one thing, the storyboard-based apps no longer use a main nib file for their windows. So this file needs to be removed from the .plist of our app. The other thing to do, as we saw in the Solution section, is to make our app understand what our storyboard files are by setting them in the .plist.

Once all that is done, we need to make sure that our app delegate is not messing with how we intend to load our storyboards. Every project is different, and you need to make sure that the app delegate is not assigning any object to the rootViewController property of the window. If it does, your storyboards will not be displayed and you will spend hours and hours trying to find out what the issue is. The easiest solution is to simply comment out the entire application:didFinishLaunchingWithOptions: method and consider putting your initialization (for instance, initializing any data models) in other places in your app. An alternative is to simply leave this method as it is but comment out any lines that might be changing the window’s root view controller object.