如何在 iOS 中渐变位置？答案

【问题标题】：How to gradient locations work in iOS?如何在 iOS 中渐变位置？
【发布时间】：2016-07-01 08:38:22
【问题描述】：

我正在做一个在 Xcode 中使用颜色的小项目。想知道渐变位置的作用。

我注意到 gradientLayer.locations = [0.0, 1.0] 会使它垂直，所以我认为 gradientLayer.locations = [0.5, 0.5] 会使它水平？

[0.5, 0.5] - 导致 2 个颜色块相互堆叠，没有渐变 [0.0, 1.0] - 导致我正在寻找的渐变，2 种垂直颜色，带有渐变

我知道它有点含糊，但在这里寻找解释。这对我来说没有多大意义。

谢谢，

马特

【问题讨论】：

标签： ios colors hex gradient

【解决方案1】：

Docs说：

渐变停止点指定为 0 到 1 之间的值。这些值必须单调递增。

所以locations 实际上与渐变方向无关。关于后者，请参阅this 问题。位置是指梯度停止的位置，例如。在第一个视图中，red 从 0（顶部）开始，到 0.5（中间）结束，因此进一步到底部只能是 纯蓝色。如果您给出 [0.5, 0.5]，则意味着两个渐变都应该从 开始， 在中间结束，所以颜色根本不会混合。

产生以下渐变的代码：

@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

【讨论】：

很好的解释和很好的演示，有足够的尝试和快速实现。谢谢。
啊，那个绿色的小复选标记？一定是这样。有点困惑，但我明白了，谢谢！
@MattCatellier 是的，如果您检查答案是否已接受，您也会获得一些声誉；)

【解决方案2】：

这是一个相当老的答案，遇到它我想我会更新 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)

我已经为所有感兴趣的人提供了一个 GitHub 链接 https://github.com/stevencurtis/Gradients

【讨论】：