将背景渐变应用到 Grouple 表格单元格答案

【问题标题】：Applying background gradient to a Grouple table cell将背景渐变应用到 Grouple 表格单元格
【发布时间】：2009-12-30 09:00:50
【问题描述】：

我正在使用以下代码为 UITableViewCell 创建渐变背景。虽然这对于普通表格单元格非常有效，但渐变只出现在分组表格单元格的左右角。就好像应用了渐变一样，单元格被绘制在它上面。

有人可以建议对代码进行修改，以使其适用于分组表格单元格吗？或者有完全不同的方法吗？

- (void)drawRect:(CGRect)rect {
CGContextRef c = UIGraphicsGetCurrentContext();

CGGradientRef myGradient;
CGColorSpaceRef myColorspace;

size_t num_locations = 2;
CGFloat locations[2] = {0.0, 1.0};
CGFloat components[8] = {0.8f, 0.8f, 0.8f, 1.0f, // Bottom Colour: Red, Green, Blue, Alpha.
    0.9f, 0.9f, 0.9f, 1.0}; // Top Colour: Red, Green, Blue, Alpha.

myColorspace = CGColorSpaceCreateDeviceRGB();
myGradient = CGGradientCreateWithColorComponents (myColorspace, components,
                                                  locations, num_locations);

CGColorSpaceRelease(myColorspace);

CGPoint startPoint, endPoint;
startPoint.x = 0.0;
startPoint.y = self.frame.size.height;
endPoint.x = 0.0;
endPoint.y = 0.0;
CGContextDrawLinearGradient (c, myGradient, startPoint, endPoint, 0);

const CGFloat topSepColor[] = { 0.8f, 0.8f, 0.8f, 1.0f }; // Cell Seperator Colour - Top

CGGradientRelease(myGradient);

CGContextSetStrokeColor(c, topSepColor);

CGContextMoveToPoint(c, 0.0, 0.0);
CGContextSetLineWidth(c, 1.0);
CGContextSetLineCap(c, kCGLineCapRound);
CGContextAddLineToPoint(c, self.frame.size.width, 0.0);
CGContextStrokePath(c);

const CGFloat bottomSepColor[] = { 0.5f, 0.5f, 0.5f, 1.0f }; // Cell Seperator Colour - Bottom
CGContextSetStrokeColor(c, bottomSepColor);

CGContextMoveToPoint(c, 0.0, self.frame.size.height);
CGContextSetLineWidth(c, 1.0);
CGContextSetLineCap(c, kCGLineCapRound);
CGContextAddLineToPoint(c, self.frame.size.width, self.frame.size.height);
CGContextStrokePath(c);

[[UIColor blackColor] set];
}

感谢您的帮助。

【问题讨论】：

也许这个link可以帮助你，找到路。

标签： iphone objective-c uitableview

【解决方案1】：

我不明白为什么人们会尝试编写过于复杂的绘图例程来渲染自定义UITableViewCell。将单元格的 backgroundView 和 selectedBackgroundView 属性的值设置为标准的 UIImageView，并在图像中包含所有边框、斜角、渐变、圆角以及您喜欢的任何其他内容。

对于圆桌视图，您将创建 4 个图像；一个用于顶部单元格，另一个用于底部单元格，一个用于中间单元格，如果您的表格只有一行，则另一个用于单个单元格。

Matt Gallagher 在 Cocoa with Love 上写了一篇很好的文章，标题为 Easy custom UITableView drawing。

【讨论】：

为什么不呢，如果有人喜欢用 Quartz 画画，那也没什么问题。
我从来没有说过使用 Quartz 有什么问题，我说它在这种情况下过于复杂。复制 Apple 的圆角单元格并添加渐变对于不熟悉 Quartz 的开发人员来说并非易事，这就是为什么图像是一种更简单、更实用的解决方案。
效果很好！我想补充一点，您建议的文章为 iPhone 开发添加了一个全新的维度。非常感谢！
@Prasanna 让事情变得更简单，对吧？意味着您的界面仅限于您的设计技能，而不是您的设计和石英技能的结合:-)。更换界面组件也容易得多。

【解决方案2】：

为单元格背景使用自定义视图可让您完全自定义单元格的外观，但在更改屏幕方向时可能无法很好地缩放。此外，如果您只需要在普通单元格和分组样式单元格中都可以使用的渐变背景，那么您最好使用这个...

我有另一个解决方案，它的代码少得多，只需要一个渐变图像。 group cell 样式的圆角仍然是由框架绘制的，所以我们不需要担心提供一个自定义的图像为顶部、中间和底部的单元格样式来满足圆角的使用。看起来是这样的：

渐变图像只有一个像素宽，与单元格一样高（在本例中为 44 像素）。

cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"cellBackground_1x44.png"]];

代码使用 UIColor 上的 colorWithPatternImage 方法，自 iOS 2.0 起可用。此代码应在tableView:cellForRowAtIndexPath: 中调用。重新使用单元格时无需重复调用，仅在最初创建单元格时重复调用。

要使用我正在使用的灰色渐变，我发现设置所选单元格的选择颜色以匹配：

cell.selectionStyle = UITableViewCellSelectionStyleGray;

您可能还想更改单元格边框的颜色，使用类似：

[self.tableView setSeparatorColor:[UIColor darkGrayColor]];

嗯，就是这样。我希望人们觉得这很有用。我昨天在网上搜索了几个小时，只找到了包含生成渐变和圆角的自定义绘图代码的参考资料，或者我找到了指向 Matt Coneybeare 的“如何在具有核心图形的分组 UITABLEVIEW 中制作自定义绘制的渐变背景”博客的链接邮政。一切正常，但如果您只想要简单的东西，我相信就是这样。

【讨论】：

【解决方案3】：

你可以试试

for(UIView* v in [cell subviews]){
   [v setBackgroundColor:[UIColor clearColor]];
}

但这只是一个建议。

【讨论】：