淡化UITableView的边缘

我对我的问题做了一些研究，不幸的是我的问题没有解决方案。 最接近的是Fade UIImageView，因为它接近UIScrollView的边缘，但它仍然不适合我。

我希望我的表格在顶部应用“隐形渐变”。 如果细胞距离顶部边缘50px，则它开始消失。 它越接近上边缘，该部分越不可见。 单元格高度约为200像素，因此单元格的下半部分需要100％可见。 但是没关系 – 我需要一个表视图（或表视图容器）来完成这个任务，因为类似的表可以显示其他单元格。

如果表是纯色视图的子视图，我可以通过添加一个水平渐变的图像来实现这一点，我可以将其拉伸到任何宽度。 该图像的顶部像素以背景的确切颜色开始，向下相同的颜色具有较少的alpha。

但是……我们有一个透明色的UITableView。 在桌子下面没有纯色，但是图案图像/纹理，在应用程序的其他屏幕上也可以是不同的。

你有什么想法我怎么能实现这种行为？

问候

我参加了本教程并做了一些更改和补充：

  • 它现在适用于所有的tableviews – 即使它们是更大的屏幕的一部分。
  • 无论背景或桌面背后的内容如何，​​它都可以工作。
  • 面具的更改取决于表视图的位置 – 当滚动到顶部时只有底部褪色，当滚动到底部时只有顶部褪色…

1.首先导入QuartzCore 并在控制器中设置遮罩层 ：

编辑：无需在课堂上参考CAGradientLayer 。 

 #import  #import  @interface mViewController : UIViewController . . @end

2.将此添加到viewWillAppear viewDidLayoutSubviews 🙁 参见@ Darren对此评论 ） 

 - (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; if (!self.tableView.layer.mask) { CAGradientLayer *maskLayer = [CAGradientLayer layer]; maskLayer.locations = @[[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.2], [NSNumber numberWithFloat:0.8], [NSNumber numberWithFloat:1.0]]; maskLayer.bounds = CGRectMake(0, 0, self.tableView.frame.size.width, self.tableView.frame.size.height); maskLayer.anchorPoint = CGPointZero; self.tableView.layer.mask = maskLayer; } [self scrollViewDidScroll:self.tableView]; }

3.通过将其添加到控制器的.h ，确保您是UIScrollViewDelegate的委托： 

 @interface mViewController : UIViewController

4.要完成， scrollViewDidScroll在控制器.m实现scrollViewDidScroll ： 

 #pragma mark - Scroll View Delegate Methods - (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGColorRef outerColor = [UIColor colorWithWhite:1.0 alpha:0.0].CGColor; CGColorRef innerColor = [UIColor colorWithWhite:1.0 alpha:1.0].CGColor; NSArray *colors; if (scrollView.contentOffset.y + scrollView.contentInset.top <= 0) { //Top of scrollView colors = @[(__bridge id)innerColor, (__bridge id)innerColor, (__bridge id)innerColor, (__bridge id)outerColor]; } else if (scrollView.contentOffset.y + scrollView.frame.size.height >= scrollView.contentSize.height) { //Bottom of tableView colors = @[(__bridge id)outerColor, (__bridge id)innerColor, (__bridge id)innerColor, (__bridge id)innerColor]; } else { //Middle colors = @[(__bridge id)outerColor, (__bridge id)innerColor, (__bridge id)innerColor, (__bridge id)outerColor]; } ((CAGradientLayer *)scrollView.layer.mask).colors = colors; [CATransaction begin]; [CATransaction setDisableActions:YES]; scrollView.layer.mask.position = CGPointMake(0, scrollView.contentOffset.y); [CATransaction commit]; }

再说一遍：大多数解决方案来自cocoanetics中的本教程。

这是我inheritanceUITableView的淡化表视图的版本。 经过iOS 7和8测试。

  1. 无需实现scrollViewDidScroll，可以使用layoutSubviews。
  2. 通过观察边界变化，在旋转变化时始终正确放置掩模。
  3. 您可以使用百分比参数来更改边缘处所需的淡入淡出量，在某些情况下，我发现较小的值看起来更好。

