KEEP CALM and build your own colors 🍭

![](https://hackernoon.com/hn-images/1*8k9MuLjQV1t3DMez_0cKUQ.jpeg)

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..

![](https://hackernoon.com/hn-images/1*NK1V_Y3Z10IO5KRjKET43w.png)

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](https://developer.apple.com/documentation/quartzcore) — 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](https://developer.apple.com/documentation/quartzcore/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](https://developer.apple.com/documentation/quartzcore/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 provide`CGColor` 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](https://developer.apple.com/documentation/quartzcore/cagradientlayer).

### 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](http://nshipster.com/ibinspectable-ibdesignable/).

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.

![](https://hackernoon.com/hn-images/1*gUgjcE3w8DSDR0PvouvQ4Q.png)

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. 🤠

![](https://media.giphy.com/media/NXp9HM6YeuS0U/giphy.gif)

### Sample Project

You can download the sample project from [here](https://github.com/pgpt10/GradientSample).

### Promotions

Don’t forget to read my other articles:

1.  [Everything about Codable in Swift 4](https://hackernoon.com/everything-about-codable-in-swift-4-97d0e18a2999 "https://hackernoon.com/everything-about-codable-in-swift-4-97d0e18a2999")
2.  [Everything you’ve always wanted to know about notifications in iOS](https://medium.freecodecamp.org/ios-10-notifications-inshorts-all-in-one-ad727e03983a)
3.  [Coding for iOS 11: How to drag & drop into collections & tables](https://hackernoon.com/drag-it-drop-it-in-collection-table-ios-11-6bd28795b313)
4.  [All you need to know about Today Extensions (Widget) in iOS 10](https://hackernoon.com/app-extensions-and-today-extensions-widget-in-ios-10-e2d9fd9957a8 "https://hackernoon.com/app-extensions-and-today-extensions-widget-in-ios-10-e2d9fd9957a8")
5.  [UICollectionViewCell selection made easy..!!](https://hackernoon.com/uicollectionviewcell-selection-made-easy-41dae148379d "https://hackernoon.com/uicollectionviewcell-selection-made-easy-41dae148379d")

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

Apple

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Color it with GRADIENTS — iOS

Too Long; Didn't Read

Company Mentioned

@p.gpt10

RELATED STORIES