如何添加跨越两个视图的渐变？

Question

我知道怎么做 (1)，但我该怎么做 (2)？

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
CAGradientLayer *gradient = [CAGradientLayer layer];

gradient.frame = view.bounds;
gradient.colors = @[(id)[UIColor blueColor].CGColor, (id)[UIColor redColor].CGColor];

[view.layer insertSublayer:gradient atIndex:0];

Answer 1

有几种方法可以做到这一点。这是一种方法：

1. 创建一个名为GradientView 的UIView 子类来管理渐变层。这很有帮助，因为这意味着您可以使用普通的 UIKit 技术来管理渐变布局（自动布局约束、自动调整蒙版、UIKit 动画）。

2. 对于每个应该参与公共渐变的视图，添加一个GradientView 子视图。将每个 GradientView 的颜色、位置以及起点和终点设置为相同。

3. 对于每个应该参与公共渐变的视图，打开clipsToBounds。

4. 使用自动布局约束使每个GradientView 跨越所有参与的超级视图。 （理解约束可以跨越父视图/子视图边界很重要）。

使用这种方法，自动布局会负责使渐变覆盖所有视图，即使它们改变大小或四处移动。例如，当用户旋转设备时，您无需执行任何特殊操作即可使渐变效果很好。

因此，对于您的双视图示例，我建议您设置这样的视图层次结构：

在上面的视图调试器屏幕截图中，我禁用了剪辑。您可以看到两个渐变视图具有相同的渐变并共享相同的屏幕空间。 topGradient 是topView 的子视图，bottomGradient 是bottomView 的子视图。

如果我们打开剪辑，您将只能看到 topGradient 中适合 topView 范围的部分，并且您只会看到 bottomGradient 中适合 bottomView 范围内的部分界限。这是启用剪辑后的样子：

这是我在模拟器中的测试程序的屏幕截图：

这是GradientView的源代码：

@interface GradientView: UIView
@property (nonatomic, strong, readonly) CAGradientLayer *gradientLayer;
@end

@implementation GradientView
+ (Class)layerClass { return CAGradientLayer.class; }
- (CAGradientLayer *)gradientLayer { return (CAGradientLayer *)self.layer; }
@end

这是我用来创建所有视图的代码：

- (void)viewDidLoad {
    [super viewDidLoad];

    UIView *topView = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 100, 50)];
    topView.layer.cornerRadius = 10;
    topView.clipsToBounds = YES;
    UIView *topGradient = [self newGradientView];
    [topView addSubview:topGradient];
    [self.view addSubview:topView];

    UIView *bottomView = [[UIView alloc] initWithFrame:CGRectMake(20, 90, 100, 50)];
    bottomView.layer.cornerRadius = 10;
    bottomView.clipsToBounds = YES;
    UIView *bottomGradient = [self newGradientView];
    [bottomView addSubview:bottomGradient];
    [self.view addSubview:bottomView];

    [self constrainView:topGradient toCoverViews:@[topView, bottomView]];
    [self constrainView:bottomGradient toCoverViews:@[topView, bottomView]];
}

- (GradientView *)newGradientView {
    GradientView *gv = [[GradientView alloc] initWithFrame:CGRectZero];
    gv.translatesAutoresizingMaskIntoConstraints = NO;
    gv.gradientLayer.colors = @[(__bridge id)UIColor.blueColor.CGColor, (__bridge id)UIColor.redColor.CGColor];
    return gv;
}

以下是我如何创建使GradientView（或任何视图）覆盖一组视图的约束：

- (void)constrainView:(UIView *)coverer toCoverViews:(NSArray<UIView *> *)coverees {
    for (UIView *coveree in coverees) {
        NSArray<NSLayoutConstraint *> *cs;

        cs = @[
               [coverer.leftAnchor constraintLessThanOrEqualToAnchor:coveree.leftAnchor],
               [coverer.rightAnchor constraintGreaterThanOrEqualToAnchor:coveree.rightAnchor],
               [coverer.topAnchor constraintLessThanOrEqualToAnchor:coveree.topAnchor],
               [coverer.bottomAnchor constraintGreaterThanOrEqualToAnchor:coveree.bottomAnchor]];
        [NSLayoutConstraint activateConstraints:cs];

        cs = @[
               [coverer.leftAnchor constraintEqualToAnchor:coveree.leftAnchor],
               [coverer.rightAnchor constraintEqualToAnchor:coveree.rightAnchor],
               [coverer.topAnchor constraintEqualToAnchor:coveree.topAnchor],
               [coverer.bottomAnchor constraintEqualToAnchor:coveree.bottomAnchor]];
        for (NSLayoutConstraint *c in cs) { c.priority = UILayoutPriorityDefaultHigh; }
        [NSLayoutConstraint activateConstraints:cs];
    }
}

greaterThanOrEqual/lessThanOrEqual 约束（默认情况下）需要优先级，确保 coverer 覆盖每个 coveree 的整个框架。优先级较低的equal 约束则确保coverer 占用覆盖每个coveree 所需的最小空间。

Answer 2

您可以通过在带有渐变的视图顶部添加一个视图来做到这一点，然后通过使用 UIBezierPath 制作蒙版来剪切形状，然后将其添加到顶部的视图中（我们称之为 @987654322 @):

    let yourPath: UIBezierPath = //create the desired bezier path for your shapes
    let mask = CAShapeLayer()
    mask.path = yourPath.cgPath
    topView.layer.mask = mask