UIScrollViewを使用してトップフェード効果を作成する方法は？

Question

私は自分のアプリでUIScrollViewを取得しています。ユーザーがスクロールするとトップセクションがスクロールして消え去るのではなく、消えてしまうアプリがあります。

私は本当にこの効果が大好きで、それを達成したいと思います。どのようにそれを行うことができます任意のアイデア？

Answer 1

ビューはすべてスクロールビューのサブビューであり、それぞれが独自のalphaを持っています。スクロールビューのデリゲートとして機能することができます。scrollViewDidScrollには、contentOffsetをチェックして、必要なサブビューのいずれかのalphaを変更することができます。

Answer 2

あなたは、このようなあなたのスクロールビューを含むビューにアルファマスク層を追加します。

「scrollMaskは」マスク領域を定義するグレースケール画像である

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

：白==完全にマスクされ、黒は==マスクされていないがと灰色==部分的にマスクされています。詳細については、

のドキュメントを見てみましょう：

は、あなたが探している効果を作成するには、マスク画像は、このような上部に白のグラデーションに黒になりますCGImageMaskCreate。

Answer 3

あなたはCAGradientLayerプロジェクトにQuartzCore.frameworkを追加

1. で（Linking to Library or Frameworkを参照）を使用することができます。

   #import <QuartzCore/QuartzCore.h> 
   

2. をそしてCAGradientLayer使用：

3. QuartzCoreヘッダの#importを追加

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

注、このCAGradientLayerは0.0のアルファを持つ色の勾配は、（あります例えばclearColor）を、アルファ1.0のカラー（例えば、whiteColor）のカラーに変換します。黒から白まで。 startPoint（デフォルト値は多分よいでしょう）とendPointを調整して、グラデーションを適用する場所を調整できます。

そして一般UIScrollViewでこれをやったときに勾配があなたと一緒にスクロールする必要がない限り、あなたはUIScrollView他のいくつかのUIViewのサブビューを作成し、そのコンテナビューではなく、スクロールビュー自体にこのグラデーションを適用。

Answer 4

EDIT：このコードをgithubに入れました。hereを参照してください。

---

my answer同様の質問を参照してください。

私の解決策は、UIScrollViewをサブクラス化し、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 

上記のコードは透明に背景色からUIScrollViewの上部と下部をフェードが、これは簡単にだけでトップをフェード（またはあなたが好きな色にフェード）に変更することができます。

変更のみトップをフェードするには、この行：

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

---

EDIT 2：

それとも唯一の2行変更することで、トップをフェード：

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

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

をまたは、ボトムのみを退色させます：

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

ただ、ロブの偉大な回答に基づいて、ここでこれは...小型のUIWebViewにここで見ないの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 

のカテゴリは（

...です明確にするために、Webビュー自体はの白色です。ウェブビューは、背景が灰色がかっているの背景に座っています。だから、fadeTail機能は、基本的には、下にあることを起こるものは何でもへの「全体」のWebビューを、フェードアウト。）

たちはときにのみフェードするステフシャープのコード上に構築された歓声

Answer 6

、それは誰か少しタイピングを節約ホープ必要。私たちのコードは、UIScrollViewとUITableViewのサブクラスでメソッドを再利用できるように、サブクラスではなく静的ユーティリティメソッドとして設定されています。ここに私たちの静的なユーティリティメソッドは次のとおりです。

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

ここではその方法の私達の使用量があります。

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