CODEWITHSUNDEEP
ioscolorshexgradient
Matt Catellier
Matt Catellier

Reputation: 858

How to gradient locations work in iOS?

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

Upvotes: 9

Views: 14493

Answers (2)

stevenpcurtis
stevenpcurtis

Reputation: 2001

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

Upvotes: 4

schmidt9
schmidt9

Reputation: 4538

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

gradients

Upvotes: 29

Related Questions