UIStackView 中的 UILabel 中的 CAGradientLayer
Posted
技术标签:
【中文标题】UIStackView 中的 UILabel 中的 CAGradientLayer【英文标题】:CAGradientLayer in UILabel in UIStackView 【发布时间】:2021-05-06 12:10:41 【问题描述】:这是 tableHeaderView 的自定义 UIView 子类。
我目前正在尝试将渐变添加到垂直 UIStackView 中的 UILabel。即使在 RTL 语言中,它在没有渐变的情况下也能很好地工作(移动到右侧),但是一旦我添加渐变,gradientView 的 maskView 的标签就会完全脱离它的位置。这里是更好理解的代码:
- (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 的 frame 无缘无故变成了 [width of subtitleLabel], 0, 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;
【问题讨论】:
【参考方案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],
]];
【讨论】:
非常感谢它成功了!我实际上设置了高度以避免堆栈视图在整个子视图高度上展开,所以现在堆栈是紧凑的。我发布了更新的整个代码,以防它可以帮助其他人:)以上是关于UIStackView 中的 UILabel 中的 CAGradientLayer的主要内容,如果未能解决你的问题,请参考以下文章
为啥 UIStackView 中的 UILabel 在重用时会失去高度?
将 UIStackView 中的 UILabel 背景更改为渐变色
UITableViewCell 中的 UIStackView 与多行 UILabel