Formateo y Ajustes Finales en Pantalla Home de To Do App
Clase 11 de 19 • Curso de Jetpack Compose en Android
Resumen
¿Cómo se mejora la presentación en la pantalla de tu aplicación?
Al tener lista la interfaz de usuario y la lógica de nuestra pantalla, aún existen pequeños detalles que requieren ajustes para lograr una presentación impecable. Es importante asegurarnos de que cada componente de la pantalla esté correctamente formateado y presentable, mejorando así la experiencia del usuario.
¿Cómo se formatea la fecha correctamente?
Uno de los elementos visuales clave es la fecha, que se actualizará con la fecha local del dispositivo. Primero, dirigámonos al homeScreenViewModel
. Aquí, utilizaremos state.copy(date = localDate.now)
para obtener la fecha actual. Con let
, podemos darle formato a través de formatDateTimeFormatter.ofPattern
, especificando el formato como:
- Día de la semana
- Mes
- Día en números
- Año
El formato ideal podría ser algo como "martes, octubre 22 de 2024". El objetivo es presentar la fecha de manera clara y organizada.
¿Cómo se ajustan los mensajes de resumen?
Es igualmente importante organizar los mensajes de resumen en nuestra aplicación. En el composable summaryInfo
, en lugar de tener mensajes estáticos, usaremos los recursos de cadenas (string resources). Para esto, crearemos un recurso de cadena denominado string.summaryInfo
donde podremos incluir el número de tareas pendientes en el mensaje. Así, pasaremos la información de manera dinámica dentro de la cadena con formato como You have %s pending tasks
.
¿Cómo equilibrar el diseño de las secciones en pantalla?
Para lograr un diseño visual equilibrado entre la sección de fecha, resumen y progreso, ajustaremos la proporción de espacio que cada uno consume. Se recomienda:
- La sección de título y resumen consumirá aproximadamente 1.5 veces más espacio que la sección de progreso.
De esta forma, visualmente, el espacio será distribuido otorgando mayor énfasis a la información de fecha y tareas pendientes, mientras que el progreso tiene el espacio justo para su visualización adecuada.
¿Qué sigue después de completar la pantalla?
¡Has logrado culminar la primera pantalla de la aplicación ToDo! Al realizar estos ajustes, tu pantalla mejora significativamente en cuanto a organización y presentación.