Come creare un effetto di dissolvenza superiore usando UIScrollView?

Question

Ho un UIScrollView nella mia app e ho visto in alcune altre app che quando l'utente scorre, la sezione superiore svanisce sul scroll piuttosto che scomparire.

Amo davvero questo effetto e voglio realizzarlo. Qualche idea su come può essere fatto?

Answer 1

Le viste sono tutte le sottoview della vista di scorrimento in modo che ognuna abbia il proprio alpha. Puoi agire come delegato per la visualizzazione di scorrimento e in scrollViewDidScroll è possibile controllare lo contentOffset e modificare lo alpha di qualsiasi subview che si desidera.

Answer 2

Si aggiunge un livello maschera alfa per una vista che contiene la vista di scorrimento in questo modo:

CALayer *mask = [CALayer layer]; 
CGImageRef maskRef = [UIImage imageNamed:@"scrollMask"].CGImage; 
CGImageRef maskImage = CGImageMaskCreate(CGImageGetWidth(maskRef), 
              CGImageGetHeight(maskRef), 
              CGImageGetBitsPerComponent(maskRef), 
              CGImageGetBitsPerPixel(maskRef), 
              CGImageGetBytesPerRow(maskRef), 
              CGImageGetDataProvider(maskRef), NULL, false); 
mask.contents = (__bridge id)maskImage; 
mask.frame = CGRectMake(0, 0, view.bounds.size.width, view.bounds.size.height); 
view.layer.mask = mask; 
view.layer.masksToBounds = YES; 
CGImageRelease(maskImage); 

dove "scrollMask" è un'immagine in scala di grigi regione di definizione maschera: bianco == completamente mascherato, nero == non mascherato del tutto e grigio == parzialmente mascherato.

Per creare l'effetto che stai cercando, l'immagine della maschera sarebbe stato nero con un gradiente bianco in alto in questo modo:

Per maggiori dettagli, date un'occhiata alla documentazione per CGImageMaskCreate.

Answer 3

È possibile utilizzare un CAGradientLayer da

1. Aggiunta del QuartzCore.framework al progetto (vedi Linking to Library or Framework).

2. Aggiungi #import delle intestazioni QuartzCore:

   #import <QuartzCore/QuartzCore.h> 
   

3. e quindi utilizzare CAGradientLayer:

   - (void)addGradientMaskToView:(UIView *)view 
   { 
       CAGradientLayer *gradient = [CAGradientLayer layer]; 
       gradient.frame = view.bounds; 
       gradient.colors = @[(id)[[UIColor clearColor] CGColor], (id)[[UIColor whiteColor] CGColor]]; 
       gradient.startPoint = CGPointMake(0.5, 0.0); // this is the default value, so this line is not needed 
       gradient.endPoint = CGPointMake(0.5, 0.20); 
   
       [view.layer setMask:gradient]; 
   } 
   

Nota, questo CAGradientLayer è un gradiente da un colore con l'alfa di 0.0 (es. clearColor) a un colore con un colore con alfa di 1.0 (ad es. whiteColor), non solo dal nero al bianco. È possibile regolare startPoint (il valore predefinito è probabilmente corretto) e endPoint per regolare dove si desidera applicare la sfumatura.

E, in generale, quando si fa questo con una UIScrollView, a meno che non si desidera che il gradiente per scorrere con voi, a fare la UIScrollView una visualizzazione secondaria di qualche altro UIView e diffusa questa sfumatura a questo punto di vista il contenitore, non la vista di scorrimento stesso.

Answer 4

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

---

Vedere my answer per una domanda simile.

La mia soluzione è di sottoclasse UIScrollView e creare un livello maschera nel metodo layoutSubviews.

#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 

Il codice di cui sopra svanisce la parte superiore e inferiore del UIScrollView dal colore di sfondo trasparente, ma questo può essere facilmente modificato per svanire solo la parte superiore (o fade a tutto il colore che volete).

Modificare questa linea a sbiadire l'alto solo:

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

---

EDIT 2:

o fade in cima solo cambiando queste due righe:

// Fade top of scrollview only 
    gradientLayer.colors = [NSArray arrayWithObjects: transparent, opaque, nil]; 

    gradientLayer.locations = [NSArray arrayWithObjects: [NSNumber numberWithFloat:0], 
                 [NSNumber numberWithFloat:fadePercentage], nil]; 

Oppure svanire solo il fondo:

// Fade bottom of scrollview only 
    gradientLayer.colors = [NSArray arrayWithObjects: opaque, transparent, nil]; 

    gradientLayer.locations = [NSArray arrayWithObjects: [NSNumber numberWithFloat:1.0 - fadePercentage], 
                 [NSNumber numberWithFloat:1], nil]; 

Answer 5

Proprio sulla base di grande risposta di Rob, ecco una categoria a UIView,