CEFadingTableView.m 

 #import "CEFadingTableView.h" @interface CEFadingTableView() @property (nonatomic) float percent; // 1 - 100% @end @implementation CEFadingTableView - (void)awakeFromNib { [super awakeFromNib]; self.percent = 5.0f; [self addObserver:self forKeyPath:@"bounds" options:0 context:nil]; } - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context { if(object == self && [keyPath isEqualToString:@"bounds"]) { [self initMask]; } } - (void)dealloc { [self removeObserver:self forKeyPath:@"bounds"]; } - (void)layoutSubviews { [super layoutSubviews]; [self updateMask]; } - (void)initMask { CAGradientLayer *maskLayer = [CAGradientLayer layer]; maskLayer.locations = @[@(0.0f), @(_percent / 100), @(1 - _percent / 100), @(1.0f)]; maskLayer.bounds = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height); maskLayer.anchorPoint = CGPointZero; self.layer.mask = maskLayer; [self updateMask]; } - (void)updateMask { UIScrollView *scrollView = self; CGColorRef outer = [UIColor colorWithWhite:1.0 alpha:0.0].CGColor; CGColorRef inner = [UIColor colorWithWhite:1.0 alpha:1.0].CGColor; NSArray *colors = @[(__bridge id)outer, (__bridge id)inner, (__bridge id)inner, (__bridge id)outer]; if(scrollView.contentOffset.y <= 0) // top { colors = @[(__bridge id)inner, (__bridge id)inner, (__bridge id)inner, (__bridge id)outer]; } else if((scrollView.contentOffset.y + scrollView.frame.size.height) >= scrollView.contentSize.height) // bottom { colors = @[(__bridge id)outer, (__bridge id)inner, (__bridge id)inner, (__bridge id)inner]; } ((CAGradientLayer *)scrollView.layer.mask).colors = colors; [CATransaction begin]; [CATransaction setDisableActions:YES]; scrollView.layer.mask.position = CGPointMake(0, scrollView.contentOffset.y); [CATransaction commit]; } @end

这是Aviel Gross对Swift的回答 

 import UIKit class mViewController: UIViewController, UIScrollViewDelegate { //Emitted boilerplate code override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() if (self.tableView.layer.mask == nil) { //If you are using auto layout //self.view.layoutIfNeeded() let maskLayer: CAGradientLayer = CAGradientLayer() maskLayer.locations = [0.0,0.2,0.8,1.0] let width = self.tableView.frame.size.width let height = self.tableView.frame.size.height maskLayer.bounds = CGRect(x: 0.0, y: 0.0, width: width, height: height) maskLayer.anchorPoint = CGPoint.zero // Swift 3.0 update self.tableView.layer.mask = maskLayer } scrollViewDidScroll(self.tableView) } // Swift 3.0 update func scrollViewDidScroll(_ scrollView: UIScrollView) { let outerColor = UIColor(white: 1.0, alpha: 0.0).CGColor let innerColor = UIColor(white: 1.0, alpha: 1.0).CGColor var colors = [AnyObject]() if (scrollView.contentOffset.y+scrollView.contentInset.top <= 0) { colors = [innerColor, innerColor, innerColor, outerColor] }else if (scrollView.contentOffset.y+scrollView.frame.size.height >= scrollView.contentSize.height){ colors = [outerColor, innerColor, innerColor, innerColor] }else{ colors = [outerColor, innerColor, innerColor, outerColor] } (scrollView.layer.mask as! CAGradientLayer).colors = colors CATransaction.begin() CATransaction.setDisableActions(true) scrollView.layer.mask?.position = CGPoint(x: 0.0, y: scrollView.contentOffset.y) CATransaction.commit() } //Emitted boilerplate code }

Swift 3版@ victorfigol的出色解决方案： 

 class FadingTableView : UITableView { var percent = Float(0.05) fileprivate let outerColor = UIColor(white: 1.0, alpha: 0.0).cgColor fileprivate let innerColor = UIColor(white: 1.0, alpha: 1.0).cgColor override func awakeFromNib() { super.awakeFromNib() addObserver(self, forKeyPath: "bounds", options: NSKeyValueObservingOptions(rawValue: 0), context: nil) } override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) { if object is FadingTableView && keyPath == "bounds" { initMask() } } deinit { removeObserver(self, forKeyPath:"bounds") } override func layoutSubviews() { super.layoutSubviews() updateMask() } func initMask() { let maskLayer = CAGradientLayer() maskLayer.locations = [0.0, NSNumber(value: percent), NSNumber(value:1 - percent), 1.0] maskLayer.bounds = CGRect(x:0, y:0, width:frame.size.width, height:frame.size.height) maskLayer.anchorPoint = CGPoint.zero self.layer.mask = maskLayer updateMask() } func updateMask() { let scrollView : UIScrollView = self var colors = [AnyObject]() if scrollView.contentOffset.y <= -scrollView.contentInset.top { // top colors = [innerColor, innerColor, innerColor, outerColor]; } else if (scrollView.contentOffset.y + scrollView.frame.size.height) >= scrollView.contentSize.height { // bottom colors = [outerColor, innerColor, innerColor, innerColor] } else { colors = [outerColor, innerColor, innerColor, outerColor] } if let mask = scrollView.layer.mask as? CAGradientLayer { mask.colors = colors CATransaction.begin() CATransaction.setDisableActions(true) mask.position = CGPoint(x: 0.0, y: scrollView.contentOffset.y) CATransaction.commit() } } }
Interesting Posts