使用渐变背景设置UITableViewCells样式

时间:2009-04-16 19:13:22

标签: iphone cocoa-touch user-interface

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

有没有人有任何关于如何让你的UITableViewCell发挥出来的好例子?

出于性能原因,最好使用图像或使用Quartz绘图?如果是Quartz,我很乐意看到人们如何将渐变绘制到单元格中的示例代码。

感谢。

7 个答案:

答案 0 :(得分:62)

我为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自动水平拉伸以适应细胞的宽度。

答案 1 :(得分:31)

答案 2 :(得分:2)

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

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

UITableViewCell支持其背景和所选背景的单独视图,因此使用这些属性是有意义的。要做到这一点,你需要提出一个完整大小的图像(UIImageView不会拉伸它的图像),所以你也可以在台式机上制作一次,然后保存在手机上循环,必须花费来拉伸图像或动态制作图像。虽然如果您打算允许用户更改渐变颜色,您仍然必须动态创建它。

答案 5 :(得分:0)

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

话虽如此,为您的细胞添加渐变将非常容易。只需使用InterfaceBuilder将包含渐变的图像添加到单元格视图中即可完成。您不必担心Quartz,并且性能明智,您将获得类似的结果,因为CocoaTouch的组件已经过优化,可以执行简单的任务,如显示图像。

答案 6 :(得分:0)

如果您不想使用图片,

Mirko's answer是一个不错的选择。但是最好将渐变添加到backgroundView而不是UITableViewcell本身。这样,在选择单元格时,您不会丢失高光效果