顶部和底部具有透明渐变的 UITableView

Question

我搜索了这个论坛、谷歌和其他论坛，但没有找到我特定问题的答案。

基本上，我有一个UIView，其中包含UITableView。我关注了这个tutorial，它部分成功了。问题是梯度。我在UITableView 后面有一个背景图片。因此，当单元格接近渐变时，我希望显示背景，而不是白色。

我还找到了这个post，这是我找到教程的地方，但我不想用我自己的问题来劫持那个帖子。

对正确方向的任何帮助都会很棒！

EDIT1：我知道我可以使用另一张带有背景图像和中间切出的图像，但我正在寻找一种避免使用 PNG 的解决方案，如果可能的话。

EDIT2：这是我现在得到的图像：

EDIT3：

这是我的代码：

标题：

@interface MyView : UIViewController  {
    CAGradientLayer *_maskLayer;
    UITableView *_tableView;
}

@property (nonatomic, retain) CAGradientLayer *maskLayer;
@property (nonatomic, retain) IBOutlet UITableView *tableView;

实施：

@implementation HighScoresView_iPhone

@synthesize tableView = _tableView;
@synthesize maskLayer = _maskLayer;

- (void)viewWillAppear:(BOOL)animated {

    [super viewWillAppear:animated];

    if (![self maskLayer]) {
        [self setMaskLayer:[CAGradientLayer layer]];
        CGColorRef outerColor = [UIColor colorWithWhite:1.0 alpha:1.0].CGColor;
        CGColorRef innerColor = [UIColor colorWithWhite:1.0 alpha:0.0].CGColor;

        [[self maskLayer] setColors:[NSArray arrayWithObjects:
                                     (id)outerColor, 
                                     (id)innerColor, 
                                     (id)innerColor, 
                                     (id)outerColor, 
                                     nil
                                     ]
         ];
        [[self maskLayer] setLocations:[NSArray arrayWithObjects:
                                       [NSNumber numberWithFloat:0.0], 
                                       [NSNumber numberWithFloat:0.2], 
                                       [NSNumber numberWithFloat:0.8], 
                                       [NSNumber numberWithFloat:1.0], 
                                       nil
                                       ]
        ];
        [[self maskLayer] setBounds:CGRectMake(0, 0, [[self scoreTableView] frame].size.width, [[self scoreTableView] frame].size.height)];
        [[self maskLayer] setAnchorPoint:CGPointZero];
        [[[self scoreTableView] layer] addSublayer:[self maskLayer]];
    }
}

Answer 1

Swift 3 版本的rob mayoff 的answer：

let gradient = CAGradientLayer()
gradient.frame = tableMaskView.bounds
gradient.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, 
                   UIColor.white.cgColor, UIColor.clear.cgColor]
gradient.locations = [0 as NSNumber, 1.0/16.0 as NSNumber, 
                      15.0/16.0 as NSNumber, 1 as NSNumber]
tableMaskView.layer.mask = gradient

Answer 2

替换这一行：

[[[self scoreTableView] layer] addSublayer:[self maskLayer]];

有了这个：

self.scoreTableView.layer.mask = self.maskLayer;

（或者如果你坚持你的语法样式，甚至认为我不明白为什么）：

[[[self scoreTableView] layer] setMask:[self maskLayer]];

另外this的回答可能会对你有所帮助。

Answer 3

您可以使用 CALayer mask 属性执行此操作。但是您不能在表格视图自己的图层上设置蒙版，因为该蒙版会随着表格的行滚动。相反，将您的表格视图放在您为此创建的新超级视图（UIView 类）中。叫它tableMaskView。

新的超级视图应该将其backgroundColor 属性设置为UIColor.clearColor，并将其opaque 属性设置为NO。然后你可以像这样设置它的掩码：

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.tableMaskView.bounds;
gradient.colors = [NSArray arrayWithObjects:
    (__bridge id)UIColor.clearColor.CGColor,
    UIColor.whiteColor.CGColor,
    UIColor.whiteColor.CGColor,
    UIColor.clearColor.CGColor,
    nil];
gradient.locations = [NSArray arrayWithObjects:
    [NSNumber numberWithFloat:0],
    [NSNumber numberWithFloat:1.0/16],
    [NSNumber numberWithFloat:15.0/16],
    [NSNumber numberWithFloat:1],
    nil];
self.tableMaskView.layer.mask = gradient;

使用图层蒙版不是最有效的方法，但它是最容易编程的方法。测试它是否足够快。

Answer 4

听起来您的表格视图的背景颜色设置为白色。尝试将表格视图的背景设置为透明：

tableView.backgroundColor = [ UIColor clearColor ] ;
tableView.opaque = NO ;