Fade bottom of UIScrollView to transparent

Question

У меня есть UIScrollView, и мне нужно, чтобы дно исчезло до прозрачного, чтобы оно не прерывало резкое отключение содержимого. Фон UIScrollView - это особый цвет. Это то, что у меня есть до сих пор, но слой отображается белым, а не пользовательским цветом. Это то, что я собираюсь, но только на дне.

:

Вот то, что я до сих пор:

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.

Answer 1

Подход, который я использовал, заключался в подклассе UIScrollView и создании слоя маски в методе layoutSubviews.

Вот мой код, который затухает в верхней и нижней части UIScrollView от цвета фона к прозрачному:

#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 

Если вы просто хотите, чтобы исчезнуть в нижней части, измените эту строку:

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

Когда я сам реализовал это, я нашел this SO question полезным и this gist на github.

EDIT: Я поставил этот код на github, см. here.

Answer 2

Theres также this ответ, который не включает подклассы.

Answer 3

Действительно, как реализация Стефа Шарпа, я превратил его в быстрое и подумал, что я поделюсь на тот случай, если кому-то это понадобится.

let fadePercentage = CGFloat(0.2) 

override func layoutSubviews() { 

    super.layoutSubviews() 

    var transparent = UIColor.clearColor().CGColor 
    var opaque = UIColor.blackColor().CGColor 

    var maskLayer = CALayer() 
    maskLayer.frame = self.bounds 

    var gradientLayer = CAGradientLayer() 
    gradientLayer.frame = CGRectMake(self.bounds.origin.x, 0, self.bounds.size.width, self.bounds.size.height) 
    gradientLayer.colors = [transparent, opaque, opaque, transparent] 
    gradientLayer.locations = [0, fadePercentage, 1 - fadePercentage, 1] 

    maskLayer.addSublayer(gradientLayer) 
    self.layer.mask = maskLayer 

} 

Answer 4

Здесь идет быстрый 3 вариант ответа Стеф в:

let fadePercentage: Double = 0.2 

override func layoutSubviews() { 

    super.layoutSubviews() 

    let transparent = UIColor.clear.cgColor 
    let opaque = UIColor.black.cgColor 

    let maskLayer = CALayer() 
    maskLayer.frame = self.bounds 

    let gradientLayer = CAGradientLayer() 
    gradientLayer.frame = CGRect(x: self.bounds.origin.x, y: 0, width: self.bounds.size.width, height: self.bounds.size.height) 
    gradientLayer.colors = [transparent, opaque, opaque, transparent] 
    gradientLayer.locations = [0, NSNumber(floatLiteral: fadePercentage), NSNumber(floatLiteral: 1 - fadePercentage), 1] 

    maskLayer.addSublayer(gradientLayer) 
    self.layer.mask = maskLayer 

}