Swift — Creating a Custom View From a XIB (Updated for Swift 5)
How to create a custom view from a XIB using Swift
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
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. 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 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 as you envision it 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 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 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
This is where things get a little tricky. UIViews can be created in two ways — in the interface builder (i.e. a storyboard or XIB), or directly in the code.
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
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, 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
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 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
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 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
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:
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!).
