OGeek|极客世界-中国程序员成长平台

标题: ios - 如何添加跨越两个 View 的渐变？ [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 13:39
标题: ios - 如何添加跨越两个 View 的渐变？

我知道怎么做 (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];

---

Best Answer-推荐答案

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

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

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

3. 对于应该参与公共(public)渐变的每个 View ，打开 clipsToBounds。

4. 使用自动布局约束使每个 GradientView 跨越所有参与的 super View 。 (理解约束可以跨越父 View / subview 边界很重要)。

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

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

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

如果我们打开剪裁，你将只能看到 topGradient 中适合 topView 边界的部分，而你只会看到 topGradient 的部分适合 bottomView 范围内的 code>bottomGradient。这是启用剪辑后的样子:

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

这是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

这是我用来创建所有 View 的代码:

- (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(或任何 View )覆盖一组 View 的约束:

- (void)constrainViewUIView *)coverer toCoverViewsNSArray<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 覆盖每个 的整个帧>被覆盖者。 equal 约束具有较低的优先级，然后确保 coverer 占用覆盖每个 coveree 所需的最小空间。

关于ios - 如何添加跨越两个 View 的渐变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45987883/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4