如何在 iOS 中对位置进行渐变？

Question

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

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

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

我知道这有点含糊，但一直在寻找解释。这对我来说意义不大。

谢谢，

马特

Answer 1

Docs 说：

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

所以locations实际上与梯度方向无关。关于后者参考this问题。 Locations 表示梯度 stop 的位置，例如。在第一个视图中，红色从 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

Answer 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 link 对感兴趣的人进行了支持 https://github.com/stevencurtis/Gradients

如何在 iOS 中对位置进行渐变？

How to gradient locations work in iOS?

hex

gradient

colors

ios