So erstellen Sie eine top-fade-Effekt mit UIScrollView?

Habe ich eine UIScrollView in meine app und ich habe gesehen, in einigen anderen apps, wenn der Benutzer blättert im oberen Bereich blendet auf Blättern, anstatt nur aus dissapearing.

Wirklich, ich Liebe diesen Effekt und möchte es erreichen. Irgendwelche Ideen, wie es getan werden kann?

InformationsquelleAutor Omar | 2013-07-21

Nur auf Rob ' s Super Antwort, hier ist eine Kategorie 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

welcher dies .. hier zu sehen auf einem kleinen UIWebView ...

So erstellen Sie eine top-fade-Effekt mit UIScrollView?

(Klar zu sein, das web-Ansicht selbst ist weiß; der web-Ansicht geschieht, sitzen auf einer Grau hintergrund. So, die fadeTail Funktion im Grunde klingt die "ganze" web-Ansicht", um was auch immer geschieht, zu sein, darunter.)

Hoffen es spart jemand ein wenig Tippen, cheers

InformationsquelleAutor Fattie

EDIT: ich habe diesen code auf github, siehe hier.

Sehen meine Antwort zu einer ähnlichen Frage.

Meine Lösung ist Unterklasse UIScrollView, und erstellen Sie eine Ebenenmaske in der layoutSubviews Methode.

#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

Den obigen code blendet den oberen und unteren Rand der UIScrollView von der hintergrund-Farbe zu transparent, aber dies kann leicht geändert werden, verblassen die Spitze nur (oder verblassen zu jeder Farbe, die Sie wollen).

Ändern Sie diese Zeile zu verblassen, die oben nur:

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

EDIT 2:

Oder verblassen die oben nur durch das ändern von zwei Zeilen:

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

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

Oder verblassen die unteren nur:

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

Keine Idee, wie verblassen der Unterseite?
Siehe mein edit oben.
Dies scheint zu einer Maske alles unter ios6
Haben Sie versucht, mein demo-Projekt hier? Es funktioniert wie erwartet auf iOS 6.
Seltsam, ich habe umgesetzt, das auf einem UICollectionView und es scheint nicht so zu Verhalten, wie es sein sollte. Funktioniert perfekt für iOS7, aber es nur Masken alles auf iOS6. Ich werde in diese Aussehen, ein bisschen mehr könnte es ein Fehler in meinem code.
CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = CGRectMake(selbst.Grenzen.Herkunft.x, 260, selbst.Grenzen.Größe.Breite, selbst.Grenzen.Größe.Höhe-260); gradientLayer.colors = [NSArray arrayWithObjects: transparent, Opak, opaque, transparent, nil]; gradientLayer.locations = [NSArray arrayWithObjects: [NSNumber numberWithFloat:0], [NSNumber numberWithFloat:fadePercentage], nil]; Dies ist, was ich verwende, ich brauche die Blende zu decken, die Hälfte des Bildschirms und das funktioniert bei iOS7, aber nicht für iOS6.
haben Sie eine Idee, wie Sie den Verlauf, um nur ein uitableview und die uitableviewcells aber nicht alle schwimmenden Tasten ich hinzufügen das tableview? Ich möchte nicht, dass die schwebenden Schaltflächen eingeblendet werden, aber die Zelle unterhalb der Tasten werden

InformationsquelleAutor Steph Sharp

8

Können Sie eine CAGradientLayer durch
1. Hinzufügen des QuartzCore.framework zu Ihrem Projekt (siehe Die Verknüpfung zur Bibliothek oder Framework).
2. Hinzufügen #import des QuartzCore-Header:
```
#import <QuartzCore/QuartzCore.h>
```
3. Und verwenden Sie dann 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];
}
```
Beachten Sie, dass dieses CAGradientLayer ist ein Farbverlauf aus einer Farbe mit alpha-Wert von 0.0 (z.B. clearColor) zu einer Farbe zu einer Farbe mit alpha-Wert von 1.0 (z.B. whiteColor), nicht nur von schwarz zu weiß. Sie können einstellen, dass das startPoint (der Standardwert ist wahrscheinlich fein), und die endPoint zu passen, wo Sie wollen die Steigung angewendet werden.

Werden und in der Regel, wenn dies mit einer UIScrollView, es sei denn, Sie wollen die Steigung zu Blättern Sie mit oder, Sie machen die UIScrollView eine Untersicht einige andere UIView anwenden, Verlauf, dass der container-Ansicht, nicht die scroll-view selbst.
- fantastisch! Vor allem die etwas über UIScrollView
InformationsquelleAutor Rob

Dank Fattie ' s Antwort habe ich die folgende UIView-extension, Swift, kümmert den Farbverlauf verblassen und bietet mehr Arten (unten, oben, Links, rechts, vertikal und horizontal) sowie fade-Anteil.

Für jegliche Kommentare/Empfehlungen bitte lassen Sie mich wissen, am Kernaussage die ich angelegt habe, ich versuche zu halten, die und diese Antwort ist up-to-date mit allen änderungen, die ich hinzufügen.

Die Erweiterung:

extension UIView {

    enum UIViewFadeStyle {
        case bottom
        case top
        case left
        case right

        case vertical
        case horizontal
    }

    func fadeView(style: UIViewFadeStyle = .bottom, percentage: Double = 0.07) {
        let gradient = CAGradientLayer()
        gradient.frame = bounds
        gradient.colors = [UIColor.white.cgColor, UIColor.clear.cgColor]

        let startLocation = percentage
        let endLocation = 1 - percentage

        switch style {
        case .bottom:
            gradient.startPoint = CGPoint(x: 0.5, y: endLocation)
            gradient.endPoint = CGPoint(x: 0.5, y: 1)
        case .top:
            gradient.startPoint = CGPoint(x: 0.5, y: startLocation)
            gradient.endPoint = CGPoint(x: 0.5, y: 0.0)
        case .vertical:
            gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
            gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
            gradient.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, UIColor.white.cgColor, UIColor.clear.cgColor]
            gradient.locations = [0.0, startLocation, endLocation, 1.0] as [NSNumber]

        case .left:
            gradient.startPoint = CGPoint(x: startLocation, y: 0.5)
            gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
        case .right:
            gradient.startPoint = CGPoint(x: endLocation, y: 0.5)
            gradient.endPoint = CGPoint(x: 1, y: 0.5)
        case .horizontal:
            gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
            gradient.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, UIColor.white.cgColor, UIColor.clear.cgColor]
            gradient.locations = [0.0, startLocation, endLocation, 1.0] as [NSNumber]
        }

        layer.mask = gradient
    }

}

wirklich das ist die beste Antwort und der einzige Weg, es zu tun in der modernen Zeit.
Danke @Fattie außerdem habe ich einen fade Prozent param, da brauchte ich unterschiedliche Mengen von fading für mein Projekt. Bearbeitet meine Antwort mit der änderung.

InformationsquelleAutor Lucas P.

Fügen Sie eine alpha-Maske Schicht zu einer Ansicht mit Ihrem scroll-Ansicht wie diese:

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

wo "scrollMask" ist ein Graustufen-Bild definieren mask region: white == vollständig maskierte, schwarz == nicht maskiert und Grau == teilweise maskiert.

Effekt zu erstellen, die Sie suchen, das Bild mit der Maske sollte schwarz mit einem weißen Farbverlauf an der Spitze wie diese:

So erstellen Sie eine top-fade-Effekt mit UIScrollView?

Für mehr details, schauen Sie in der Dokumentation für CGImageMaskCreate.

InformationsquelleAutor Timothy Moose

Bauten wir auf Steph Sharp-code, um nur verblassen, wenn nötig. Unsere code-setup als eine statische utility-Methode anstelle einer Unterklasse, so dass wir die Wiederverwendung der Methode in unserer Unterklassen von UIScrollView und UITableView. Hier ist unsere statische utility-Methode:

#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;
}

Hier ist unser Gebrauch von dieser Methode.

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

layoutSubviews mehrfach aufgerufen wird. Ist dieser code hinzufügen, Ebenen-Maske nur ein mal ?

InformationsquelleAutor Dave Fisher

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.