問題描述

我對(duì)我的問題進(jìn)行了一些研究，不幸的是，我的問題沒有解決方案.最接近的是 在 UIImageView 接近邊緣時(shí)淡出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.

我希望我的表格在頂部應(yīng)用隱形漸變".如果單元格距離上邊緣 50 像素，它就會(huì)開始消失.越靠近上邊緣，零件越不可見.單元格高度約為 200 像素，因此單元格的下部需要 100% 可見.但沒關(guān)系 - 我需要一個(gè)表格視圖(或表格視圖容器)來執(zhí)行此任務(wù)，因?yàn)轭愃频谋砀窨梢燥@示其他單元格.

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.

如果表格是純色視圖的子視圖，我可以通過添加一個(gè)水平漸變的圖像來實(shí)現(xiàn)，我可以拉伸到任何寬度.該圖像的頂部像素以背景的確切顏色開始，向下相同顏色具有較少的 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.

但是……我們有一個(gè) 透明顏色 的 UITableView.表格下方?jīng)]有純色，而是圖案圖像/紋理，在應(yīng)用的其他屏幕上也可能不同.

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.

你有什么想法我可以實(shí)現(xiàn)這種行為嗎?

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

問候

推薦答案

我拿了本教程并進(jìn)行了一些更改和補(bǔ)充:

I took this tutorial and made some changes and additions:

• 它現(xiàn)在適用于所有表格視圖 - 即使它們是更大屏幕的一部分.
• 無論背景或 tableview 后面的任何內(nèi)容如何，??它都能正常工作.
• 掩碼的變化取決于表格視圖的位置 - 滾動(dòng)到頂部時(shí)只有底部褪色，滾動(dòng)到底部時(shí)只有頂部褪色...

1.首先導(dǎo)入 QuartzCore 并在控制器中設(shè)置遮罩層:

不需要在類中引用CAGradientLayer.

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

@interface mViewController : UIViewController
.
.
@end

2. 將此添加到 viewWillAppear viewDidLayoutSubviews:(查看@Darren 對(duì)此的評(píng)論)

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 中實(shí)現(xiàn) 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 椰子化學(xué)教程.

這篇關(guān)于UITableView 的淡入淡出邊緣的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！