ios - 淡化 UITableView 的边缘

Question

我对我的问题做了一些研究，不幸的是我的问题没有解决方案。最接近的是 Fade UIImageView as it approaches the edges of a UIScrollView但它仍然不适合我。

我希望我的 table 在顶部应用“隐形渐变”。如果单元格距离顶部边缘 50 像素，它就会开始消失。它越靠近上边缘，该部分就越不可见。单元格高度约为 200 像素，因此单元格的下半部分需要 100% 可见。但没关系 - 我需要一个 TableView (或 TableView 容器)来完成这项任务，因为类似的表可以显示其他单元格。

如果表格是纯色 View 的 subview ，我可以通过添加水平渐变图像来实现，我可以将其拉伸(stretch)到任意宽度。该图像的顶部像素从背景的确切颜色开始，向下移动相同的颜色具有更少的 alpha。

可是……我们有一个具有透明颜色 的 UITableView。表格下方没有纯色，而是图案图像/纹理，在应用的其他屏幕上也可能有所不同。

您知道我如何实现这种行为吗？

问候

Answer 1

我拿了this教程并做了一些修改和补充:

• 它现在适用于所有表格 View - 即使它们是大屏幕的一部分。
• 无论背景或 tableview 背后的任何内容，它都能正常工作。
• 掩码的变化取决于表格 View 的位置——当滚动到顶部时只有底部淡出，当滚动到底部时只有顶部淡出...

1. 首先导入 QuartzCore 并在 Controller 中设置 mask 层:

编辑:不需要在类中引用 CAGradientLayer。

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@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.通过将它添加到 Controller 的 .h 中，确保您是 UIScrollViewDelegate 的委托(delegate):

@interface mViewController : UIViewController <UIScrollViewDelegate>

4. 最后，在您的 Controller .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];
}

同样:大部分解决方案来自 this cocoa 动力学教程。