CAGradientLayer in UILabel in UIStackView

Question

这是一个自定义的UIView子类，用于tableHeaderView。

目前，我正试图在垂直UILabel中设置一个梯度。即使在RTL语言中，它也能很好地工作，即使在RTL语言中也是如此(移到右边)，但是一旦我添加了梯度，gradientView的gradientView的标签就完全离开了它的位置。在这里，为了更好地理解，代码：

- (instancetype)initWithTitle:(NSString *)title subtitle:(NSString *)subtitle colors:(NSArray<UIColor *> *)colors {
    if (self = [super initWithFrame:CGRectMake(0, 0, self.superview.frame.size.width, 200)]) {
        // Labels
        UILabel *titleLabel = [[UILabel alloc] init];
        titleLabel.text = title;
        titleLabel.font = [UIFont boldSystemFontOfSize:42.f];
        titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
        [titleLabel sizeToFit];

        UILabel *subtitleLabel = [[UILabel alloc] init];
        subtitleLabel.text = subtitle;
        subtitleLabel.font = [UIFont systemFontOfSize:24.f];
        subtitleLabel.lineBreakMode = NSLineBreakByWordWrapping;
        [subtitleLabel sizeToFit];

        // Create gradient
        CAGradientLayer *gradient = [CAGradientLayer layer];
        gradient.frame = titleLabel.bounds;
        NSMutableArray *cgcolors = [NSMutableArray new];
        for (int i = 0; i < colors.count; i++) {
            cgcolors[i] = (id)colors[i].CGColor;
        }
        gradient.colors = cgcolors;
        gradient.locations = @[@0, @1];
        
        UIView *gradientView = [[UIView alloc] initWithFrame:titleLabel.bounds];
        [gradientView.layer addSublayer:gradient];
        [gradientView addSubview:titleLabel];
        gradientView.maskView = titleLabel;

        // Stack
        UIStackView *stackView = [[UIStackView alloc] initWithArrangedSubviews:@[gradientView, subtitleLabel]];
        stackView.alignment = UIStackViewAlignmentLeading;
        stackView.axis = UILayoutConstraintAxisVertical;
        stackView.distribution = UIStackViewDistributionEqualCentering;
        stackView.spacing = 0;
        stackView.translatesAutoresizingMaskIntoConstraints = NO;
        [self addSubview:stackView];

        [NSLayoutConstraint activateConstraints:@[
            [stackView.leadingAnchor constraintEqualToAnchor:self.leadingAnchor constant:25],
            [stackView.centerYAnchor constraintEqualToAnchor:self.centerYAnchor],
            [stackView.heightAnchor constraintEqualToConstant:titleLabel.frame.size.height + subtitleLabel.frame.size.height]
        ]];
    }

    return self;
}

使用LTR语言，它看起来很好，但是使用RTL语言，--包含titleLabel的gradientView的框架--无缘无故地变成了{ subtitleLabel、0、0}。原因是渐变视图，因为没有它就能正常工作，但我找不到原因。

我尝试了titleLabel.layer.mask，将渐变块放置在末尾，但是没有任何效果。

编辑:工作代码：

- (instancetype)initWithTitle:(NSString *)title subtitle:(NSString *)subtitle colors:(NSArray<__kindof UIColor *> *)colors {
    if (self = [super initWithFrame:CGRectMake(0, 0, self.superview.frame.size.width, 200)]) {
        // Labels
        UILabel *titleLabel = [[UILabel alloc] init];
        titleLabel.text = title;
        titleLabel.font = [UIFont boldSystemFontOfSize:42.f];
        titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
        [titleLabel sizeToFit];

        UILabel *subtitleLabel = [[UILabel alloc] init];
        subtitleLabel.text = subtitle;
        subtitleLabel.font = [UIFont systemFontOfSize:24.f];
        subtitleLabel.lineBreakMode = NSLineBreakByWordWrapping;
        [subtitleLabel sizeToFit];

        // Create gradient
        CAGradientLayer *gradient = [CAGradientLayer layer];
        gradient.frame = titleLabel.bounds;
        NSMutableArray *cgcolors = [NSMutableArray new];
        for (int i = 0; i < colors.count; i++) {
            cgcolors[i] = (id)colors[i].CGColor;
        }
        gradient.colors = cgcolors;
        gradient.locations = @[@0, @1];

        UIView *gradientView = [[UIView alloc] init];
        [gradientView.layer addSublayer:gradient];
        gradientView.maskView = titleLabel;

        // Stack
        UIStackView *stackView = [[UIStackView alloc] initWithArrangedSubviews:@[gradientView, subtitleLabel]];
        stackView.alignment = UIStackViewAlignmentLeading;
        stackView.axis = UILayoutConstraintAxisVertical;
        stackView.distribution = UIStackViewDistributionEqualCentering;
        stackView.spacing = 0;
        stackView.translatesAutoresizingMaskIntoConstraints = NO;
        [self addSubview:stackView];

        [NSLayoutConstraint activateConstraints:@[
            [stackView.leadingAnchor constraintEqualToAnchor:self.leadingAnchor constant:25],
            [stackView.centerYAnchor constraintEqualToAnchor:self.centerYAnchor],
            [stackView.heightAnchor constraintEqualToConstant:titleLabel.frame.size.height + subtitleLabel.frame.size.height],

            [gradientView.widthAnchor constraintEqualToConstant:titleLabel.frame.size.width],
            [gradientView.heightAnchor constraintEqualToConstant:titleLabel.frame.size.height]
        ]];
    }

    return self;
}

Answer 1

问题是您的gradientView没有内在的内容大小。

尝试更改对此的限制：

    [NSLayoutConstraint activateConstraints:@[
        [stackView.leadingAnchor constraintEqualToAnchor:self.leadingAnchor constant:25],
        [stackView.centerYAnchor constraintEqualToAnchor:self.centerYAnchor],

        // shouldn't need to set a height anchor on the stackView
        //[stackView.heightAnchor constraintEqualToConstant:titleLabel.frame.size.height + subtitleLabel.frame.size.height],
        
        [gradientView.widthAnchor constraintEqualToConstant:titleLabel.frame.size.width],
        [gradientView.heightAnchor constraintEqualToConstant:titleLabel.frame.size.height],

    ]];