Territorio Móvil
Apps Android
Pantalla de selección de tiempo de la aplicación de temporizador en Jetpack Compose – Parte I | de Saurabh Pantalones | mayo 2022

Pantalla de selección de tiempo de la aplicación de temporizador en Jetpack Compose – Parte I | de Saurabh Pantalones | mayo 2022

¡Se acaba el tiempo!

Fuente: Proxima Studio Este artículo cubre el enfoque y el desarrollo de la aplicación de temporizador, que simplemente muestra una pantalla de selección de temporizador que permite al usuario elegir cuánto tiempo debe funcionar un temporizador. La parte de funcionamiento del temporizador se trata en la Parte II. En esta parte, la atención se centra en diseñar y desarrollar la pantalla de selección del temporizador junto con algunas animaciones básicas. La pantalla contiene una etiqueta de temporizador en la parte superior, una pantalla de temporizador que muestra la hora que el usuario está seleccionando, un teclado para seleccionar la hora, un botón de temporizador de juego y una barra inferior con la sección de temporizador seleccionada. Lo primero que me viene a la mente cuando miro la pantalla es cómo la dividimos en partes más simples y luego las juntamos para que funcione. Echemos un vistazo a la siguiente imagen para entenderlo mejor.Jerarquía componible Tenemos un pantalla del temporizador eso incluye ScreenTitle, TimerSelection, TimerRunner y BottomBar Componibles + Ver modelo.Los componibles contienen sus subcomponentes, que son componibles sin estado que simplemente configuran y devuelven los datos que se les proporcionan. Nos aseguraremos de manejar nuestra lógica y administración de estado en ViewModel y luego los propagaremos a nuestros componibles sin estado.

Los componibles sin estado son aquellos que no cambian el estado de la vista en sí.

TimeUnit, TimeDisplay, CircularKey, TimerKeypad, BottomBar, BottomTab, ScreenTitle no tienen estado. ¡Grande! Veamos cómo se ven individualmente.Componibles sin estado, ya que podemos ver cómo se ven los componentes individuales y cuando se combinan cuál es el resultado. Estos componentes simplemente aceptan un estado y responden con los datos esperados. ¿Por qué hicimos lo que hicimos? Bueno, siempre que diseñemos una interfaz de usuario, debemos considerar lo siguiente:

Mire de cerca para ver las pequeñas piezas que podemos mantener independientes, reutilizables y sin condiciones.
Cómo se posiciona cada elemento y en relación con quién. Entonces, cuando se contrae una vista o se aumenta/disminuye el tamaño de la pantalla, los elementos deben permanecer en la misma posición entre sí.
Qué elementos juntos forman un contenedor para que podamos agruparlos en uno y usar el contenedor en nuestra interfaz de usuario principal.
Cómo el comportamiento de un elemento afecta la posición/valor de otro elemento.

Una vez que tengamos claros los puntos anteriores, será muy fácil dividir el componente en partes pequeñas y construir la imagen general. En nuestro caso, de arriba a abajo, encontramos las siguientes piezas:

unidad de tiempo: La pantalla del temporizador requería tres conjuntos de dos vistas numéricas + una vista de unidad. Así que creamos una unidad de tiempo componible que acepta dos números y una unidad para mostrar. Eso es todo. Repetirlo tres veces mostrará nuestro tiempo.

@Composablefun TimeUnit(tiempo: TimeUnit = TimeUnit(),unidad: Cadena,textColor: Color = GREY_TEXT)

Clave circular: La sección debajo de la pantalla del temporizador y arriba de la barra inferior muestra que todo es una vista circular con una clave. Podría ser una tecla de texto o una tecla de símbolo. Así que creamos un Composable de clave circular que acepta la clave y un símbolo (anulable). Priorizamos la tecla de texto sobre la tecla de símbolo ya que la mayoría de las teclas son de texto. Repetimos esta tecla 12 veces para hacer nuestro teclado. ¿No es genial?

@Composablefun CircularKey(tecla: Teclado,modificador: Modificador = Modificador,color de fondo: Color = GRAY_LIGHT,textColor: Color = GRAY_TEXT,icon: ImageVector? = null,onClick: (Teclado) -> Unidad,)

pestaña inferior: Lo último de lo que nos damos cuenta es que nuestra barra inferior contiene parte de un ícono y texto dispuestos verticalmente y repetidos cinco veces seguidas horizontalmente para formar nuestra barra inferior. Obviamente, necesita una bandera para distinguir entre el estado seleccionado y no seleccionado.

@Composablefun BottomTab(modifier: Modifier = Modifier,title: String,icon: ImageVector,isSelected: Boolean = false,onClick: (String) -> Unit) Finalmente, reunimos todo lo anterior en nuestra pantalla de temporizador para finalmente obtener esto para construir lo que queríamos. Así que piénsalo detenidamente antes de escribir tus componibles para cualquier interfaz de usuario. Realmente te ahorra mucho tiempo. En el video de demostración anterior, vemos que cuando hace clic en el botón de reproducción, la pantalla de selección se desliza hacia abajo y la segunda pantalla se desliza hacia adentro desde la parte superior y cuando invierte la segunda pantalla se desliza hacia arriba y hacia afuera a la pantalla de selección desde la parte inferior hacia arriba. Para esto usamos la API de animación simple de componer. AnimatedContent es la API de animación que podemos usar para animar nuestro contenido con estados inicial y objetivo. Aquí mantenemos nuestro estado de pantalla y, en función del estado, mostramos nuestros elementos componibles y, al mismo tiempo, animamos nuestros elementos componibles actuales y entrantes con la especificación de animación especificada en Transition spec.if(targetState == TimerContent.SELECTION) { slideInVerticalmente { Altura -> Altura } + fadeIn() con deslizamiento hacia afueraVerticalmente { Altura -> -Altura } + fadeOut()} else {slideInVerticalmente { Altura -> -Altura } + fadeIn() con deslizamiento hacia afueraVerticalmente { Altura -> Altura } + fadeOut()}Entendamos eso, entonces cuando hicimos clic en el botón del temporizador de reproducción, el estado de nuestra pantalla cambia de SELECCIÓN -> CORREDOR. Esto activa la ejecución de TransitionSpec y verifica en qué estado nos estamos moviendo. Ejecuta la condición Else, en la que se define de la siguiente manera: primero se desliza en la nueva pantalla desde arriba y en dirección vertical y al mismo tiempo se le aplica un crossfade { Altura -> -Altura } + fadeIn() Luego, junto con lo anterior, deslice hacia abajo la pantalla existente mientras aplica la transición de desvanecimiento.slideOutVerticalmente { Altura -> Altura } + fadeOut() Eso es todo y ahora veamos como se animan nuestras pantallas con sus animaciones de entrada y salida. Principalmente, deslizar en vertical es la transición Enter y deslizar hacia fueraVertical es la transición de salida para nuestros componibles. Los combinamos con los Con palabra clave aquí. En las siguientes partes, veremos cómo administrar estados para diferentes componentes y cómo crear un temporizador que se ejecute con un tiempo específico. Recomendaría revisar el código usted mismo y tratar de entenderlo, ya que es muy simple. Explicaré los detalles de la funcionalidad en publicaciones posteriores, ya que esto solo está destinado al diseño de la interfaz de usuario.