Swift — Creating a Custom View From a XIB (Updated for Swift 5)

How to create a custom view from a XIB using Swift

Brian Clouser
May 5, 2017 · 6 min read

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, given how common this pattern is in iOS development.

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

Create a New Single View Application Project

2. Create a XIB File

Xcode will prompt you for which file type you’d like to create. Choose the View option under the user interface menu. In the following pop up you’ll be prompted to name your XIB— we called ours TestView.

3. Design Your View in Interface Builder

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 as you envision it in your application, to help with laying out your elements.

4. Create a Custom UIView File

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 named this file TestView as well, as it’s going to be associated with the TestView XIB we just created.

5. Override Both UIView Initializers

There’s an 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. We’ll get there in a sec.

6. Add UIView As XIB File’s Owner

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, enter the name of the UIView file (TestView) as the Class. This should autocomplete — if it doesn’t, you’ve probably done something incorrectly.

7. Add Entire View as an IB Outlet in UIView File

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 habit to name it contentView.

You can also drag in any other elements as IBOutlets. 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

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 dragged in as an outlet, as a subview of the view we created.

In the next two lines, we 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

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:

One 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. 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! For anyone interested in investing, please check out Stock Genius, a brand new stock free tracking app I built featuring real time prices directly from the exchange (and many custom views built from xibs!).

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store