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

JANUARY
7, 2013 BY MIKETT 12
COMMENTS

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.

+ (id)customView;

• 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)

+ (id)customView
{
   
CustomView *customView = [[[NSBundle mainBundle] loadNibNamed:@"CustomView" owner:nil options:nil] lastObject];

 
  // make sure customView is not nil or the wrong
class!
    if ([customView isKindOfClass:[CustomView class]])
        return customView;
    else
 
      return nil;
}

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.

- (void)viewDidLoad
{
 
  [super viewDidLoad];

    CustomView *customView = [CustomView
customView];
    [self.view addSubview:customView];
}

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!

FILED UNDER: INTERMEDIATE, IOS
6, RECIPES TAGGED
WITH: INTERFACE BUILDER, IOS 6, IOS DEVELOPMENT, IOS PROGRAMMING,NIB, OBJECTIVE-C, UIVIEW

COMMENTS

1. Mihai Damian says:

   January
   9, 2013 at 3:11 pm

   One potential drawback with of approach is that you cannot directly link
   IBOutlets from the Nib since you have no file owner for it. Of course you
   could grab the subviews by tags and assign them yourself but this is error
   prone since it’s much more difficult to keep track of tags. Alternatively
   you could create an extra “template” instance of CustomView, set it as the
   file owner and then do the manual IBOutlet assignment from the template
   instance to the actual instance that you’ll be returning. This has the
   advantage of explicitly naming the UIViews you’re working with but it feels
   a bit hackish and it takes the most effort to implement.

   Reply

   • Mike Turner says:

     January
     9, 2013 at 5:07 pm

     Thanks for the comment!

     You can actually link up IBActions & IBOutlets, although it is
     slightly different than with a UIViewController. Using the example above
     add this property declaration to CustomView.h.

     //This will link to the
     label in CustomView.xib
      @property (nonatomic,
     strong) IBOutlet UILabel *label;

     Now in CustomView.xib, (control + drag) from the top level object (our
     CustomView object, where the property declaration lives, instead of file’s
     owner) to the UILabel. You should be presented with a HUD allowing you to
     select the “label” outlet just created!

     I’ll append the post to show this process.

     Reply

iOS Programming Recipe 6: Creating a custom UIView using a
Nib,码迷,mamicode.com

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