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 — Render, compose, and animate visual elements. Core Animation Framework 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 property, an object of . [layer](https://developer.apple.com/documentation/uikit/uiview/1622436-layer) CALayer — An object that manages image-based content and allows you to perform animations on that content. CALayer 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. — A layer that draws a color gradient over its background color, filling the shape of the layer (including rounded corners). CAGradientLayer 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 can provide us with. CAGradientLayer — the colors that we need to make the gradient. It is an array of objects, i.e. you must provide and not just an object of . : [colors](https://developer.apple.com/documentation/quartzcore/cagradientlayer/1462403-colors) CGColorRef CGColor UIColor Example [UIColor.red.cgColor, UIColor.blue.cgColor] — starting point of the gradient. [startPoint](https://developer.apple.com/documentation/quartzcore/cagradientlayer/1462408-startpoint) — end point of the gradient. [endPoint](https://developer.apple.com/documentation/quartzcore/cagradientlayer/1462412-endpoint) — An optional array of objects defining the location of each gradient stop. [locations](https://developer.apple.com/documentation/quartzcore/cagradientlayer/1462410-locations) NSNumber 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 , , etc. You can apply gradient to each one of them in the same way. Applying gradient to a is as simple as applying it to other elements. The is added as the to the view’s layer. That’s so simple. Isn’t it? UIView UIButton UILabel UICollectionViewCell CAGradientLayer sub-layer 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 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 itself 🤔 ? It’ll be so easy if we can get that too. Storyboard attribute inspector Looks like we’re getting demanding? 😉 LOL. Well, I know the pain. Getting to change an attribute in the itself is so much more satisfying than doing the same through code. Here we go then..🙂 storyboard Get it in the Storyboard itself..!!!✌️ and is what we can use to achieve this. @IBDesignable @IBInspectable With and , it’s possible to build a custom interface for configuring your custom controls and have them rendered in real-time while designing your project. IBInspectable IBDesignable You can read more about it . here Set the custom class of view to in storyboard’s . This is how it will appear in the in storyboard. DesignableView Class Inspector Attributes Inspector 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. of what will be the end result. Look and Feel 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: Everything about Codable in Swift 4 Everything you’ve always wanted to know about notifications in iOS Coding for iOS 11: How to drag & drop into collections & tables All you need to know about Today Extensions (Widget) in iOS 10 UICollectionViewCell selection made easy..!! Feel free to leave comments in case you have any doubts.

Apple

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

Color it with GRADIENTS — iOS

Too Long; Didn't Read

Company Mentioned

@p.gpt10

RELATED STORIES