Tuesday, February 17, 2009

Creating a Working Nib File With Interface Builder

Interface builder has given me fits. I would do what I think I had to do and BOOM! it would blow up. Other times I would try to do what I thought I should do and it wouldn't let me do it! Well this post is going to be a mini tutorial on how to throw together nib files that actually work with your iPhone project!

Let's stop for a moment and talk about Interface Builder. This program comes with the iPhone SDK. It can be launched from XCode when you double click on a nib (xib) file in your project, or, it can be launched by clicking on a xib file, or by starting it stand-alone. I usually use it from XCode since this is where I'm doing most of my work.

What Exactly is Interface Builder?
This program has been around awhile and is used to design user interfaces. It allows developers/designers to layout their user interfaces in a drag-and-drop visual format instead of having to construct the whole interface using code. This can greatly speed up the development process, and, it can make it possible for non-developers who are designers to be able to do their work. Its been used to design window layouts for Mac applications for quite some time. Apple engineers have now made it possible to design iPhone GUIs on it as well!

Steps... Although you don't have to do things precisely the way I am, I recommend you follow these steps in the same order:

  • Before creating your nib file in Interface Builder, create the View Controller sub-class you want to use with it. Highlight "Classes" in your project's tree view, and create a new class based on UIViewController. You might name it something like "InvoiceViewController".

  • Now, click on "Resources" in you project's tree view and create a new nib (xib) file... use the View xib template! You might name it something like: "InvoiceView". Remember that your nib file basically is going to contain a view for your app with all its various controls.

  • In your code, you are going to create an instance of an object from your view controller class. This object will "control" your view. Inside of this object will be a "view" object. For your code and nib file to work together properly, you need to link up the view object in your view controller to the View inside of your nib file. The next few steps tell you how.

  • Double click on your new nib file in your XCode Project. It will open up in Interface Builder.

  • Bring up the Document window if its not showing already. It basically looks something like the window on the right in the screen shot at the top of this post. It may look a little different depending on which view mode is being used.

  • Don't put any controls/tables/sub-views on the view until later (we'll tell you when).

  • Click on the "File Owner" Icon. If the window wasn't highlighted to begin with, you may have to click on it again to actually select it.

  • Make sure that the "Attributes" window is showing and pick the (i) tab.

  • There will be a class name to select for the File Owner to be. The default is NSObject. Not very useful! Change it to the name of your view controller class. In our example, we would put "InvoiceViewController". If we didn't do this, Interface Builder (IB) would not know how to hook up its View to your view controller's view! File Owner is the name of the class that is going to "own" or "control" this nib.

  • Now, make sure "File Owner" is still selected and, on the Attributes window, you will see a tab that looks like a little white arrow pointing to the right on a bright blue circle. Click it.
  • You will see all the events and objects that the File Owner (your view controller class) supports. One of them will be view.

  • There will be a little circle outlined in black to the right of it. Click it, hold down your mouse and drag the line that appears to either the View icon in the Document window or the View window. It will highlight, when it does, release your mouse. You will see that a linkage has been created.

  • Save your work.

  • Note that at this point, it is okay to add your sub views/tables/controls.

Now if you use this new nib file in your project, it should not blow up on you. Note that I have not covered capturing events in this mini tutorial, or setting label values programatically, etc. This is just covering setting up a nib file so that it will load properly in your iPhone project.

Hope this helps!


  1. Thanks for this post - Perfect steps. (If only I'd read them before trying to create and use new xib's!)



    Why can't the people writing the content on the Apple developer website explain it like this???

  3. Thank you. I was following the iPhone101 and it skipped steps in creating the xib. So I was stuck with how to link File's Owner and View together. Your blog was very useful and informative.

  4. Thanks! Perfectly concise and simple introduction to XIBs, brilliant.

  5. Thank you ... this is really good. Thank you for taking all the efforts.

  6. What I was missing was setting the Class of File's Owner right. So once more: thank you for your effort explaining.

  7. super.. thanks a lot.. i've been trying to do it all day long

  8. Thank you very much!!! I was doing a google search with the keyword "File Owner Interface Builder" because I am new to Mac development and Interface Builder it is a while new world for me.

    Thank you for your post!!! I finally understood what is this.

  9. This is an excellent, clear post!

    I am having a problem though.

    I am using XCode 3.2.3. and building with Base SDK 4.0. When I create the View XIB file, it does not open in IB (double-click) unless I change the file type from sourcecode.xib to file.xib. After making all the linkages in IB, it builds without errors, but the view does not appear in the Simulator.

    What I am doing wrong?

  10. Fixed my problem. I was initiating the View Controller incorrectly. Not with the nib filename the View. This is counterintuitive, at least to me, initiating View Controller with the nib name of the View.

  11. Hello Ryz, glad you figured out your problem! I haven't used the 4.0 SDK just yet.


Note: Only a member of this blog may post a comment.