Create Gradient in View With locations from zeplin

Question

I am working on a project where i need to apply gradients to the view. I am having sketch file and have colors which i am going to use for gradient with the locations but i am unable to get the exact view.

Can anyone please help how to get that?

I have created a function to apply gradient:-

func applyGradient(colours: [UIColor]) -> Void {
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.colors = colours.map { $0.cgColor }
        self.layer.insertSublayer(gradient, at: 0)
    }

func applyGradientToView(){
        let firstColor = UIColor(red: 26/255, green: 169/255, blue: 186/255, alpha: 1.0)
        let secondColor = UIColor(red: 26/255, green: 97/255, blue: 157/255, alpha: 1.0)
        let thirdColor = UIColor(red: 27/255, green: 65/255, blue: 144/255, alpha: 1.0)
        self.applyGradient(colours: [firstColor, secondColor, thirdColor])
    }

Here array UIcolor is a combination of colors to be used, I used all three but still, I didn't get the same as in the sketch

What I created :-

Gradient colors in sketch file:-

The view in sketch file is like this:-

Answer 1

Couple issues...

1) Your "Gradient colors in sketch file:" image does not match your Sketch file output image. However you applied the gradient in sketch, it is not a full top-to-bottom (or, in this case, bottom-to-top) gradient fill.

2) When working with colors in different applications and/or devices, you have to be aware of "color spaces". Take a quick search on google for sketch colors don't match and you'll find lots of material explaining it, along with tips on using sketch for iOS targets.

So, an easy way to get close to your desired output is to use OS X Digital Color Meter - which should be installed by default on your Mac (if it's not, it's easy to find). That tool allows you to hover over a point on your image and get the RGB values based on different color spaces. SRGB should be a match.

Also, there is a better way to code your custom view for reuse. Take a look at this approach:

class MyGradientView: UIView {

    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() -> Void {

        let gradientLayer = layer as! CAGradientLayer

        let firstColor = UIColor(red: 25/255, green: 138/255, blue: 173/255, alpha: 1.0)
        let secondColor = UIColor(red: 27/255, green: 163/255, blue: 184/255, alpha: 1.0)

        let colours = [firstColor, secondColor]

        gradientLayer.colors = colours.map { $0.cgColor }

        gradientLayer.shadowColor = UIColor.black.cgColor
        gradientLayer.shadowOffset = CGSize(width: 0.0, height: 1.0)
        gradientLayer.shadowRadius = 2.0
        gradientLayer.shadowOpacity = 0.5

        gradientLayer.masksToBounds = false

    }

}

Gradient layers in iOS by default go from Top-To-Bottom, so you only need your top and bottom colors defined. This approach also includes your shadow (as shown in your sketch output image). And it will maintain the gradient and shadow when using the custom view with auto-layout:

    let v = MyGradientView()
    view.addSubview(v)

    v.translatesAutoresizingMaskIntoConstraints = false

    v.topAnchor.constraint(equalTo: view.topAnchor, constant: 100.0).isActive = true
    v.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -100.0).isActive = true
    v.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 40.0).isActive = true
    v.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -40.0).isActive = true

Result:

Answer 2

According to the documentation of CAGradientLayer (https://developer.apple.com/documentation/quartzcore/cagradientlayer) to specify a location of colors you can use locations property(in your case [0, 0.68, 1]):

var locations: [NSNumber]? { get set }

but as @Alladinian wrote in the comment in your example, it looks like your gradient was drawn from bottom to top and start before view and end far after view so you see only a part