Animación de visualización TextView en Android

Oye 👋

Como desarrollador y usuario, he visto muchas aplicaciones y, a veces, el texto aparece de repente en la pantalla. Pero para una experiencia mejorada, es muy importante agregar algunas acciones significativas a nuestra interfaz de usuario. Para el texto, puede desvanecerse, aparecer u otro contenido, según el contexto. En este blog, compartiré un truco genial que utilicé para agregar animación de visualización vertical a TextView en Android.

Por qué esta animaciónnorte ¿Me pides que escriba un blog completo?El proceso básico es simplemente configurar la visibilidad en vista oculta Gone, Cuando necesitemos mostrar, podemos establecer la altura en cero para que sea visible (no se mostrará cuando establezcamos la altura en cero) y establecer la altura desde cero hasta la altura final deseada. Sí … pero no, ¡déjame explicarte!

El problema es que para las vistas regulares, el desarrollador proporciona la altura. Pero en el caso de TextView, la altura se puede escalar a varios valores de acuerdo con el ancho del dispositivo y la configuración del usuario.

Dado este comportamiento, no sabemos la altura final que tomará TextView, y es importante saber esto antes de comenzar la animación.Alguien podría decir ahora que podemos usar View.height Atributo para obtener la altura, pero como la Vista desapareció al principio, esto devolverá cero 😯

Este es un lugar para algunos conocimientos avanzados. Medida aprobada Nos ayudará en la canalización de renderizado de vistas de Android.Podemos forzar un pase métrico llamando View.measure En nuestro TextView.Al ejecutar el canal de medición Si proporcionamos el ancho exactoSegún la densidad del dispositivo, Android podrá obtener la altura que podamos usar en el futuro. View.measuredWidth Propiedad (recuerde, View.height Todavía es cero, y la vista en realidad no está en la pantalla 💡).

Mencionaré un punto muy importante aquí. AudazNecesitamos proporcionar el ancho exacto, en nuestro ejemplo, es el ancho de la pantalla menos los márgenes en ambos lados del TextView que se va a animar. Si proporcionamos el ancho incorrecto, la altura medida por Android también será incorrecta. El código completo se puede encontrar en el último proyecto vinculado.

Ahora que hemos medido el TextView, simplemente podemos colocar un Animador de valor Y anime la altura de 0 a la altura que acabamos de medir. En el código de muestra, activo la animación cuando se presiona el botón, y una vez que lo presionamos, puede ver que la Vista se muestra correctamente.

Para ocultar el TextView, es muy simple, simplemente ejecute un ValueAnimator desde la altura actual a 0, y finalmente ocúltelo.

Notará que mostrar y ocultar solo son efectivos la primera vez, y luego la Vista nunca volverá a aparecer. ¿Cual podría ser el problema?

El resultado es que la pasada de medición puede darnos la altura porque la altura inicial se establece en wrap_content En xml. Ahora establecemos la altura en cero durante la animación de ocultar, y ahora esto es lo que retendrá la vista.

¿Estás preguntando por la solución?Solo vuelve a poner la altura wrap_content Antes de ejecutar el canal de medición.

Puede ver que TextView ahora se muestra perfectamente, que es exactamente lo que queremos lograr. esto es todo.Si tiene alguna pregunta, colóquela en la sección de comentarios a continuación, si desea experimentar por su cuenta, puede verificar Un proyecto de muestra para esta animación está aquí.. ¡Gracias por leer!

~ Ama a todos