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];
}

再次重申:大部分解决方案来自 this 椰子化学教程.

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