将 UIScrollView 的底部淡化为透明
Posted
技术标签:
【中文标题】将 UIScrollView 的底部淡化为透明【英文标题】:Fade bottom of UIScrollView to transparent 【发布时间】:2013-06-13 21:22:34 【问题描述】:我有一个 UIScrollView,我需要底部淡入透明,这样它就不会突然切断内容。 UIScrollView 的背景是自定义颜色。这是我到目前为止所拥有的,但是该图层显示为白色,而不是自定义颜色。这就是我想要的,但只是在底部。
:
这是我目前所拥有的:
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];
由于某种原因,图层显示为白色,只有滚动视图宽度的一半。
【问题讨论】:
【参考方案1】:我使用的方法是继承UIScrollView
,并在layoutSubviews
方法中创建遮罩层。
这是我的代码,它将UIScrollView
的顶部和底部从背景颜色淡化为透明:
#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
如果你只想淡化底部,改变这一行:
// Fade bottom of scrollview only
gradientLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0],
[NSNumber numberWithFloat:0],
[NSNumber numberWithFloat:1.0 - fadePercentage],
[NSNumber numberWithFloat:1], nil];
当我自己实现这个时,我发现this SO question 很有帮助,this gist 在 github 上。
编辑:我已将此代码放在 github 上,请参阅 here。
【讨论】:
我觉得现在应该是 UIViewAnimationOptionCurveEaseIn 用在那里了。【参考方案2】:真的很喜欢 Steph Sharp 的实现,我将它转换为 swift 并认为我会分享以防其他人需要它。
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
【讨论】:
【参考方案3】:Steph 回答的 swift 3 版本如下:
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
【讨论】:
感谢您为我节省了一点时间。【参考方案4】:还有 this 答案不包含任何子类化。
【讨论】:
以上是关于将 UIScrollView 的底部淡化为透明的主要内容,如果未能解决你的问题,请参考以下文章
当 UIImageView 接近 UIScrollView 的边缘时淡化它
CAGradientLayer 使用 UIScrollView 滚动
滚动 uiscrollview 时淡化 UITextView