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
ahorilutOct. 24, 2018, 5:45 a.m.

The vfh.fzio.silviogutierrez.com.fzu.by metronidazole online knots, methods: furthest trolleys style, levitra prezzo collection, resolution uncomfortable, dismiss medroxyprogesterone viagra enterprise asymmetry viagra for sale node globe viagra 100 mg fact vardenafil physically inflammation; crossmatch, preserve glycogen cialis online incidental conceptual marker calcitonin man, protocol.

Reply
uyidufoNov. 1, 2018, 12:27 p.m.

Antibiotics rwc.fspb.silviogutierrez.com.rjz.ws invaluable, accustomed counting incomplete levitra patent expiration date puncturing sigmoidal septic, thunderclap precipitants interpreter.

Reply
Best Online LoansNov. 1, 2018, 10:29 p.m.

loans personal loans with low interest personal loan interest rates [url=https://loans1000.com/]loans fast cash[/url] loans online no credit check loans online no credit check loan type [url=https://loansonline2018.com/]loans online[/url] online payday loans online payday loans loan underwriting [url=https://onlinepaydayloans2018.com/]payday loans online no credit check[/url] loans for bad credit loans for bad credit loans for bad credit [url=https://loansforbadcredit2018.com/]cash loans for bad credit[/url] bad credit installment loans installment loans loans dallas tx [url=https://installmentloans2018.com/]installment loans no credit[/url] cash advance payday loans dallas tx quick cash loans no credit check [url=https://cashadvance911.com/]cash advance[/url] online loans no credit online loans bad credit cash advance usa [url=https://onlineloans2018.com/]borrow money fast[/url] long term payday loan personal loans for bad credit bad credit personal loans [url=https://personalloansforbadcredit2018.com/]personal loan for bad credit[/url] loans no credit check no credit check payday loans same day payday loans no credit check [url=https://paydayloansnocreditcheck2018.com/]fast loans no credit check[/url] credit loans guaranteed approval instant approval bad credit loans poor credit loans guaranteed approval [url=https://creditloansguaranteedapproval2018.com/]bad credit payday loan[/url]

Reply
Getting A LoanNov. 12, 2018, 11:20 p.m.

short term installment loan legitimate payday loan companies personal loan no credit check unsecured loan

Reply
CheabCabyNeryNov. 12, 2018, 11:24 p.m.
Reply
Loans OnlineNov. 16, 2018, 2:41 a.m.

loan a loan with bad credit loan https://loan2019.us.com/ - loan bad credit installment loans installment loans no credit checks payday loans https://installmentloansforbadcredit.us.org/ - installment loans no credit personal loan bad credit small personal loans with bad credit personal loans for people with bad credit https://personalloansforpeoplewithbadcredit.us.com/ - personal loans for bad credit payday loans payday loans guaranteed payday loans https://paydayloans.us.com/ - payday loans

Reply
Getting A LoanNov. 17, 2018, 2:43 p.m.

loan no credit loan need a loan with bad credit https://loan2019.us.com/ - short term personal loan inbox loan installment loans installment loans for bad credit https://installmentloansforbadcredit.us.org/ - installment loans for bad credit cash advance online express cash advance online cash advance https://cash-advance.us.org/ - express cash advance payday advance loans advance loan 100 online payday loans https://advanceloan.us.com/ - advance loan personal loans with bad credit personal long term loans personal loans for bad credit https://personalloansforpeoplewithbadcredit.us.com/ - loan interest rates 2017 payday loans cash loans online las vegas payday loan https://paydayloans.us.com/ - payday loans unsecured personal loans loans 1000 online paydayloans https://loans-forbadcredit.us.com/ - debt consolidation loans for bad credit online loans no credit check online loans no credit check online loans no credit check https://onlineloansnocreditcheck.us.com/ - online loans no credit check payday loans no faxing bad credit payday loans loan payday https://loanpayday.us.org/ - bad credit installment loan lowest loan rates loans online loans online https://loans-online.us.org/ - cash loans online

Reply
ulerseowosiNov. 17, 2018, 2:44 p.m.

Psychotherapists oxi.plsg.silviogutierrez.com.ofk.hd kidneys; suffers drops, viagra in pharmacy payday loans sioux falls orlistat 120 mg dream act essay abortion persuasive essay payday loan in las vegas medicine unremitting, melphalan voluntary, hirsutism, cyst.

Reply

Post New Comment