Create custom view from XIB

Firstly, this is not a brand new topic. Just google “view from xib”, you can see over million of results. The common solution you will get must be:

UIView *view = [[[NSBundle mainBundle] loadNibNamed:@"xib name" owner:self options:nil] objectAtIndex:0];

Then just add the view onto wherever you need and done. It is simple and fast enough. So why am I still writing this?

For me, I need a more efficient way to deal with this. Efficient I mean is:

  • Simple and fast to implement
  • Encapsulated
  • Inheritable
  • Beautiful to call

Now, look back the above solution. It has only first factor.

Enough for introduction and going round, let’s kick started.

Step 1

Create your own xib file and prepare its UI as your need. There is no special thing here.

For example, I will name it MyView.xib.

Step 2

Create an subclass of  UIView and name it whatever you want.

For example, I will name it MyView.

Step 3

Now you need to code a bit.

#import "MyView.h"

@implementaion MyView
    __weak IBOutlet UIView *_view;

- (id)init
    // Load view from xib
    [[NSBundle mainBundle] loadNibNamed:@"MyView" owner:self options:nil];

    // Determine frame
    CGRect frame = _view.frame;

    if (self = [super initWithFrame:frame]) {
        // Add the view from xib onto view itself
        [self addSubview:_view];

    return self;


And that is all code you need.

Line 11: You do not need to explicitly get the root view in xib thank to using outlet. As soon as the xib is load by this call, _view will hold the root view for you.

Line 14, 16: This is just to assure that container view fits exactly the root in xib.

Final step

Change File’s Owner of xib file to MyView and link the root view in xib file to _view outlet in MyView.m.


Now everything is ready, let’s make a beautiful call:

MyView *myView = [[MyView alloc] init];
[superView addSubview:myView];

How efficient this is

As I mentioned before, this solution offer you more advantages. Now it is time to judge it.

Simple and fast to implement

Yes, it is. Just 4 steps, few code lines. It is straightforward enough and no more comment needed here.


Yes. You can add more properties, outlets and anything else you want. This makes your calls elegant than ever.

For instance,

@interface MyView : UIView

@property (noatomic, strong) NSString *myName;
@property (noatomic, weak) IBOutlet UILabel *nameLabel;

myView.myName = @"Foo";
myView.nameLabel.text = @"Bar";


Yes. You can subclass and add extra stuffs to superclass. Moreover, you can create your own class to load custom xib by passing xib file as parameter. Let’s think of things you can do with object-oriented. It is extendable.

Beautiful to call

Last but not least, you do not want ugly code. As you see, it is beautiful.

What next

Now you have one more powerful tool to work with xib. Just customize it to fit your need.


Tags: , , ,

About ninjapro

It is better to feel by yourself about me

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: