将CALayer修复在UIScrollView的顶部和底部

时间:2010-12-16 15:23:23

标签: iphone objective-c uiscrollview calayer

我正在继承UIScrollView并添加一些可视元素。在顶部,应该有一个从黑色到透明的渐变,在底部有一个向下淡化的面具。我添加了这些图层并且看起来正确,但是当我滚动时,它们保持在我放入的坐标(相对于滚动视图),而不是“固定”到视图的底部和顶部。此滚动视图仅垂直滚动。

以下是SettingsScrollView.m的代码:

#import "SettingsScrollView.h"
#import <QuartzCore/QuartzCore.h>

#define SHADOW_HEIGHT 20.0
#define SHADOW_INVERSE_HEIGHT 10.0
#define SHADOW_RATIO (SHADOW_INVERSE_HEIGHT / SHADOW_HEIGHT)

@implementation SettingsScrollView


- (id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];

    [self setUpShadow];

    return self;
}

- (CAGradientLayer *)shadowAsInverse:(BOOL)inverse
{
    CAGradientLayer *newShadow = [[[CAGradientLayer alloc] init] autorelease];
    CGRect newShadowFrame = CGRectMake(0, 0, self.frame.size.width, inverse ? SHADOW_INVERSE_HEIGHT : SHADOW_HEIGHT);
    newShadow.frame = newShadowFrame;
    CGColorRef darkColor =[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:inverse ? (SHADOW_INVERSE_HEIGHT / SHADOW_HEIGHT) * 0.5 : 0.5].CGColor;
    CGColorRef lightColor = [self.backgroundColor colorWithAlphaComponent:0.0].CGColor;

    newShadow.colors = [NSArray arrayWithObjects: (id)(inverse ? lightColor : darkColor), (id)(inverse ? darkColor : lightColor), nil];
    return newShadow;
}

- (CAGradientLayer *)gradientMask
{
    CAGradientLayer *mask = [[[CAGradientLayer alloc] init] autorelease];
    CGRect maskFrame =  CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    mask.frame = maskFrame;
    CGColorRef darkColor =[UIColor clearColor].CGColor;
    CGColorRef lightColor =[UIColor blackColor].CGColor;

    mask.colors = [NSArray arrayWithObjects: (id)lightColor, (id)lightColor, (id)darkColor, nil];
    mask.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.9], [NSNumber numberWithFloat:1.0], nil]; 
    return mask;
}

- (void)setUpShadow
{
    CAGradientLayer *topShadowLayer = [self shadowAsInverse:NO];
    CAGradientLayer *bottomShadowLayer = [self gradientMask];

    [self.layer insertSublayer:topShadowLayer atIndex:0];

    [self.layer setMask:bottomShadowLayer];

    [CATransaction begin];
    [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions];

    CGRect topShadowLayerFrame = topShadowLayer.frame;
    topShadowLayerFrame.size.width = self.frame.size.width;
    topShadowLayerFrame.origin.y = 0;
    topShadowLayer.frame = topShadowLayerFrame;

    CGRect bottomShadowLayerFrame = bottomShadowLayer.frame;
    bottomShadowLayerFrame.size.width = self.frame.size.width;
    bottomShadowLayerFrame.origin.y = self.frame.size.height - bottomShadowLayer.frame.size.height;
    bottomShadowLayer.frame = bottomShadowLayerFrame;

    [CATransaction commit];
}

@end

我知道顶部的一个解决方案可能只是添加一个包含渐变的单独视图,但对于底部我相信我需要使用一个遮罩让它做我想要的(淡出到背景中)在最底部)。背景是一个图像所以我不能只是淡化为白色或其他颜色,它需要淡化清除。我一直在寻找一个方法,当滚动视图被移动时被调用,并使用它来改变面具的位置,但我还没有找到任何东西。有什么建议吗?

1 个答案:

答案 0 :(得分:0)

你可以通过覆盖UIScrollView上的-layoutSubviews来实现这一点,当它的边界发生变化时会调用它。

我在这样的视图中看到的另一种技术是,不是从视图,子类CALayer进行此层管理,而是使用子类作为滚动视图的图层,然后在图层的{{1}中使用当它四处移动时,做同样的工作。我提到了后一种技术,因为对于层管理其子层而言直接管理层子层的视图似乎更自然。