顶部和底部具有透明渐变的UITableView [英] UITableView with Transparent Gradient at Top and Bottom

问题描述

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

基本上，我有一个 UIView 其中包含 UITableView 。我按照教程进行了部分成功。问题是梯度。我在 UITableView 后面有一个背景图片。因此当单元格接近渐变时，我想要显示背景而不是白色。

我还发现这个发布这是我找到教程的地方，但我不想用我自己的问题劫持那篇文章对于亚光。

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

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

EDIT2：这是一个什么的图像我现在得到：

<这是我的代码：

>标题：

  @interface MyView：UIViewController {
 CAGradientLayer * _maskLayer; 
 UITableView * _tableView; 
} 
 
 @property（非原子，保留）CAGradientLayer * maskLayer; 
 @property（非原子，保留）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]]; 
} 
}  

解决方案

你可以这样做 CALayer 掩码属性。但是您无法在表视图的自己的图层上设置蒙版，因为该蒙版将与表的行一起滚动。相反，将您的表视图放在为此创建的新的超级视图（类 UIView ）中。称之为 tableMaskView 。

新的superview应该有 backgroundColor 属性设置为 UIColor.clearColor 及其 opaque 属性设置为否。然后你可以像这样设置它的掩码：

  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; 
  

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

I have searched this forum, Google and other forums and have not found an the answer to my particular issue.

Basically, I have a UIView which contains UITableView. I followed this tutorial and it was partially successful. The problem is the gradient. I have a background image behind the UITableView. So as the cell nears the gradient, I want the background to be showing, instead of the white.

I also found this post which which is where I found the tutorial, but I didn't want to hijack that post with my own questions for matt.

Any help in the right direction would be great!

EDIT1: I know I can use another image with the background image and the middle cut out, but I'm looking for a solution which AVOIDS using PNGs, if possible.

EDIT2: Here's an image of what I get now:

EDIT3:

Here is my code:

Header:

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

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

Implementation:

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

解决方案

You can do this with the CALayer mask property. But you can't set the mask on the table view's own layer because that mask will scroll with the rows of the table. Instead, put your table view inside a new superview (of class UIView) that you create just for this. Call it tableMaskView.

The new superview should have its backgroundColor property set to UIColor.clearColor and its opaque property set to NO. Then you can set its mask like this:

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;

Using a layer mask is not the most efficient way, but it's the easiest to program. Test whether it's fast enough.

这篇关于顶部和底部具有透明渐变的UITableView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！