human guidelines español developer apple iphone cocoa-touch design user-interface

iphone - guidelines - Estilo de UITableViewCells con fondos degradados



ios human interface guidelines español (7)

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 buenos ejemplos 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.



Creo que la forma más fácil, por el momento, de manejar UITableView con una celda personalizada es usar Interface Builder. Hace el trabajo de diseño de la interfaz de usuario mucho más fácil que hacerlo por núcleo puro. Aquí hay 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.


La respuesta de Marco funciona muy bien para celdas de vista de tabla simple y para 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 de una tabla agrupada, se romperá la esquinas redondeadas. Para solucionarlo, puede establecer el color de fondo de la celda en un UIColor colorWithPatternImage , por ejemplo:

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


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

In- -tableView:cellForRowAtIndexPath:

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

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

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


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.


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

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


La respuesta de Mirko es una buena alternativa si no quieres usar 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