Gradient Bordered Label View on iOS

M. Kerem Keskin
Dec 19, 2018 · 4 min read

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.

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

As result we have a label;

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.

You can see full source code from my GitHub page.

Also GradientBorderedLabelView is available through CocoaPods.

Thanks for reading the article.
Please feel free to comment and share it if you like it.
See ya! 👋🏻

Dolap Tech

Dolap.com — Elden ele teknoloji!

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