How to gradient locations work in iOS?

Question

I am working on a little project playing with colors in Xcode. Was wondering what the gradient locations do.

I noticed that gradientLayer.locations = [0.0, 1.0] will make it vertical, so i thought that gradientLayer.locations = [0.5, 0.5] would make it horizontal?

[0.5, 0.5] - results in 2 blocks of color stacked on top of each other, no gradient [0.0, 1.0] - results in gradient i am looking for, 2 vertical colors, with gradient

I know its kind of vague, but was looking for an explanation here. This doesnt make a lot of sense to me.

Thank,

Matt

score 28 · Accepted Answer · edited May 23 '17 at 11:46

Docs say:

The gradient stops are specified as values between 0 and 1. The values must be monotonically increasing.

So locations have actually nothing to do with gradient orientation. Regarding the latter refer to this question. Locations mean location where gradient stop, eg. in first view red begins at 0 (top) and ends at 0.5 (middle), so further to bottom can be only solid blue. If you give [0.5, 0.5], it means, that both gradients should begin and end in the middle, so the colors don't mix at all.

Code producing the below gradients:

@interface TestViewController ()

@property (strong, nonatomic) IBOutlet UIView *view1;
@property (strong, nonatomic) IBOutlet UIView *view2;
@property (strong, nonatomic) IBOutlet UIView *view3;
@property (strong, nonatomic) IBOutlet UIView *view4;

@end

@implementation TestViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    NSArray *views = @[_view1, _view2, _view3, _view4];

    for (UIView *view in views) {
        view.layer.borderWidth = 1;
    }

    // 1
    CAGradientLayer *gradient = [CAGradientLayer new];
    gradient.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor];
    gradient.frame = _view1.bounds;
    gradient.locations = @[@0.0, @0.5];
    [_view1.layer insertSublayer:gradient atIndex:0];

    // 2
    gradient = [CAGradientLayer new];
    gradient.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor];
    gradient.frame = _view2.bounds;
    gradient.locations = @[@0.5, @1.0];
    [_view2.layer insertSublayer:gradient atIndex:0];

    // 3
    gradient = [CAGradientLayer new];
    gradient.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor, (id)[UIColor greenColor].CGColor];
    gradient.frame = _view2.bounds;
    gradient.locations = @[@0.0, @0.5, @1.0];
    [_view3.layer insertSublayer:gradient atIndex:0];

    // 4
    gradient = [CAGradientLayer new];
    gradient.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor, (id)[UIColor greenColor].CGColor];
    gradient.frame = _view4.bounds;
    gradient.locations = @[@0.0, @0.8, @1.0];
    [_view4.layer insertSublayer:gradient atIndex:0];
}

@end

Good explanation and nice demo, have enough to try and implement with swift. thanks. — Matt Catellier, Apr 05 '16 at 17:45
ah, the little green check mark? that must be it. was kind of confused, but I got it thanks! — Matt Catellier, Apr 06 '16 at 17:04
@MattCatellier yes, besides if you check an answer as accepted, you get some reputation too ;) — schmidt9, Apr 06 '16 at 18:44

score 4 · Answer 2 · answered Jul 23 '19 at 06:22

This is quite an old answer, and coming across it I thought that I'd update the accepted answer for Swift.

    for view in stackView.arrangedSubviews {
        view.layer.borderWidth = 1
        view.layer.borderColor = UIColor.black.cgColor
    }

    // 1
    var gradient: CAGradientLayer = CAGradientLayer()
    gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
    gradient.frame = view1.bounds
    gradient.locations = [0.0, 0.5]
    view1.layer.insertSublayer(gradient, at: 0)

    // 2
    gradient = CAGradientLayer()
    gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
    gradient.frame = view2.bounds
    gradient.locations = [0.5, 1.0]
    view2.layer.insertSublayer(gradient, at: 0)

    // 3
    gradient = CAGradientLayer()
    gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor, UIColor.green.cgColor]
    gradient.frame = view3.bounds
    gradient.locations = [0, 0.5, 1.0]
    view3.layer.insertSublayer(gradient, at: 0)

    // 4
    gradient = CAGradientLayer()
    gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor, UIColor.green.cgColor]
    gradient.frame = view4.bounds
    gradient.locations = [0, 0.8, 1.0]
    view4.layer.insertSublayer(gradient, at: 0)

I've backed this up with a GitHub link for anyone interested https://github.com/stevencurtis/Gradients

How to gradient locations work in iOS?

2 Answers2