uitableviewdatasource uitableviewcell tutorial efecto customize create apple iphone objective-c ios ipad uitableview

iphone - uitableviewcell - ¿Cómo(o cómo) haría Apple esta animación?



uitableview tutorial (5)

¿Has intentado insertar dos filas a la vez? El que está en la parte superior con altura cero, y el siguiente con esquinas redondeadas (para eso puede usar el núcleo de cuarzo)

Lo que estoy tratando de hacer:

Las celdas inferiores (y superiores) de un UITableView de "estilo agrupado" tienen esquinas redondeadas, como es el valor predeterminado en muchas aplicaciones Apple iOS y no Apple. A veces las celdas se insertan a través de una animación, es decir:

[tableView insertRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationTop];

Ahora esto funciona bien. Excepto: cuando se inserta una celda debajo de la celda inferior, o arriba de la celda superior (para una tabla de estilo agrupada), no parece haber una animación suave.


El problema:

Lo que quiero decir es que las esquinas de las celdas superior / inferior deben animarse de redondeadas a no redondeadas (ya que ya no están arriba / abajo), y esto sucede de una manera muy desigual ya diferencia de Apple.

¿Alguna vez Apple hace esto en una aplicación? Si es así, ¿cómo lo hacen sin problemas? De lo contrario, ¿cómo podría hacerse esto bien?

NB: ¡Sé que este es un detalle bastante pequeño, pero soy un poco perfeccionista ...!


Como no hay una respuesta real (código completo) actualmente, aquí hay una lista de las mejores soluciones.

  1. Cambia tu interfaz para que esta animación desigual nunca suceda. Esto podría significar usar un tableView de estilo simple en lugar de un estilo agrupado, o usar el estilo alternativo que se ve en la aplicación Weather (vea la respuesta de Chris Wagner. ¡Gracias Chris!). Incluso podría significar el uso de una interfaz completamente diferente que no incorpora esta animación. Esta fue la solución a la que me dirigí; logré elaborar una alteración de UX que posiblemente sea incluso mejor que la original.

  2. Tratar con él. Apple parece, en algunas de las partes menos utilizadas del sistema operativo o sus aplicaciones.

  3. Archivo de un informe de error en bugreport.apple.com. Sería bueno si Apple solucionara esto ... Sé que es un detalle bastante pequeño, pero es por eso que me gustan los productos de Apple, ¡porque tienen los pequeños detalles correctos!

  4. Crear una subclase UITableViewCell personalizada. He pensado un poco sobre esto, y aunque es un reto de programación, creo que es factible. He aquí cómo: EDITAR: Vea la respuesta de Rab para más detalles. Todavía no lo he codificado todavía, pero puede intentarlo cuando tenga tiempo.

    • La celda personalizada tiene una propiedad que define si la celda es una celda superior, media o inferior. Esto se puede establecer mediante un UITableViewController (o subclase, etc.).

    • La propiedad backgroundView de las celdas personalizadas se puede dibujar de forma personalizada utilizando cuarzo para las esquinas redondeadas, etc.

    • Cuando se modifica la propiedad que define la posición de la celda, se puede animar el cambio a backgroundView. La parte difícil aquí es animar la curva de las esquinas ... ¿es esto factible? Apple parece hacerlo en los rincones del centro de notificaciones, cuando está
      tirado hacia abajo y empujado hacia arriba - por lo que parece que es posible.

    • Si alguien realmente quiere hacer esto y pone el código en gitHub ... ¡sería genial! Y habrías mejorado la interfaz de usuario de Apple;)


Eche un vistazo a la aplicación Weather que viene con iOS, en la vista de la otra cara donde configura sus ciudades, verá una tabla que acomoda estas animaciones. Como señala Mark Adams, en iOS5 hay una enumeración para que el sistema operativo detecte automáticamente qué animación debe usarse. Si desea apuntar a pre-iOS5, entonces en su método de delegación que realiza la eliminación, debe determinar qué celda se eliminará según su posición de fila, si su 0 usaría UITableViewRowAnimationBottom si es la última fila que usaría UITableViewRowAnimationTop y si es un lugar en el medio donde probablemente utilizarías UITableViewRowAnimationTop para que el grupo se UITableViewRowAnimationTop hacia arriba con la animación, aunque quizás quieras jugar con esto.


Lo siento, no tengo tiempo para escribir el código real y probarlo, pero tal vez pueda darle una pista. Básicamente, estás pidiendo que establezcas el radio de la esquina en solo dos esquinas de una celda, luego las animas con fluidez a las esquinas afiladas a medida que avanzan hacia el centro de la mesa.

Una forma de hacerlo podría ser definir su UITableViewCell personalizado con un CAShapeLayer como fondo. CAShapeLayer se extrae de las rutas de Quartz: consulte http://developer.apple.com/library/IOS/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_paths/dq_paths.html#//apple_ref/doc/uid/TP30001066-CH211 . La ruta de CAShapeLayer es animable, pero no con animación implícita. Deberá usar CAPropertyAnimation o realizar su propia interpolación. En mi experiencia, por ejemplo en http://itunes.apple.com/us/app/blaster-through-asteroid-field/id414827482?mt=8 , hacer su propia interpolación es más rápido y más confiable (pero que no sea la interpolación y detección de colisiones: todo lo que la mayoría del juego depende de Quartzcore, así que no creo que tengas un problema de rendimiento.

RESUMEN: La celda personalizada tiene respaldo CAShapeLayer. CAShapeLayer tiene camino con 2 esquinas redondeadas. Usted anima la propiedad del camino a medida que la posición de la celda se mueve hacia un cierto punto en la pantalla. Hecho, suavemente animado de esquinas redondeadas a cuadradas. Déjame saber si lo intentas :-)

Otras referencias: http://developer.apple.com/library/IOS/#documentation/GraphicsImaging/Reference/CAShapeLayer_class/Reference/Reference.html#//apple_ref/doc/uid/TP40008314

http://developer.apple.com/library/IOS/#documentation/GraphicsImaging/Reference/CGPath/Reference/reference.html


Si verifica la sección de Etiquetas de la parte ''Enviar a Youtube'' de la aplicación Fotos, verá que las animaciones de las manzanas son tan ''desiguales'' como el resto de las nuestras. (Obviamente necesitas un video para subir a youtube)

Asumiré que eso es lo que estabas pensando ...