如何设置渐变 UITableViewCell 背景？答案

【问题标题】：How to set a gradient UITableViewCell background?如何设置渐变 UITableViewCell 背景？
【发布时间】：2010-07-18 17:26:15
【问题描述】：

我想创建一个渐变 UITableViewCell 背景，就像 iPhone 上的默认时钟应用程序一样。我不完全确定如何做到这一点。我是否创建图像并设置它：

cell.contentView.backgroundColor = [UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"background.png"]];

或者还有其他/更好的方法吗？

【问题讨论】：

如果我的身高不一样怎么办？如何创建背景图形？

标签： iphone objective-c cocoa-touch uitableview

【解决方案1】：

我找到了这个问题的现有答案，但并不满意。这是一种替代方法，它需要更少的代码，不需要覆盖任何方法，并且可以应用于任何视图。想法是将CAGradientLayer 作为子层添加到UIView 的层。我在任何地方都找不到这种方法的文档，所以我想分享一下。

将CAGradientLayer 添加到任何UIView，如下所示：

UIView 标头上的类别 - UIView+Gradient.h：

#import <UIKit/UIKit.h>

@interface UIView (Gradient)
-(void) addLinearUniformGradient:(NSArray *)stopColors;
@end

分类UIView实现UIView+Gradient.m：

#import "UIView+Gradient.h"
#import <QuartzCore/QuartzCore.h>

@implementation UIView (Gradient)

-(void) addLinearUniformGradient:(NSArray *)stopColors
{
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = self.bounds;
    gradient.colors = stopColors;
    gradient.startPoint = CGPointMake(0.5f, 0.0f);
    gradient.endPoint = CGPointMake(0.5f, 1.0f);    
    [self.layer addSublayer:gradient];
}

@end

创建UITableViewCell后如何在UITableViewCell的backgroundView上设置渐变：

// Set the gradient for the cell's background
CGRect backgroundViewFrame = cell.contentView.frame;
backgroundViewFrame.size.height = yourCellHeight;
cell.backgroundView = [[UIView alloc] initWithFrame:backgroundViewFrame];
[cell.backgroundView addLinearUniformGradient:[NSArray arrayWithObjects:
                                               (id)[[UIColor redColor] CGColor],
                                               (id)[[UIColor greenColor] CGColor], nil]];

此示例仅展示了如何设置简单的两级渐变（具有均匀间距）。快速查看CAGradientLayer 文档将向您展示如何设置更复杂的渐变。

(* 编辑其他重要信息 *)

要记住的另一件事是，如果您在 tableView:cellForRowAtIndexPath 之类的方法中添加渐变层，则 UITableViewCell 通常会被重用（即 [tableView dequeueReusableCellWithIdentifier:@"foo"]）。因为单元格被重复使用，如果每次单元格出列时总是向表格视图单元格添加渐变层，则最终可能会在单元格的生命周期内向表格视图单元格添加多个渐变层。这可能会导致性能下降。此问题可能在可见结果没有任何变化的情况下发生，因此可能难以检测/观察。有几种方法可以解决这个问题，但您可以考虑做的一件事是修改上面的原始代码，除了添加 CAGradientLayer，将创建的 CAGradientLayer 返回给调用者。然后编写另一个类别方法相当简单，如果渐变层实际上包含在视图中，则可以将其移除：

-(BOOL) removeGradient:(CAGradientLayer *)gradientLayer
{
    // Search for gradient layer and remove it
    NSArray *layers = [self.layer sublayers];
    for ( id layer in layers ) {
        if ( layer == gradientLayer ) {
            [gradientLayer removeFromSuperlayer];
            return YES;
        }
    }

    // Failed to find the gradient layer in this view
    return NO;
}

并非所有用例都需要移除渐变，但如果您的用例导致单元重复使用，您可能需要考虑移除渐变。考虑调用此方法的一个地方是 UITableViewCell 的 prepareForReuse 方法。

很抱歉，我最初的解决方案没有解决这个问题。但由于它可能非常微妙，我想用这些附加信息更新我的答案。

【讨论】：

我尝试将其应用于分组单元格，但渐变填充是一个没有圆角的框。我错过了什么吗？
嗯，您可能需要设置图层半径/蒙版。阅读有关以下两种方法的文档： [self.layer setCornerRadius: 10.0]; [self.layer setMasksToBounds:YES];希望这能让你指出正确的方向。

【解决方案2】：

见this tutorial/code by Matt Coneybeare

【讨论】：