Creating a custom UIView from a Xib in Swift

3 min readFeb 2, 2020

How to create custom UIViews to improve your project?

Why are custom views important? 🧐

Creating custom views is an underrated habit that can benefit any codebase for a variety of reasons.

Reusability

Very often, the same group of design elements will be on multiple screens across an app. It makes sense to group them in a custom UIView to reuse the same design and logic at multiple places.

Enables reusable design and code
Saves time
Facilitates changes

Readability

When a screen has many design elements, the UIViewController associated with it can get messy.

A lot of outlets
A lot of configuration logic

Grouping those elements in a custom UIView move the outlets and the configuration logic to the custom view, making the view controller smaller, easier to read and maintain.

Testability

Testing every state of a view controller that has a lot of outlets and design logic can be time-consuming and hard to maintain. However, if the view controller is built from a few custom views, those can be tested independently. This improves your tests and make them:

Easier to maintain
Smaller and faster to write

How can I create a custom UIView from a Xib? 🛠

It is relatively easy to create a custom UIView from a Xib in Swift. There are multiple steps to it though. It all starts with a simple protocol.

Protocol

First, we need a protocol to give a subclass of UIView the ability to attach the content of Xib to its content view.

Xib file and UIView subclass

Let’s say our custom view is called MyCustomView. The creation process would be the following:

Create a UIViewsubclass called MyCustomView
Create a Xib file called MyCustomView

Then, we need MyCustomView to conform to CustomViewProtocol.

2. MyCustomView confirming to CustomViewProtocol

After this step, it is crucial to make sure the commonInit(for customViewName: String) method is called when the custom UIView is initialized.

That’s it, you have attached the content of a Xib to your custom UIView.

Usage

To use your custom view, add a UIView to your UIViewController in storyboard and set its class to be your custom view. That’s it! 🎉

Note

If you need to handle certain events happening in your custom view from your view controller I would recommend using the delegate pattern.