Creating a Custom View using a xib in Objective-C

Creating a custom view is often easiest in a xib file, where you can easily visualize, layout, and edit the look and feel of what you’re trying to build.

Getting these views from the xib to your application’s view is a complicated and convoluted process — but one that any serious iOS developer should try to master.

The following is a very simple tutorial that illustrates the whole procedure:

  1. Create a new single screen application, and call it “Person App”

2. Create new “View” file from the User Interface menu. This will be your xib that represents a person in your app (let’s say it’s a dating app). Call it “PersonXIB” (or whatever you want).

You’re going to see what looks very much like a single view storyboard file with a blank view.

On the top right in the “Attributes Inspector” you can change the size from “Inferred” to “Freeform” and then resize the screen. It doesn’t actually matter how big you make it or even what shape it’s in (more on that later) but you may want to resize it more or less to the shape you envision it being when it appears in your app. For now keep it as a big square.

3. Design and layout your view. For the purposes of this tutorial, let’s throw three labels in a stack view that represent name, age, and favorite color of whatever person this comes to represent (with the most hideous design imaginable):

4. Now create another new file, this time a subclass of UIView that is going to be responsible for handling this XIB. Call it “PersonXIBView” (or again, whatever you want).

5. Go back to your xib file, and click on “File’s Owner” in the top left menu. Then go to the right menu and in the “Identity Inspector” input the UIView class you just created in as the custom class.

6. Open up the assistant editor, which should now automatically default to the new custom UIView we just created, and choose the .m file.

7. Create an interface section in the .m file (for whatever reason, xCode doesn’t do this for you when it creates a custom UIView file.

8. Drag in the xib’s ENTIRE VIEW as an outlet — and name it something like “contentView”. You can make sure you’re selecting the view by dragging directly from the left menu instead of from the XIB. Your view’s .m file will now look like this:

Make sure you’ve dragged in a UIView and not some other element.

9. Drag in any other elements you’ll need to populate. In this case you’ll need to drag in all three labels.

10. Now things get a little tricky. Because you want to populate your view with the XIB you made, you need to override the two default initializers that are inherent to UIView. These are: InitWithCoder and InitWithFrame.

The easiest way to do this is to override them both by calling your own customInit method inside of them. It’s done so like this:

Now you’ve overridden both initializers to call our own customInit method. Now you just have to write that method.

There’s three things you have to do, and the syntax gets a little funky.

a. Grab your xib from NSBundle — a class Apple uses to store code and resources.

b. Add the contentView you dragged in as a subview of this custom UIView class.

c. Constrain the XIB so that it takes up the entire content view.

YIKES — but don’t worry it’s just three lines of code:

That’s it! You’re done. You can now add as many of these views as you want anywhere in your project.

Let’s see how that looks. On the main storyboard, add a UIView and then change its custom class to the one class you just created — “PersonXIBView”.

Now copy that same view 8 times and put them all in a 3x3 grid centered in the middle of the screen (we used a stack view below).

Remember when you set up the xib and I said the size doesn’t really matter? This is why. The xib is going to take up the size of this view, however big or small or whatever shape you make it.

It doesn’t look like much on storyboard, but it CTRL-R and run the program:

All of those views are now populated with the XIB you made. You can use these views anywhere you want in your app. Now if you’d like to go back and redesign how this view looks (so it isn’t hideous), you can just change it in your xib file and all those changes will flow throughout the app.

Questions or comments? Let me know! And if you’re interested in investing, be sure to check out my post where I describe how I outperformed the market by copying the stock picks of some of the world’s best investors.

Like what you read? Give Brian Clouser a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.