为UIScrollView添加渐变效果

Question

为UIScrollView添加渐变效果

4

我正在尝试为我的UIScrollView添加渐变，以便淡入淡出文本。有人建议我添加CAGradientLayer。一开始，我想尝试像这样做，只覆盖整个区域，而不是担心顶部和底部部分，因为我对渐变和绘画一般都很陌生。我尝试了这种方法，但是我认为它不正确，因为我的UIScrollView中的UILabel文本看起来没有改变。我走在正确的道路上吗？谢谢。

编辑：

    CAGradientLayer *gradient = [CAGradientLayer layer];
    CGColorRef darkColor = [[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.6] CGColor];
//    CGColorRef darkColor = [[self.scrollView.backgroundColor colorWithAlphaComponent:0.5] CGColor];
//    CGColorRef lightColor = [[UIColor colorWithRed:0.8 green:0.8 blue:0.8 alpha:0.6] CGColor];
    CGColorRef lightColor = [[self.scrollView.backgroundColor colorWithAlphaComponent:1.0] CGColor];
    CGRect gradientFrame = self.scrollView.bounds;
    gradientFrame.size.height = 50;
    gradient.frame = gradientFrame;
    gradient.colors = [NSArray arrayWithObjects: (id)darkColor, (id)lightColor, nil];
    [self.scrollView.layer addSublayer:gradient];

我已经尝试了几种不同的方式，使用不同的RGB、alpha值，但是仍然无法使文本渐变消失看起来正确。我尝试了将backgroundColor与alpha从0.0到1.0一起使用，但是我没有看到任何变化。

- Crystal

1

首先尝试更改 scrollView.backgroundColor 来检查是否存在在其上添加的组件透明度 .alpha 问题。 - Vincent Guerci

1

我将backgroundColor更改为不同的颜色，确实看到了渐变效果。但是它只是应用于整个scrollView区域的渐变。因此它看起来只是一个正方形，而不是文字淡出的效果。所以我想我需要使用backgroundColor，但不确定如何操作。有什么想法吗？谢谢。 - Crystal

1

请发布更多涉及alpha属性的代码，否则很难想象您在做什么 :) - Vincent Guerci

1

我添加的代码在我的viewDidLoad方法中。我想先看看效果，然后再将其添加到委托方法中，以便我可以看到它是否正确。我尝试了不同的alpha值，从0.0到1.0，来查看backgroundColor是否有所不同，但当我在模拟器中运行时，没有看到任何变化。只有当我改变lightColor，使用RGBA值，就像我创建darkColor时一样，我才能在模拟器中看到任何东西。 - Crystal

1

那么，如果我理解正确的话，我猜你的问题是colorWithAlphaComponent / 解决方案，不使用colorWithAlphaComponent... UIColor有点奇怪，并且具有不同行为的底层类... 也许你应该直接使用CGColor... 就像CGColorCreateCopyWithAlpha。 - Vincent Guerci

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- HeikoG · Accepted Answer

如果您将渐变添加到滚动视图中，它将随着滚动视图一起滚动。将其添加到滚动视图的父视图中应该可以解决问题。如果大小足够大，则初始情况下仍应该可见。以下是我的解决方法：

+ (CAGradientLayer *)maskWithHorizontalFadingBordersWithinBounds:(CGRect)bounds
{
    CAGradientLayer * maskLayer = [CAGradientLayer layer];

    id outerColor = (id)[UIColor colorWithWhite:1.0 alpha:0.0].CGColor;
    id innerColor = (id)[UIColor colorWithWhite:1.0 alpha:1.0].CGColor;

    maskLayer.colors    = @[outerColor, innerColor, innerColor, outerColor];
    maskLayer.locations = @[@0.0      , @0.025    , @0.975    , @1.0];
    maskLayer.bounds = bounds;
    maskLayer.anchorPoint = CGPointZero;

    return maskLayer;
}

在适当的初始化器中调用此方法，注意尽可能少地创建图层。

scrollViewsSuperView.layer.mask = [CAGradientLayer maskWithHorizontalFadingBordersWithinBounds:scrollView.bounds];

缺点: 滚动条也会受到影响，但我仍然更喜欢这个简单的解决方案。

替代方案: 将遮罩作为滚动视图的子层添加，并在scrollViewDidScroll中将其位置重置为0。