@implementation UIView (Looks) 

-(void)fadeTail 
    { 
    CAGradientLayer *gradient = [CAGradientLayer layer]; 
    gradient.frame = self.bounds; 
    gradient.colors = @[ 
     (id)[[UIColor whiteColor] CGColor], 
     (id)[[UIColor clearColor] CGColor] 
     ]; 
    gradient.startPoint = CGPointMake(0.5, 0.93); 
    gradient.endPoint = CGPointMake(0.5, 1); 

    [self.layer setMask:gradient]; 
    } 

@end 

che fa questo .. visto qui su una piccola UIWebView ...

(Per essere chiari, la web view stessa è bianca; la visualizzazione Web sembra essere sullo sfondo grigiastro. Quindi, la funzione fadeTail praticamente svanisce il "tutto" vista web, a tutto ciò che sembra essere al di sotto.)

Speranza che salva qualcuno un po 'di battitura, applausi

Answer 6

abbiamo costruito sul codice di Steph Sharp solo svanire quando necessario. Il nostro codice è impostato come metodo di utilità statica anziché come sottoclasse, in modo da poter riutilizzare il metodo nelle sottoclassi di UIScrollView e UITableView. Ecco il nostro metodo di utilità statica:

#define kScrollViewFadeColorLight [UIColor colorWithRed:0.56 green:0.56 blue:0.56 alpha:0.0] 
#define kScrollViewFadeColorDark [UIColor colorWithRed:0.56 green:0.56 blue:0.56 alpha:1.0] 

#define kScrollViewScrollBarWidth 7.0 
#define kScrollViewFadingEdgeLength 40.0 

+ (void) applyFadeToScrollView:(UIScrollView*) scrollView { 
    CGFloat topOffset = -scrollView.contentInset.top; 
    CGFloat bottomOffset = scrollView.contentSize.height + scrollView.contentInset.bottom - scrollView.bounds.size.height; 
    CGFloat distanceFromTop = scrollView.contentOffset.y - topOffset; 
    CGFloat distanceFromBottom = bottomOffset - scrollView.contentOffset.y; 
    BOOL isAtTop = distanceFromTop < 1.0; 
    BOOL isAtBottom = distanceFromBottom < 1.0; 
    if (isAtTop && isAtBottom) { 
    // There is no scrolling to be done here, so don't fade anything! 
    scrollView.layer.mask = nil; 
    return; 
    } 
    NSObject* transparent = (NSObject*)[kScrollViewFadeColorLight CGColor]; 
    NSObject* opaque = (NSObject*)[kScrollViewFadeColorDark CGColor]; 

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

    CALayer* scrollGutterLayer = [CALayer layer]; 
    scrollGutterLayer.frame = CGRectMake(scrollView.bounds.size.width - kScrollViewScrollBarWidth, 0.0, 
             kScrollViewScrollBarWidth, scrollView.bounds.size.height); 
    scrollGutterLayer.backgroundColor = (__bridge CGColorRef)(opaque); 
    [maskLayer addSublayer:scrollGutterLayer]; 

    CAGradientLayer* gradientLayer = [CAGradientLayer layer]; 
    gradientLayer.frame = CGRectMake(0.0, 0.0, scrollView.bounds.size.width, scrollView.bounds.size.height); 
    CGFloat fadePercentage = kScrollViewFadingEdgeLength/scrollView.bounds.size.height; 
    NSMutableArray* colors = [[NSMutableArray alloc] init]; 
    NSMutableArray* locations = [[NSMutableArray alloc] init]; 
    if (!isAtTop) { 
    [colors addObjectsFromArray:@[transparent, opaque]]; 
    [locations addObjectsFromArray:@[@0.0, [NSNumber numberWithFloat:fadePercentage]]]; 
    } 
    if (!isAtBottom) { 
    [colors addObjectsFromArray:@[opaque, transparent]]; 
    [locations addObjectsFromArray:@[[NSNumber numberWithFloat:1.0 - fadePercentage], @1.0]]; 
    } 
    gradientLayer.colors = colors; 
    gradientLayer.locations = locations; 
    [maskLayer addSublayer:gradientLayer]; 
    scrollView.layer.mask = maskLayer; 
} 

Ecco il nostro utilizzo di tale metodo.

FadingScrollView.h

@interface FadingScrollView : UIScrollView 
@end 

FadingScrollView.m

@implementation FadingScrollView 
- (void) layoutSubviews { 
    [super layoutSubviews]; 
    [Utils applyFadeToScrollView:self]; 
} 
@end 

FadingTableView.h

@interface FadingTableView : UITableView  
@end 

FadingTableView.m

@implementation FadingTableView 
- (void) layoutSubviews { 
    [super layoutSubviews]; 
    [Utils applyFadeToScrollView:self]; 
} 
@end