淡出 UITableView 的边缘 [英] Fade edges of UITableView

问题描述

我对我的问题进行了一些研究，但不幸的是，我的问题没有解决方案.最接近的是 当 UIImageView 接近边缘时淡出UIScrollView 但它仍然不适合我.

I've made a little research about my problem and unfortunately there was no solution for my problem. The closest was Fade UIImageView as it approaches the edges of a UIScrollView but it's still not for me.

我希望我的桌子在顶部应用隐形渐变".如果单元格与顶部边缘的距离为 50 像素，则它开始消失.离上边缘越近，零件越不可见.单元格高度约为 200 像素，因此单元格的下部需要 100% 可见.但没关系 - 我需要一个表格视图(或表格视图容器)来完成这项任务，因为类似的表格可以显示其他单元格.

I want my table to apply an "invisibility gradient" on the top. If the cell is at a 50px distance from the top edge it starts to vanish. The closer it is to the upper edge, the more invisible the part is. The cells height is about 200 pixels, so the lower part of the cell need to be visible in 100%. But nevermind - I need a table view (or table view container) to do this task, because similar tables can display other cells.

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

If the table is a subview of a solid color view, I can achieve that by adding an image which is a horizontal gradient that I can streach to any width. The top pixel of that image starts with the exact color of the background, and going down the same color has less alpha.

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

But... we have a UITableView with transparent color. Below the table there is no solid color, but a pattern image/texture, that can also be different on other screens of the app.

你知道我如何实现这种行为吗?

Do you have any Idea how I can achieve this behaviour?

问候

推荐答案

我拿了 这个教程并做了一些更改和补充:

I took this tutorial and made some changes and additions:

• 它现在适用于所有 tableview - 即使它们是更大屏幕的一部分.
• 无论背景或表视图背后的任何内容如何，​​它都可以工作.
• 遮罩的变化取决于表格视图的位置——滚动到顶部时只有底部褪色，滚动到底部时只有顶部褪色...

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

无需在课堂上参考CAGradientLayer.

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

@interface mViewController : UIViewController
.
.
@end

2. 将此添加到 viewWillAppear viewDidLayoutSubviews:(见@Darren 对此的评论)

2. Add this to viewWillAppear viewDidLayoutSubviews: (See @Darren's comment on this one)

- (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. 确保您是 UIScrollViewDelegate 的委托，将其添加到控制器的 .h 中:

3. Make sure you are a delegate of UIScrollViewDelegate by adding it in the .h of your controller:

@interface mViewController : UIViewController <UIScrollViewDelegate>

4. 最后，在你的控制器 .m 中实现 scrollViewDidScroll:

4. To finish, implement scrollViewDidScroll in your controller .m:

#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 教程.

这篇关于淡出 UITableView 的边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！