Swift 3 — Creating a custom view from a xib

Creating a custom view is often easiest in a xib file, where you can 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 screen is more complicated than it seems like it should be given how common this pattern is in iOS development.

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

  1. Create a new single view application project

2. Create a xib file

Right click on the portion of the screen where your project’s files are (view controller, storyboard, etc) and choose “new file”. Xcode will prompt you for which file type you’d like to create. Choose the “View” option under the User Interface menu. On the following pop up you’ll be prompted to name your xib — we called ours “TestView”.

3. Design your view in Interface Builder

We inserted a UILabel and constrained it to the center of the screen. You’ll probably want something a bit more involved. We also made our background color pink so it’s easier to see when we eventually run our app. You may want to make other design decisions….

If you want to change the shape of your xib, click on the “attributes inspector” in the upper right hand corner and change size to “freeform” This will let you click on the view and change the shape as you see fit. The shape you choose doesn’t actually matter, as you’ll see by the end of this tutorial, but you may want to make the xib more or less the same shape you envision it being used in your application to help with laying out your elements.

4. Create a custom UIView file

Now that we have our xib, we need to to create the custom UIView class that will control it. Right click where all your files are and choose “new file” (again), but this time select “Cocoa Touch Class” under the Source menu.

When you’re prompted to name the new file, make sure you make it a subclass of “UIView”. Xcode may default to another Cocoa class. In this tutorial we also named this file “TestView” as it’s going to be associated with the TestView xib we just created.

5. Override both UIView initializers

This is where things get a little tricky. UIViews can be created two ways: In interface builder (i.e. a storyboard or xib) or directly in code. They have a initializer for each of these creation methods and we need to override both of them with our own custom initializer.

When you create your custom UIView, you’re going to see an empty file with some comments Apple added hinting at what we’re going to have to do:

Delete the comments, and type the following:

We just overrode both UIView initializers and called our initializer named commonInit (you can call it whatever you want). Unfortunately our initializer doesn’t do anything yet. Don’t fret! We’ll get there in a sec…

6. Add UIView as xib file’s owner

We’re almost there — we now have a xib file and a custom UIView, we just have to connect the two.

Click back into your xib file, and click on the “File’s Owner” selection under the placeholder’s section. Then on the right hand side of the screen in the “Identity Inspector” put the name of the UIView file (TestView) in as the Class. This should autocomplete and if it doesn’t, you’ve probably done something incorrectly.

7. Add entire view as an IB outlet in UIView file.

Now that you’ve added your custom UIView as the file’s owner, you should be able to tap the assistant editor button in the upper right and load the view side by side with your xib.

Ctrl-drag the ENTIRE VIEW in as an outlet to your view file. You can name it whatever you want, but it’s a good pattern to name it “contentView”

You can also drag in any other elements as IB outlets. In this case, all we have is our label, so we dragged that in as well. Our view file now looks like this:

8. Load xib in common initializer

Type the following four lines of code into your commonInit:

In the first line, we loaded the xib by name from memory. If you named your xib file something different, you’ll need to change the “TestView” string in the loadNibNamed function.

In the next line, we added the content view that we’ve dragged in as an outlet as a subview of the view we’ve created.

In the next two lines, we’ve positioned the content view to take up the entire view’s appearance. There are a myriad of ways to accomplish this and this probably isn’t the best pattern but it’s quick and easy and only two lines of code.

9. Use your view

We’re done! Now we’ve got a custom view made from a xib file that we can use throughout our project. Let’s see how that looks.

Click on your storyboard file and drag in a UIView. Click on the identity inspector in the upper right and change the class to “TestView” (or whatever you named your UIView)

You can place it anywhere you want on the screen. We constrained it to the center of the screen and had it take up 50% of the width and 50% of the height just for demonstration purposes.

Open up your assistant editor again, this time it should open to your view controller file. Drag the “TestView” in as an IBOutlet. Your View Controller should now look like this:

On last thing — remember that label on our view? Let’s change the text: I’m going to use my old boss’s favorite greeting:

That’s it — now let’s run the project:

There you have it, an app that simulates life in an NBA front office :)

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 in your storyboard (or code). All that really matters is how you’ve constrained all of the elements within your xib.

You can use this view throughout your app. If you’d like to go back and redesign how it looks, 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.