Simplest way to load UIView from Xib files

Custom views are best maintainable in separate Xib files, so a convenient workflow for loading UIView from Xib is gold.

Custom views are best maintainable in separate Xib files, so a convenient workflow for loading UIView from Xib is gold.

This method is simple.

//Wow!
[[self.view addSubview:[MenuView loadFromNib]];

It takes only a single class to setup, so if you’re in a hurry just grab the files from GitHub, and take a sudden look at the Xib setup image below.

Use eppz! UIView from Xib at

The lightweight setup to load UIView from Xib

The method has three role player. First, an Interface Builder Xib file that holds a configured view we want to load. The middle player is a smart but death simple helper object EPPZViewInstantiator with the sole purpose of load a Nib file, and have a reference to a view in it. The third is a tiny UIView category (Instantiate) that uses the previous helper object to provide the lovely +loadFromNibNamed: method. Also has an alias +loadFromNib that tries to load the view from a Xib file having the class name as the file name.

In the Xib file the setup is easy. Just set the File’s Owner class to (Instantiate) and bind the view you want to load to it’s view outlet.

UIView from Xib - Just hook up the view you want to instantiate with the view outlet of File's Owner.

Just hook up the view you want to instantiate with the view outlet of File’s Owner.

You may noticed that the MenuView above is embedded into a wrapper view. By this trick you can define the position of the view in it’s superview contained in the Xib file. This setup can ensure that MenuView can have a frame property right after loaded from the Xib, so you don’t have to nudge the instance in by code in the controller that is to use MenuView.

If you feel explorous, you can see all the prequisites that lead to this solution in a previous post 5 approach to load UIView from Xib.

DISCLAIMER. THE INFORMATION ON THIS BLOG (INCLUDING BUT NOT LIMITED TO ARTICLES, IMAGES, CODE SNIPPETS, SOURCE CODES, EXAMPLE PROJECTS, ETC.) IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE INFORMATION ON THIS BLOG (INCLUDING BUT NOT LIMITED TO ARTICLES, IMAGES, CODE SNIPPETS, SOURCE CODES, EXAMPLE PROJECTS, ETC.).

  • Pingback: 5 approach to load UIView from Xib | eppz!()

  • Martin Varendorff

    I like your construct, which moves away boilerplate code.
    This works very nicely for cells, which contain content, but when you add a button (like DeleteCell)
    to such a cell on the Xib, you have trouble hooking the button up with the controller,
    since the controller is not the file’s owner of the xib file.
    And the Class for the cell has only access to the model for the cell, but not for the entire model, so it does not
    know how to delta a cell within the model.
    Do you have an elegant solution for this situation?

  • eppz

    For hooking up actions:

    You can define the IBAction on the cell subclass itself, making the cell it’s own controller as well (in IB you won’t hook up action to the file’s owner, but to the cell). This makes sense, as “external” parties should have no idea about what user interaction is going on within a cell, maybe you can wire in a delegate callback, like cellDidRequestDelete:(MyCellClass*) cell; or something.

  • eppz

    For the model shifting:

    I’m not really get what you mean by “delta a cell within the model”.

    You may equip your model objects with many features, like -(MyItem*)previousItem;, -(MyItem*)nextItem; -(MyItem*)itemForIndex; and such. Also you should put a weak reference to the parent item of every model object, so you can query the containing collection for neighbouring items (all implemented in the model).

    So once you clarify the situation, I’d be more than happy to figure out some gently encapsulated design.

    Until than you may want to take a look on http://eppz.eu/blog/custom-uitableview-cell/ where I laid out a similar design with cells.

  • eppz

    (this comment UI really sucks anyway, maybe I’ll adjust some CSS later on)

    • Or switch to Disqus ­čÖé

  • grig

    This is really unclear. Moving on to another way.

  • Mocode

    Very nice work! Just shows that elegence and awesome code need not be complex,.
    Very innovative my friend!.
    -mocode

    • eppz

      Thanks there! I bet you’d like some other posts around here as well then.