Gradient Bordered Label View on iOS

M. Kerem Keskin

Published in

Dolap Tech

4 min readDec 19, 2018

Hello everybody, in this post I will talk about a custom component we are using in Dolap.

IBDesignable customizable, gradient bordered label view written in Swift.

In Dolap, we have different types for our merchants. They can be designer, second hand store, boutique etc. We are showing these merchant types in product details below merchants’ logo.

Our designer wants to show it in a cool gradient bordered label. You can see them in the screenshots from our iOS app.

These merchant types can increase and vary in the future. What if new merchant type comes from backend and let’s assume we have chosen to use images to represent these types?

Then we will need to update our app for every new merchant type.

To prevent updates we chose to go along with custom view getting its text from backend.

So we need to create our custom label YAY!

I like seeing instant updates in interface builder. We app developers don’t always get chance to create custom components, so this custom label is a perfect place to use IBInspectable properties with IBDesignable class and dust off our coding skills.

For this component we have one swift file which has two classes and an extension in it. Everything is done in approx. 200 lines. I will explain every method in detail. But first you can see our file’s structure below.

IBDesignable variables gives you chance to edit your view on the fly. These will be available on the storyboard and effect of changing values will be seen immediately.
Private variables are properties are used while configuring the view.
String Extension
CenteredTextLayer
Init Methods
Configure Method

Now let’s go over the last 4 items on the list with some explanation.

String Extension

We have added two methods to String for getting accurate height and width values. According to given height or width we can calculate both height and width. This methods will be used both in CenteredTextLayer and configure() method.

CenteredTextLayer

Simple subclass of CATextLayer which helps us to center the text both horizontally and vertically. Alignment mode takes care only horizontal alignment. By overriding draw() method, we calculate the height of the given string and position the label according the calculated y-axis difference.

Init Methods

Init methods are pretty simple actually. We are just calling configure() method to prepare views.

One trick to consider here is: overriding prepareForInterfaceBuilder() to see changes on the storyboard instantly.

Configure Method

Now we are where the real stuff is happening. You can see what we are trying to do from the graphic below.

Thanks to our designer Mehmet Dörtyol for the graphic

We will prepare a text layer which have rounded corners, border and transparent background with either given font or default font.
A gradient layer will be created with desired color set.
This text layer will mask gradient layer.

As result we have a label;

has gradient color borders
has rounded corners
has transparent background
has text with gradient colors

Lastly we will add this masked gradient layer to our background view created with desired color as a sublayer. At the end we end up with the label.

You can see full configure() method below. One trick to consider here is in order to position text to center and follow Auto Layout changes we have to calculate font size. If height of the text surpasses the view frame we’re gonna decrement it iteratively till it fits in the frame.