将UIScrollView的底部渐隐为透明 [英] Fade bottom of UIScrollView to transparent

问题描述

我有一个UIScrollView，我需要底部逐渐淡化为透明，以便它不会突然切断内容。 UIScrollView的背景是自定义颜色。到目前为止，这是我所拥有的，但是该图层显示为白色，而不是自定义颜色。这就是我要的，但仅是底部。

I have a UIScrollView, and I need the bottom to fade to transparent, so that it does not abruptly cut off the content. The background of the UIScrollView is a custom color. This is what I have so far, but the layer is showing up white, instead of the custom color. This is what I am going for, but only on the bottom.

：

这是我到目前为止的内容：

Here is what I have so far:

maskLayer = [CAGradientLayer layer];

            CGColorRef firstColor = [UIColor colorWithRed:141 green:211 blue:244 alpha:1.0].CGColor;
            CGColorRef secondColor = [UIColor colorWithRed:141 green:211 blue:244 alpha:0.8].CGColor;
            CGColorRef thirdColor = [UIColor colorWithRed:141 green:211 blue:244 alpha:0.2].CGColor;
            CGColorRef fourthColor = [UIColor colorWithRed:141 green:211 blue:244 alpha:0.0].CGColor;

            maskLayer.colors = [NSArray arrayWithObjects:(__bridge id)firstColor, (__bridge id)secondColor, (__bridge id)thirdColor, (__bridge id)fourthColor, nil];
            maskLayer.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],
                                                        [NSNumber numberWithFloat:0.2],
                                                        [NSNumber numberWithFloat:0.8],
                                                        [NSNumber numberWithFloat:1.0], nil];
            maskLayer.frame = CGRectMake(0, 285, self.loginScrollView.frame.size.width, 40);
            maskLayer.anchorPoint = CGPointZero;
            [self.loginScrollView.layer addSublayer:maskLayer];

由于某种原因，该图层显示为白色，并且只有scrollView宽度的一半。

For some reason, the layer is showing up as white, and only half the width of the scrollView.

推荐答案

我使用的方法是将 UIScrollView 子类化，并创建 layoutSubviews 方法中的遮罩层。

The approach I used was to subclass UIScrollView, and create the mask layer in the layoutSubviews method.

这是我的代码，它淡化了<$ c的顶部和底部$ c> UIScrollView 从背景色变为透明：

Here's my code, which fades the top and bottom of the UIScrollView from the background colour to transparent:

#import "FadingScrollView.h"
#import <QuartzCore/QuartzCore.h>

static float const fadePercentage = 0.2;

@implementation FadingScrollView

// ...

- (void)layoutSubviews
{
    [super layoutSubviews];

    NSObject * transparent = (NSObject *) [[UIColor colorWithWhite:0 alpha:0] CGColor];
    NSObject * opaque = (NSObject *) [[UIColor colorWithWhite:0 alpha:1] CGColor];

    CALayer * maskLayer = [CALayer layer];
    maskLayer.frame = self.bounds;

    CAGradientLayer * gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(self.bounds.origin.x, 0,
                                     self.bounds.size.width, self.bounds.size.height);

    gradientLayer.colors = [NSArray arrayWithObjects: transparent, opaque,
                            opaque, transparent, nil];

    // Set percentage of scrollview that fades at top & bottom
    gradientLayer.locations = [NSArray arrayWithObjects:
                               [NSNumber numberWithFloat:0],
                               [NSNumber numberWithFloat:fadePercentage],
                               [NSNumber numberWithFloat:1.0 - fadePercentage],
                               [NSNumber numberWithFloat:1], nil];

    [maskLayer addSublayer:gradientLayer];
    self.layer.mask = maskLayer;
}

@end

如果只想淡入淡出底部，更改此行：

If you just want to fade the bottom, change this line:

// Fade bottom of scrollview only
gradientLayer.locations = [NSArray arrayWithObjects:
                           [NSNumber numberWithFloat:0],
                           [NSNumber numberWithFloat:0],
                           [NSNumber numberWithFloat:1.0 - fadePercentage],
                           [NSNumber numberWithFloat:1], nil];

当我自己实现此功能时，我发现此SO问题很有帮助，并且此要点在github上。

When I was implementing this myself, I found this SO question helpful, and this gist on github.

编辑：我已经将这段代码放在了上面在github上，请参见此处。

I've put this code up on github, see here.

这篇关于将UIScrollView的底部渐隐为透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！