DotsIndicator es una biblioteca de indicadores de paginación con estilo Material diseñada para Android ViewPager. Ofrece tres efectos de animación cuidadosamente elaborados que ayudan a los desarrolladores a implementar fácilmente una experiencia de navegación entre páginas de nivel profesional. Tanto si usas ViewPager como ViewPager2, o bien el sistema de Vistas tradicional o Jetpack Compose, DotsIndicator proporciona una respuesta visual coherente y elegante.

¿Por qué elegir DotsIndicator?

En el desarrollo de aplicaciones móviles, los indicadores de paginación son componentes clave para mejorar la experiencia de usuario. DotsIndicator destaca por las siguientes características:

• Tres efectos de animación: ofrece estilos de idnicador Spring (elástico), Worm (gusano) y estático tradicional.
• Compatibilidad con varias versiones: totalmente compatible con ViewPager, ViewPager2 y Jetpack Compose.
• Altamente personalizable: permite personalizar color, tamaño, espaciado, radio de esquina y otras propiedades.
• Implementación ligera: el código principle se concentra en unos pocos archivos clave como BaseDotsIndicator.kt.

Componentes principales

La biblioteca DotsIndicator incluye varios componentes clave para distitnos escenarios:

• SpringDotsIndicator: indicador con efecto de animación elástica.
• WormDotsIndicator: indicador con forma de gusano y transición suave.
• DotsIndicator: indicador de estilo estático tradicional.

Todos estos componentes heredan de BaseDotsIndicator.kt, lo que garantiza una API y un comportamiento coherentes.

Guía de uso práctico

Integración con ViewPager

Agrega el indicador en el diseño XML:

<com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator
    android:id="@+id/pageIndicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:dotsColor="@color/indicator_selected"
    app:dotsSize="10dp"
    app:dotsSpacing="6dp"
    app:dotsCornerRadius="5dp" />

En el código, asócialo al ViewPager:

binding.pageIndicator.attachTo(pagerView)

Integración con ViewPager2

La integración con ViewPager2 es similar; usa ViewPager2Attacher.kt para gestionar la adaptación:

binding.pageIndicator.attachTo(pager2)

Uso con Jetpack Compose

En Compose el uso es más conciso; llama directamente al componente DotsIndicator.kt:

DotsIndicator(
    totalDots = pagerState.pageCount,
    selectedIndex = pagerState.currentPage,
    type = SpringIndicatorType
)

Estilos personalizados

A través de las propiedades definidas en attrs.xml, puedes personalizar fácilmente la apariencia del indicador:

• dotsColor: color del indicador
• dotsSize: tamaño del indicador
• dotsSpacing: espaciado entre indicadores
• dotsCornerRadius: radio de las esquinas del indicador

Por ejemplo, para crear un estilo de indicador tipo gusano personalizado:

<com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator
    android:id="@+id/customIndicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:dotsColor="@color/secondary"
    app:dotsSize="12dp"
    app:dotsSpacing="8dp"
    app:dotsCornerRadius="6dp" />

Estructura del proyecto de ejemplo

El proyecto de ejemplo de la biblioteca muestra el uso completo y contiene principalmente:

• DotsIndicatorSampleActivity.kt: Activity principal de entrada
• DotsIndicatorSampleViewPagerFragment.kt: ejemplo con ViewPager
• DotsIndicatorSampleViewPager2Fragment.kt: ejemplo con ViewPager2
• DotsIndicatorSampleComposeFragment.kt: ejemplo con Compose

Con estos ejemplos, puedes comprender rápidamente cómo usar DotsIndicator en distintos escenarios.