Android Studio 4.0 representa una actualización bastante grande para el IDE y ofrece mucho para que los desarrolladores se atasquen. Quizás la nueva característica más emocionante es el “Editor de movimiento”. Esta característica está diseñada para ayudar a los desarrolladores a crear diseños animados más atractivos. Esto puede mejorar significativamente la interfaz de usuario de cualquier aplicación, ¡y ahora es mucho menos complicado!

Lea también: Una introducción a Jetpack Compose para diseños rápidos de interfaz de usuario de Android

Los basicos

Anteriormente, para animar un diseño, tenía que modificar XML manualmente. Este nuevo editor hace que el proceso sea mucho más fácil al generar ese código para usted y permitirle manejar el diseño real usando un editor visual. En teoría al menos!

Siendo Google, la implementación no es muy intuitiva

Esencialmente, creará diferentes versiones de sus diseños simplemente arrastrando y soltando elementos que haya definido en un diseño “base”. Luego creará transiciones que moverán esas versiones del primer arreglo al segundo, y así sucesivamente.

Lea también: ¡Todas las últimas novedades y características para desarrolladores de Android que debes conocer!

Esto ciertamente hace la vida más fácil y es una adición bienvenida. Pero como se trata de Google, la implementación no es bastante intuitiva y algunas funciones clave faltan actualmente. Con suerte, esta guía lo ayudará a comenzar y le dará sentido a la nueva herramienta.

Configuración

Para comenzar, primero debe asegurarse de tener Android Studio 4.0, que ahora está disponible en el canal estable. También debe asegurarse de estar utilizando la siguiente dependencia ConstraintLayout, ya que MotionLayout es parte de la beta de diseño de restricción.

implementación ‘com.android.support.constraint: restrict-layout: 2.0.0-beta1’

O:

com.android.support.constraint: restrict-layout: 2.0.0-beta1

A continuación, deberá configurar un nuevo archivo de recursos de diseño. Asegúrese de que el elemento raíz esté configurado en: androidx.constraintlayout.motion.widget.MotionLayout.

Lea también: Tutorial de Android Studio para principiantes

Una vez que esté construido, lo llevarán directamente al nuevo y brillante Editor de movimiento.

En este momento, verá un mensaje que le indica que no se puede usar el editor de movimiento y que tiene un error de sintaxis de MotionScene. ¡Gran comienzo!

Creando tu primer MotionScene

Primero, necesitamos crear una escena de movimiento.

El objeto MotionScene describe cómo se van a animar los elementos en MotionLayout. Para definir este objeto, necesitamos crear otro archivo XML en la carpeta XML. A continuación, se enumerarán los estados de diseño que se pueden usar y cómo moverse entre ellos.

En una nota al margen, algunos otros IDEs habrían hecho esto automáticamente cuando creó el nuevo MotionLayout. ¡Pero yo divago!

Afortunadamente, Android Studio hace que esto sea un poco más fácil para nosotros. Simplemente haga clic en la exclamación roja al lado de donde dice “MotionLayout” en el árbol de componentes, y se le pedirá que cree un nuevo archivo MotionScene. Haga clic en “Reparar” y lo generará en su nombre y lo colocará en el lugar correcto.

El archivo generado automáticamente recibirá el nombre de su archivo de diseño con “_scene.xml” pegado. Mi archivo de diseño se llama “motionlayoutexample” y mi escena se llama “motionlayoutexample_scene.xml”.

Su escena debe contener el siguiente XML:






Por el momento, el widget al que se refiere esto no existe, pero lo solucionaremos a continuación.

Vuelva al diseño de movimiento y luego elija la vista de código. Voy a soltar el ejemplo de Google aquí:

Tenga en cuenta que cambié el archivo MotionScene a mi propio motionlayoutexample_scene. Este diseño simplemente muestra un botón en la pantalla con el “botón” ID.

Molesto, necesitaba reiniciar Android Studio antes de que reconociera que había agregado la descripción del diseño correctamente. ¡Intenta eso si tienes problemas!

Una vez hecho esto, deberías poder cambiar a la vista de diseño y ver un montón de nuevos controles para jugar. ¡También notarás que hay un botón en la parte superior izquierda de la pantalla!

Cómo animar

Los controles a la derecha le permiten ver dos estados que el diseño puede adoptar: un estado “inicial” y un estado “final”. También verá el “estado base”, que es lo que está viendo ahora, tal como está definido en su carpeta de diseño.

Android Studio en realidad se refiere a estos como “ConstraintSets”. El icono en la parte superior izquierda de esta ventana (que se parece a dos nodos con un pequeño signo más verde debajo) le permitirá crear un nuevo estado. La siguiente herramienta (la flecha) define una nueva transición entre esos estados. El icono del tercer dedo le permite definir las acciones que desencadenan las transiciones y los cambios de estado. Esto se llama un controlador de clic o deslizar.

Verifique el XML de motionlayoutexample_scene y verá las etiquetas de restricción “Inicio” y “Fin” que definen estos dos diseños. También encontrará la etiqueta de transición que le dice a Android que hay algún tipo de transición entre los dos.

Puede elegir cualquiera de los estados para verlos en el editor a la izquierda.

Intentemos cambiar al estado “final”. Con eso seleccionado, vas a editar las restricciones para colocarlo en la parte inferior de la pantalla.

¡Cambie de nuevo y el botón debería reaparecer mágicamente en la parte superior! Nuevamente, me llevó un poco de tiempo antes de que Android Studio jugara a la pelota por mí. Pero también puede lograr el mismo efecto editando el XML en su escena con la posición inicial establecida en la primera restricción y la posición final en la segunda.

Así es como lo hizo Google:





Para ver la animación en acción, simplemente haga clic en la transición en sí (la flecha sobre los dos estados) y luego haga clic en reproducir. ¡Ahora debería ver que el botón se desliza repetidamente por la pantalla! También puede establecer fotogramas clave de esta manera para animaciones más avanzadas.

Finalmente, decida qué desea activar esta animación utilizando el controlador de clic o deslizar. Simplemente elija la transición para implementar desde el primer cuadro desplegable, y luego la vista en la que desea registrar la acción.

A dónde ir desde aquí

Si bien la herramienta es un poco complicada y tiene errores en este momento, definitivamente tiene mucho potencial. ¡Y hay más que puedes hacer con él también!

Por supuesto, puede agregar nuevas vistas tal como lo haría normalmente a través del editor (asegúrese de que esté seleccionado el diseño de movimiento predeterminado). También puede agregar nuevos estados y transiciones entre ellos. Si desea agregar elementos personalizados a sus animaciones (como cambios de color), puede hacerlo utilizando Atributos personalizados. Con suerte, esto se integrará en el editor adecuado en el futuro.

Consulte la documentación oficial de Google para obtener más detalles. Afortunadamente, esta introducción lo ha explicado lo básico y ahora tiene una buena idea de lo que se puede hacer con el nuevo Editor de movimiento y cómo comenzar. ¡Cuéntanos cómo te va en los comentarios a continuación!

Feliz animando!