Explicación detallada de la pantalla del esqueleto del cliente
No necesitamos decir más sobre la imagen de crisantemo. Ahora hay un método de diseño de experiencia de carga que es mejor que la experiencia de carga de imágenes de crisantemo, que es la carga de pantalla hueca que vemos a menudo. El nombre chino es pantalla hueca.
La llamada carga de pantalla hueca significa que antes de que la página se represente por completo, el usuario verá un estilo de marcador de posición para representar el marco general de la página actual. Una vez completada la carga, aparecerá la pantalla hueca final. se completará con la parte del marcador de posición reemplazada por datos reales. Muchos proyectos tienen aplicaciones relacionadas, como la versión h5 de Ele.me, Know, Facebook y otros sitios web. El efecto se muestra a continuación:
Hay muchas bibliotecas de terceros en iOS que pueden lograr efectos de esqueleto. Por supuesto, también puedes crear uno tú mismo. El núcleo de la pantalla de esqueleto son los marcadores de posición y las animaciones de atributos. . En términos de implementación, este artículo presentará varios métodos de implementación principales:
Principio de implementación
Amplíe UIView y agregue atributos como esqueleto y esqueleto. Llame al método showSkeleton, recorra las vistas con el atributo Skeletonable como verdadero, busque la subvista superior con Skeletonable como verdadero y luego cree una SkeletonLayer y agréguela para formar una vista de esqueleto, y el efecto de animación también está en la capa SkeletonLayer. .
En pocas palabras, al mostrar un marcador de posición, configuraría el delegado de tableView para que pase un objeto que crearía una celda basada en el identificador de la celda y agregaría el marcador de posición al centro de la pantalla. Cuando desactive la visualización del marcador de posición, cambie el tableView delegado nuevamente al ViewController y muéstrelo normalmente.
Características
1. No es necesario escribir controles de marcador de posición manualmente y no es necesario lidiar con problemas como esquinas redondeadas. El efecto de marcador de posición es consistente con el diseño real. del mando.
2. La desventaja es que algunos controles tienen un tamaño adaptable antes de obtener los datos, la posición del control es incorrecta, lo que provoca problemas con el efecto de marcador de posición.
También amplíe UIView y agregue el atributo somoContainer, que representa la vista contenedora de la vista de marcador de posición, donde cada área de marcador de posición es un SomoView. Para que una Vista muestre efectos de marcador de posición, debe implementar el protocolo y devolver una lista de SomoView en el método del protocolo. Agregue estos SomoViews a somoContainer y muéstrelos.
Características
1. Evite el problema de tamaño incorrecto mencionado anteriormente cuando no hay datos en el control adaptativo.
2. Debe especificar cada marcador de posición manualmente, y cada marcador de posición es una capa UIView, no una CALayer.
Además, TABAnimated también se usa ampliamente y TABAnimated también es una UIView extendida. Realice los siguientes pasos:
1. Instalación
2. Paso 2 (opcional)
Opcionalmente, puede hacerlo en el método didFinishLaunchingWithOptions de appDelegate Set las propiedades de la animación globalmente y utilice las propiedades predeterminadas. Por ejemplo:
3. Paso 3, establezca la propiedad AnimationStyle
En la vista que necesita animación, establezca la propiedad AnimationStyle en TABTableViewAnimationStart. Las vistas que no necesitan animación no la necesitan. realizar cualquier operación adicional.
Paso 5
Después de obtener los datos, detenga la animación.
Enlace fuente de muestra: ejemplo de pantalla esqueleto de iOS
En Android, la pantalla esqueleto también se implementa a través de muchos marcos de terceros, y las siguientes bibliotecas son comunes:
ShimmerRecyclerView es una biblioteca con efectos de brillo e indicador, funciona así:
Dirección de origen: // sharish/ShimmerRecyclerView
Skeleton también es una biblioteca ampliamente utilizada, ahora es Utiliza una versión de animación Flash optimizada para memoria, por lo que es más rápida y permite animar diseños más grandes.
Fuente del proyecto:/ethanhua/Skeleton
spruce-android
Spruce es una biblioteca de animación liviana que ayuda a coordinar animaciones en pantalla en iOS. Esta biblioteca también es compatible: /willowtreeapps/ spruce-android