How to create percentage(%) wise three colour gradient in Swift?

Question

I want to create a gradient view with three colours in swift.

linear-gradient(to right, #232c63 10%,#1d6cc1 59%,#33bdd6 100%);

How to define colours with %.

First Colour with 10 %

Second Colour with 59 %

Third Colour with 100 %

Example:

score 5 · Answer 1 · answered Aug 08 '19 at 06:47

5

If you want to use hex colors, use extension like these: https://stackoverflow.com/a/24263296/4711785

After that you can use colorWithAlphaComponent instance method like above which is mentioned in official documentation

UIColor.black.withAlphaComponent(0.7)

answered Aug 08 '19 at 06:47

Ahmet Sina Ustem

1,090
15
32

1

It works well. Thank you for supporting the community. – sonifex Aug 08 '19 at 10:44

score 3 · Answer 2 · answered Aug 08 '19 at 07:05

Try using the locations array of CAGradientLayer to give the startPoint for each color in the gradient, i.e.

let gradient = CAGradientLayer()
gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor, UIColor.green.cgColor]
gradient.startPoint = .zero
gradient.endPoint = CGPoint(x: 1, y: 0)
gradient.locations = [0, 0.1, 0.59]
gradient.frame = view.bounds
view.layer.addSublayer(gradient)

In the above code, locations are calculated using the required percentage, i.e. 10%, 59%, 100%.

Also add the colors as per your requirement.

var locations: [NSNumber]? { get set }

An optional array of NSNumber objects defining the location of each gradient stop. Animatable.

The gradient stops are specified as values between 0 and 1. The values must be monotonically increasing. If nil, the stops are spread uniformly across the range. Defaults to nil.

Location is the percent out of 1. The value will be between 0 and 1. — PGDev, Aug 08 '19 at 08:50
I have implemented your code it's working. I apply a combination of location and Alpha. — Parth Patel, Aug 08 '19 at 09:53

score 1 · Accepted Answer · edited Aug 09 '19 at 08:58

With this method you can choose the three colours you want:

func gradient(initialColor: UIColor, middleColor: UIColor,
              finalColor: UIColor) -> CAGradientLayer {
    let gradient = CAGradientLayer()
    gradient.frame = self.frame

    gradient.colors = [initialColor.withAlphaComponent(1.0), middleColor.withAlphaComponent(0.59), finalColor.withAlphaComponent(1.0)].map{$0.cgColor}
    gradient.locations = [0.29, 0.60, 1]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.endPoint = CGPoint (x: 1.0, y: 0.5)

    return gradient
}

It returns a CAGradientLayer that you can add directly into your view.

When using the "locations" parameter, you can choose where your colours are going to be displayed in terms of percentage. In my method they are: 0% (0 value), 50% (0.5 value) and 100% (1 value).

I recommend using that method inside a UIView extension as a best practice and reusable code in your app.

Thank you so much, I make UIView Extension for Gradient View. — Parth Patel, Aug 08 '19 at 08:53
I'm glad that it worked for you. It is working for me too since I'm using it in my app :) — Jordi Gámez, Aug 08 '19 at 09:54

How to create percentage(%) wise three colour gradient in Swift?

3 Answers3