iOS: Reusable gradient view with title in Interface Builder

This blog post will describe how to build a reusable gradient view, with a title using @IBDesignable and Interface Builder.

Why do this? If a view component is reused throughout the app, it’s easier to write it once and reuse the component. It aids the design process to see these view components rendered as they appear in the running app, and it makes changing the design much less painful.

Here’s what the final result looks like:

Note the view controller’s view is a “Gradient View”, and that the title is included.

There are two key components, an @IBInspectable title that connects to a UILabel, and a CAGradientLayer:

The complete GradientView class, which we can view in Interface Builder.

Next, let’s use the class in Interface Builder:

And configure it:

If the view is not rendered in Interface Builder, in the menu:

Editor -> Refresh All Views

That’s it! For more Interface Builder examples, check out this post about building an underlined Material Design text field.