Dissolvenza inferiore di UIScrollView a trasparente

Question

Ho un UIScrollView e ho bisogno del fondale per dissolvere a trasparente, in modo che non interrompa bruscamente il contenuto. Lo sfondo di UIScrollView è un colore personalizzato. Questo è quello che ho finora, ma il livello è bianco, invece del colore personalizzato. Questo è quello che sto cercando, ma solo in fondo.

:

Ecco quello che ho finora:

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]; 

Per qualche ragione, lo strato sta rivelando come il bianco, e solo la metà della larghezza della ScrollView.

Answer 1

L'approccio da me utilizzato era la sottoclasse UIScrollView e creare il livello maschera nel metodo layoutSubviews.

Ecco il mio codice, che sfuma la parte superiore e inferiore del UIScrollView dal colore di sfondo trasparente:

#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 

Se si desidera solo a svanire in fondo, modificare questa riga:

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

Quando stavo implementando questo da solo, ho trovato utile this SO question e this gist su github.

MODIFICA: Ho inserito questo codice su github, vedere here.

Answer 2

Theres anche this risposta che non include alcuna sottoclasse.

Answer 3

Proprio come l'implementazione di Steph Sharp, l'ho convertito in rapido e ho pensato di condividerlo nel caso in cui qualcun altro ne avesse bisogno.

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

Qui va il 3 versione rapida di risposta di Steph:

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 

}