Kotlin Avanzado > Sesión 01 > Proyecto
- Agregar transiciones al proyecto
- Animar elementos al mostrarlos u ocultarlos
- Android Studio Instalado en nuestra computadora.
¡Bienvenido de nuevo!
En esta parte del proyecto, retomaremos el proyecto realizado en Kotlin Intermedio e implementaremos algunas animaciones y transiciones a la aplicacióna la aplicación.
El primer punto que abordaremos son las animaciones que ejecutaremos entre la pantalla de login y la de registro. Para esto, dividiremos las animaciones para cada acción:
- Al navegar de la pantalla de login a la de registro, el login debe salir hacia el lado izquierdo y la de registro entrar desde la derecha.
- Al navegar hacia atrás desde la pantalla de registro, la pantalla de login debe de entrar desde la izquierda y la de registro salir hacia la derecha.
- Al pulsar el botón de registrarse, la pantalla de login debe entrar desde la derecha y la de registro desplazarse a la izquierda.
El resultado final se visualiza en el siguiente gif:
Ahora, implementaremos una transición de elementos compartidos entre un elemento de la lista de productos y el detalle de este.
Al pulsar sobre un elemento de la lista, el elemento debe resaltarse y expandirse para finalmente tomar el tamaño del contenedor final. La animación al dar navegar hacia atrás, debe ser la inversa a la que describimos.
Mostramos a continuación el resultado de este ejercicio (la velocidad de la transición está reducida para poder apreciar los detalles de la animación).
En este último bloque, mostraremos y ocultaremos nuestro BottomNavigationView en función del fragment que esté en primer plano. A continuación enumeramos las pantallas donde se debe mostrar nuestro view.
- En la lista de productos.
- En el carrito de compras.
- En el perfil de usuario.
El Animator debe mostrar la barra surgiendo desde abajo hacia arriba y al llegar a su posición, poder realizar operaciones sobre él. Al ocultarse, se deshabilitan las acciones que se pueden ejecutar y la barra desde su punto se desplaza hacia abajo hasta desaparecer.
El sigiuiente bloque describe una estructura en donde se pueden controlar estos eventos. En este caso, el navController se podría recuperar desde el mismo BottomNavigationView, y mediante un listener, determinar si la barra se oculta o se muestra en función del fragmento al que se navega (identificado por medio de sus id's).
lifecycleScope.launchWhenResumed {
TODO("Aquí va el elemento de donde se obtiene el navController").findNavController().addOnDestinationChangedListener { _, destination, _ ->
Log.d("destination", destination.toString())
when (destination.id) {
TODO("Aquí van los id's de los elementos donde se muestra el view") -> {
// TODO: Escribe aquí la lógica para mostrar el View
}
else -> {
// TODO: Escribe aquí la lógica para ocultar el View
}
}
}
}La ejecución de esta tarea no se limita a este bloque de código, así que otra forma de controlar estos eventos es permitida.