Combining Storyboards and XIBs in Xcode

Posted on Nov. 12, 2013

You're zipping along prototyping your app using Interface Builder and storyboards. But now you want to reuse a scene all over the place. What do you do? Combine the power of storyboards and XIBs by mixing them!

You could segue from many different areas, but unless the view controller behaves quite similarly, you'll soon run into issues with IBOutlet and IBAction mappings. The best solution? Use a XIB for those tricky areas.

Learning iOS? Subscribe to my iOS articles, tips and tutorials.

You could also have the same Controller.h and Controller.m files, but build the scene in Interface Builder multiple times. But this is a pain to maintain and error-prone.

How do we do this? Quite simple actually. As always, a few assumptions first:

  1. We're using a UITableViewController somewhere in the storyboard.
  2. When we click on a cell of the above table, we want to segue to our custom view controller. However, don't set up any segues related to this yet.

First off, create your new view controller, making sure it subclasses UIViewController and that you tell Xcode to use a XIB. Let's call it CustomViewController. Feel free to add buttons and labels to your XIB. Connect outlets and actions as necessary.

Now head over to your main storyboard. Add an empty UIViewController onto the canvas and change the identity to CustomViewController. Now here's the key part: using the document outline1, find the View listed under Custom View Controller. Highlight it, and delete it.

And that's it! Now the storyboard will load your custom XIB whenever it segues to this view.

So what are the advantages? You can create segues back from this view to other parts of the storyboard. Granted, you'll have to call them manually, but this is a huge advantage.

Try it: control-drag from your placeholder controller in the storyboard back to the UITableViewController. Highlight the created segue, and in the Attribute Inspector, rename it to backToTable. Then in an IBAction method inside CustomViewController, call:

[self performSegueWithIdentifier:@"backToTable" sender:self];

Moreover, if all these controllers are embedded in UINavigationController, you'll get all these segues for free!


  1. That's the side bar on the left when using Interface Builder. 

Comments

Pieter E.June 6, 2014, 5:40 p.m.

Thank you for this great blog post. I tried your solution and it works excellent when using one single xib file. But adding multiple Views, based on your blog post, crashes the application every time. Do you have any idea how to solve this? Thank you in advance for your response.

Reply
silviogutierrezJune 9, 2014, 8:32 p.m.

I'm afraid I'm not sure how to address this. Thanks for reading.

Reply
BadruMarch 16, 2015, 9:59 a.m.

Thanks.

Reply
Alex ZakJune 23, 2015, 12:52 p.m.

Hey, I tried to follow your steps, but it seems like storyboard in not loading my VC's xib, but rather showing an empty, transparent view... did you ever encounter such a behaviour? any suggestions?

Reply
Kiara KeastFeb. 27, 2019, 10:34 a.m.

The chain f the consumption is filled for the occupation of the challenges. All the issues have been defend for the movement of the collegessaywriter.com for all matters. The hosting is done for the authority of the parts for the humans.

Reply
star19March 7, 2019, 10:13 a.m.

I was wondering what is really on this picture, good things that it is discuss below the picture. Now I know what is the painting all about. Thanks for sharing.
Cgc admission
top agriculture college in Punjab

Reply
hijMarch 28, 2019, 11:18 a.m.

Apple products are revered for its quality, precision and great design. SRSG started its operations as Apple technology partners in the year 1997.
MacBook pro reseller in kolkata
iMac reseller delhi
ipad air reseller in bhubaneswar

Reply
dsdsdMay 6, 2019, 5:33 a.m.

Par conséquent, la manière d'éliminer efficacement les préoccupations des clients en matière de vente est une connaissance et une compétence qui doivent être maîtrisées par le vendeur. replique montre Parce que les vendeurs intelligents savent que si vous ne pouvez pas éliminer fondamentalement les préoccupations de vos clients, la transaction sera difficile à obtenir. audemars piguet montre La raison pour laquelle les clients sont vigilants et inquiets au sujet des vendeurs peut être qu’ils ont été victimes de tromperies lors de leurs expériences précédentes ou qu’ils ont acheté des produits pour se décevoir eux-mêmes.

Reply

Post New Comment