Cómo mejorar la interfaz añadiendo un indicador de progreso

Introducción

En el desarrollo de aplicaciones, dotarlas de un diseño atractivo y funcional es un aspecto clave que mejora la experiencia del usuario. Si buscamos resaltar la personalidad de nuestra aplicación, la incorporación de vistas personalizadas puede ser una excelente opción. En este artículo, vamos a ver cómo crear un indicador de progreso utilizando un canvas y componentes de animación, que nos permitirán llevar un seguimiento visual del progreso de nuestras tareas.

Configuración del Canvas

Para integrar un indicador visual de progreso, lo primero es configurar un objeto Canvas dentro del componente deseado de nuestra aplicación. Al usar un Canvas, podemos representar formas como arcos y círculos.

Pasos esenciales:

1. Creación de Variables:

   • Tareas Completadas: Define el número de tareas completadas.
   • Total de Tareas: Calcula el porcentaje de tareas completadas respecto al total.

2. Organización de Componentes:

   • Envolver componentes dentro de un contenedor Row para un correcto alineamiento.
   • Añadir VerticalAlignment para centrar horizontalmente los elementos.

3. Configuración del Box:

   • Utilizar un Box con contentAlignment, padding y un aspectRatio para mantener las proporciones.

Dibujando el círculo de progreso en Canvas

La clave para implementar un círculo de progreso en Canvas radica en manejar adecuadamente los parámetros de dibujo, como el color y el ángulo de barrido.

val colorBase = MaterialTheme.colorScheme.inversePrimary
val progressColor = MaterialTheme.colorScheme.primary

drawArc(
color = colorBase,
startAngle = 0f,
sweepAngle = 360f,
useCenter = false,
style = Stroke(width = strokeWidthInPixels)
)

if (completedTasks <= totalTasks) {
// Dibujar el progreso
drawArc(
color = progressColor,
startAngle = 90f,
sweepAngle = 360 * (completedTasks.toFloat() / totalTasks),
useCenter = false,
style = Stroke(width = strokeWidthInPixels, cap = StrokeCap.Round)
)
}

Elementos clave:

• Color base y de progreso: Define los colores que se utilizan en el fondo y el progreso del círculo.
• DrawArc Function: Especifica el ángulo de inicio y barrido para el dibujo de la circunferencia.

Animación del progreso

Para hacer más dinámico nuestro componente, la animación resulta ser un factor decisivo:

val angleRatio by remember { mutableStateOf(Animatable(0f)) }

LaunchedEffect(completedTasks, totalTasks) {
if (totalTasks != 0) {
angleRatio.animateTo(
targetValue = completedTasks.toFloat() / totalTasks,
animationSpec = tween(durationMillis = 300)
)
}
}

Componentes de la animación:

1. Variable de Animación:

   • Utiliza remember para gestionar y almacenar el angleRatio

2. Efecto de Animación (LaunchEffect):

   • Ejecuta el cálculo de la animación cada vez que se actualizan las tareas

3. Especificaciones de Animación (Tween):

   • Define una transición suave en milisegundos (300ms)

Añadiendo texto al círculo

El texto dentro del círculo de progreso ayuda a visualizar el porcentaje exacto de progreso, proporcionando datos numéricos inmediatos.

Consideraciones:

• Rendering del Texto: Obtén el porcentaje dividiendo las tareas completas entre el total
• Estilo y Visualización: Aplica estilos como headlineMedium y bold para destacar el valor

Diseño atractivo y funcional

La implementación de un indicador visual de progreso ayuda a los usuarios a evaluar fácilmente cómo avanzan sus tareas.

Recomendaciones:

• Estética Visual: Asegúrate de que los colores y estilos se alineen con la temática general de la aplicación
• Interactividad Óptima: Aprovecha las animaciones para enriquecer la experiencia de usuario

Con estas técnicas, dotarás a tus aplicaciones de un diseño atractivo y dinámico que sin duda captará la atención de los usuarios.