使用渐变背景设计 UITableViewCells答案

【问题标题】：Styling UITableViewCells with gradient backgrounds使用渐变背景设计 UITableViewCells
【发布时间】：2010-10-19 22:43:54
【问题描述】：

我一直在寻找提高 iPhone 应用程序整体吸引力的方法。大部分功能发生在 UITableView 中。我想我可以从向 UITableViewCells 添加微妙的渐变开始，因为这似乎将应用程序的感觉提高了一个数量级。选择合适的字体/大小也有很大帮助。我对这个论坛的问题是，向 UITableViewCells 添加渐变的最佳策略是什么？你在使用 Core Graphics/Quartz 吗？您是否使用 1x1 像素图像并对其进行拉伸？我对 Tumblr iPhone 应用程序的以下屏幕截图很感兴趣：http://dl-client.getdropbox.com/u/57676/screenshots/tumblr.jpg

有没有人有什么好的例子来说明如何让你的 UITableViewCell 突出？

出于性能原因，使用图像还是使用 Quartz 绘图更好？如果是 Quartz，我很想看看人们如何将渐变绘制到单元格中的一些示例代码。

谢谢。

【问题讨论】：

Tumblr iPhone 应用看起来很糟糕——渐变和灰色边框带来的不必要的盒装外观。坚持标准的 UITableView 外观。 Apple 用于他们的应用程序的是看起来最专业的东西，而不是随机的新奇东西。
@foljs -- 虽然我同意 Tumblr 的渐变看起来不太好，但这是一个很好的问题，并且有一些渐变表格单元格看起来很好的示例（例如，如果您关闭聊天气泡查看 Tweetie） . Apple 在 App Store 应用中也使用自定义单元格背景（虽然不是渐变）。

标签： iphone cocoa-touch user-interface

【解决方案1】：

我在 Tumblr 工作，虽然我没有编写 iPhone 应用程序 (he did)，但我有源代码并且可以告诉你它是如何完成的。

在-tableView:cellForRowAtIndexPath:

cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"postCellBackground.png"]];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"postCellBackgroundSelected.png"]];

非常简单，真的：UIImageView 中的 PNG 图像作为单元格的背景视图。

这两个图像是 1x61 的垂直渐变，UIKit 会自动水平拉伸以适应单元格的宽度。

【讨论】：

这是为每个单元格创建一个新的 Image 实例。它有效，但内存效率不高。有没有办法只有一个参考图像视图并将其分配给每个背景视图作为指向该图像的参考？
如果我错了，请纠正我，但是，UIImage 我认为它有自己的内部缓存，每次有人请求它获取图像时它都不必创建新的图像实例？
不要忘记这一行：[[cell textLabel] setBackgroundColor:[UIColor clearColor]];

【解决方案2】：

从 iPhone SDK 3.0 开始，有一个 much simpler solution that relies on the new CAGradientLayer and doesn't require subclassing or images。

【讨论】：

【解决方案3】：

Marco 的回答非常适用于普通表格视图单元格和位于表格视图中间的分组表格视图单元格，但如果您尝试为分组表格中的第一个/最后一个单元格设置背景视图，那么它将打破圆角。要修复它，您可以将单元格背景颜色设置为 UIColor colorWithPatternImage，例如：

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

【讨论】：

【解决方案4】：

我会为此使用 Quartz 2D，但在 Photoshop 中设置图像也是完全有效的。

至于性能，如果您按类型重复使用单元格，我认为这不是问题 - 但如果您确实发现它是一个瓶颈，您可以绘制一次位图上下文，从中获取图像并在任何地方使用它 - 一种混合解决方案。

【讨论】：

Marco 的回答似乎表明 UIImageView 实际上确实拉伸了它的图像，可能是因为它的框架/边界是由单元格布局明确设置的？
是的，正如我所说，这是完全有效的。只是，如果您了解 Quartz 2D，就很容易做到这一点，这将是我个人的第一门课程
我只是注意到我上面的评论没有任何意义——我想我是想评论 HitScan 的答案而不是你的。很抱歉造成混乱！

【解决方案5】：

UITableViewCell 支持其背景和选定背景的单独视图，因此使用这些属性是有意义的。为此，您将需要提供一个与您的单元格一样大小的图像（UIImageView 不会拉伸它的图像），因此您最好在台式机上制作一次，然后保存手机上的循环将不得不用于拉伸图像或动态制作。虽然如果您打算允许用户更改渐变颜色，则无论如何您都必须动态创建一次。

【讨论】：

【解决方案6】：

我认为，到目前为止，使用自定义单元格处理 UITableView 的最简单方法是使用 Interface Builder。它使 UI 设计工作比纯核心更容易。 Here is 一个很棒的教程（带有视频！）关于如何做到这一点。强烈推荐。自从我遵循之后，我没有使用任何其他 UITableView 编码方法。

话虽如此，向您的单元格添加渐变将非常容易。只需使用 InterfaceBuilder 将包含渐变的图像添加到单元格视图即可。您不必担心 Quartz，而且在性能方面您会得到类似的结果，因为 CocoaTouch 的组件经过了很好的优化，可以执行简单的任务，例如显示图像。

【讨论】：

【解决方案7】：

如果您不想使用图像，Mirko's answer 是一个不错的选择。但是，最好将渐变添加到 backgroundView 而不是 UITableViewcell 本身。这样选择单元格时不会丢失高亮效果

【讨论】：