Estilo de UITableViewCells con fondos de degradado

Question

He estado buscando formas de mejorar el atractivo general de las aplicaciones de mi iPhone. La mayoría de la funcionalidad ocurre en UITableView. Creo que puedo comenzar agregando degradados sutiles a UITableViewCells, ya que parece mejorar la sensación de la aplicación en un orden de magnitud. Seleccionar las fuentes/tamaños apropiados ayuda mucho también. Mi pregunta para este foro es, ¿cuál es la mejor estrategia para agregar degradados a UITableViewCells? ¿Estás utilizando Core Graphics/Quartz? ¿Estás usando una imagen de 1x1 píxeles y estirándola? Estoy interesado en algo parecido a la siguiente captura de pantalla de la aplicación Tumblr para iPhone: http://dl-client.getdropbox.com/u/57676/screenshots/tumblr.jpg

¿Alguien tiene algún buen ejemplo de cómo hacer que su UITableViewCell sobresalga?

Y por motivos de rendimiento, ¿es mejor usar una imagen o dibujar con Quartz? Si fuera por Quartz, me encantaría ver algunos códigos de muestra de cómo la gente está dibujando los degradados en las celdas.

Gracias.

Answer 1

Trabajo para Tumblr, y aunque no escribí la aplicación para iPhone (he did), tengo la fuente y puedo decirle cómo se hace.

En -tableView:cellForRowAtIndexPath:

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

muy simple, realmente: las imágenes PNG en un UIImageView como vistas de fondo de la celda.

Las dos imágenes son 1x61 gradientes verticales que UIKit extiende automáticamente en horizontal para ajustarse al ancho de la celda.

Answer 2

Yo usaría Quartz 2D para esto, pero la configuración de imágenes en Photoshop es perfectamente válida también.

En cuanto al rendimiento, si está reutilizando celdas por tipo, no creo que sea un problema, pero si lo encuentra un cuello de botella, puede dibujar en un contexto de mapa de bits una vez, obtener una imagen de eso y lo usa en todas partes, una especie de solución híbrida.

Answer 3

UITableViewCell admite vistas separadas para su fondo y fondo seleccionado, por lo que tiene sentido utilizar estas propiedades. Para hacer eso, necesitarás crear una imagen que tenga el tamaño completo de tu celda de todos modos (UIImageView no estirará su imagen), así que también puedes hacerlo en una máquina de escritorio una vez, y guardar el ciclos en el teléfono que tendrían que gastarse para estirar una imagen o hacerla dinámicamente. Sin embargo, si tiene la intención de permitir que el usuario cambie los colores del degradado, tendrá que crearlo una vez dinámicamente de todos modos.

Answer 4

Creo que la manera más fácil, por el momento, de manejar UITableView con una celda personalizada es usar el Interface Builder. Hace el trabajo de diseño de la interfaz de usuario mucho más fácil que hacerlo por núcleo puro. Here is un gran tutorial (con un video!) Sobre cómo hacerlo. Muy recomendable. No estoy utilizando ningún otro método de codificación UITableView ya que seguí eso.

Habiendo dicho eso, agregar un degradado a su celda será extremadamente fácil. Simplemente use InterfaceBuilder para agregar una imagen que contenga su gradiente a la vista de celda y listo. No tendrá que preocuparse por Quartz, y desde el punto de vista del rendimiento obtendrá resultados similares, ya que los componentes de CocoaTouch están muy bien optimizados para realizar tareas sencillas, como mostrar una imagen.

Answer 5

A partir del iPhone SDK 3.0, hay un much simpler solution that relies on the new CAGradientLayer and doesn't require subclassing or images.

Answer 6

Mirko's answer es una buena alternativa si no desea utilizar una imagen.Sin embargo, es mejor agregar el gradiente al backgroundView en lugar de la UITableViewcell. De esta manera no perderá los efectos de resaltado al seleccionar la celda

Answer 7

La respuesta de Marco funciona muy bien para celdas de vista de tabla simple y celdas de vista de tabla agrupadas que se encuentran en el medio de la vista de tabla, pero si intenta establecer una vista de fondo para la primera/última celda en una tabla agrupada luego romperá las esquinas redondeadas. Para solucionarlo se puede establecer el color de fondo de la celda a un UIColor colorWithPatternImage, por ejemplo:

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