Color it with GRADIENTS — iOS

KEEP CALM and build your own colors 🍭

I’ve been working with iOS for quiet a long time now and believe me, building a nice-looking visual interface is must for an app to get accepted by a larger audience. Good design, colors, concept everything matters when building a great UI.

Gradients is one of the things that adds life to the colors. Plain color or a gradient? Let’s see which one is more eye catching..

Ofcourse the second one. Isn’t it? Mixing 2 colors is much more appealing than a single color.

In this article, we’ll be discussing how to get that working in our own app. And trust me, it’s as easy as it seems to be. “Some more colors instead of a single one”. So, let’s begin then.

Things we need to know

Core Animation Framework — Render, compose, and animate visual elements.

Every view in iOS has a layer associated with it that handles all the drawing and animations of the view. A view’s layer can be accessed using its [layer](https://developer.apple.com/documentation/uikit/uiview/1622436-layer) property, an object of CALayer.

CALayer — An object that manages image-based content and allows you to perform animations on that content.

A layer’s main job is to manage the visual content that you provide but the layer itself has visual attributes that can be set, such as a background color, border, and shadow.

CAGradientLayer — A layer that draws a color gradient over its background color, filling the shape of the layer (including rounded corners).

You use a gradient layer to create a color gradient containing an arbitrary number of colors. By default, the colors are spread uniformly across the layer, but you can optionally specify locations for control over the color positions through the gradient.

Let’s see what CAGradientLayer can provide us with.

1. [colors](https://developer.apple.com/documentation/quartzcore/cagradientlayer/1462403-colors) — the colors that we need to make the gradient. It is an array of CGColorRef objects, i.e. you must provideCGColor and not just an object of UIColor. Example: [UIColor.red.cgColor, UIColor.blue.cgColor]
2. [startPoint](https://developer.apple.com/documentation/quartzcore/cagradientlayer/1462408-startpoint) — starting point of the gradient.
3. [endPoint](https://developer.apple.com/documentation/quartzcore/cagradientlayer/1462412-endpoint) — end point of the gradient.
4. [locations](https://developer.apple.com/documentation/quartzcore/cagradientlayer/1462410-locations) — An optional array of NSNumber objects defining the location of each gradient stop.

You can refer to the complete documentation here.

Code It

Well, now that we know what all is needed for a gradient, it’s just a matter of time now before we get it working.

Let’s first see how to get a gradient that we can use on a view’s layer.

Great..!!! We have a gradient now. But, wait..!!! Why is it not working 🤔? refresh refresh refresh !!! noooo..still not working 🤯.

Aahhhh..!!! We forgot one little thing. Just having a gradient isn’t enough. We have to apply it to our desired view also. That’s so silly of us 🤦‍♀️. Well, here’s how we can apply the gradient to our view.

view.layer.addSublayer(gradientLayer)

Here, the view can be any element be it a UIView, UIButton, UILabel etc. You can apply gradient to each one of them in the same way. Applying gradient to a UICollectionViewCell is as simple as applying it to other elements. The CAGradientLayer is added as the sub-layer to the view’s layer. That’s so simple. Isn’t it?

That’s it. That’s all you we to get a nice-looking gradient on our screen.

Okay..!!! Now that we know how to get this working, I have a question on my mind. This is purely a UI thing, right?. Can we not get it in the Storyboard itself 🧐? Though it not so much of code, but why write it everytime I need a gradient? Why not change some attributes in the storyboard’s attribute inspector itself 🤔 ? It’ll be so easy if we can get that too.

Looks like we’re getting demanding? 😉 LOL. Well, I know the pain. Getting to change an attribute in the storyboard itself is so much more satisfying than doing the same through code. Here we go then..🙂

Get it in the Storyboard itself..!!!✌️

@IBDesignable and @IBInspectable is what we can use to achieve this.

With IBInspectable and IBDesignable, it’s possible to build a custom interface for configuring your custom controls and have them rendered in real-time while designing your project.

You can read more about it here.

Set the custom class of view to DesignableView in storyboard’s Class Inspector. This is how it will appear in the Attributes Inspector in storyboard.

Getting to see what it will look like is must for a great UI. Coding the same thing again and again to get the perfect look is much more tiring and hefty. This is one of the greatest advantage of storyboard, actually this is what storyboards are made for. Look and Feel of what will be the end result.

That’s it. Code once, use anywhere we want. No extra code, nothing. Add as many colors you want to show in the gradient. Go on, give it a try. 🤠

Sample Project

You can download the sample project from here.

Promotions

Don’t forget to read my other articles:

1. Everything about Codable in Swift 4
2. Everything you’ve always wanted to know about notifications in iOS
3. Coding for iOS 11: How to drag & drop into collections & tables
4. All you need to know about Today Extensions (Widget) in iOS 10
5. UICollectionViewCell selection made easy..!!

Feel free to leave comments in case you have any doubts.