iOS Programming Recipe 6: Creating a custom UIView using a Nib

Creating a custom UIView using a Nib

Assumptions

1. You are familiar with creating UIView subclasses, and instantiating UIView’s both from a Nib file or in code
2. You are familiar with Nib files

Background

Sometimes you find yourself trying to create a quick composite UIView (UIView subclass w/ multiple subviews) where a UIViewController doesn’t seem necessary Please note that a UIViewController is the right choice most of the time. This can be a real pain to setup entirely in code if you have many subviews, and god forbid if you want to use auto layout! So you may find yourself wanting to use a nib to simplify things a bit, well this tutorial will go through the process of doing just that.

Getting Started

• Create a new Xcode project based on the single view application template for iOS. This tutorial will assume you are using ARC, so you may want to make that selection when creating the new project.
• Once you have created the new project a new UIView subclass to the project and name itCustomView.
• Then create a new Nib file named CustomView.nib and add it to the project.

Setup the UIView Subclass (using a nib)

• Open the newly created nib and add a UIView to it.
• In the Attributes Inspector under the Simulated Metrics section, click the size drop-down menu and select none, this will allow you to resize the UIView to whatever size you like.
• Resize the view to something like 200×300.
• With the newly added UIView selected open the Identity Inspector and change the classname to CustomView matching the one you previously created.
• Add a UILabel as a subview of the view and change the title to My Custom View. Then center it in the view, it should resemble the one shown below.

Creating a Convenience Initializer

Next we will create a convenience initializer in the CustomView class that will load the CustomView from the nib instead of creating it in code

• Open CustomView.h and add the following class method definition.

• Next open CustomView.m and implement the class method as shown below (Please keep in mind this is a very basic implementation for our basic UIView subclass, you can alter it to your liking)

Finishing The Demo App

• Open ViewController.m and add the following viewDidLoad method, this will use our convenience initializer to create a CustomView and then we add it to our view hierarchy. You will also need to import CustomView.h in ViewController.m.

Code Explanation

1. First we access the main bundle and load the nib we created.
2. loadNibNamed:owner:options: returns an NSArray containing each of the top level objects in the nib. Since in our case we know there should only be one top level object (CustomView as we specified earlier) we can then call lastObject on the array. lastObjectis used in order to safely access the array in case loadNibNamed:owner:options: failed. Note that lastObject returns nil if the array is empty.
3. Finally we ensure that customView is actually a “CustomView” not some other class or nil.

That’s It!

As always if you have any suggestions for future recipes, or any questions or comments, please let us know!