El arsenal de Android – Indicadores de progreso

Bonita barra de progreso dividida en múltiples segmentos. Altamente personalizable. Completamente escrito con Jetpack Compose.

¿Por qué esta biblioteca?

¿Alguna vez ha necesitado ver una progresión que muestre diferentes pasos de finalización? El SDK de Android ofrece un componente ProgressBar que viene con un solo segmento. Cuando desee proporcionar una interfaz convincente que muestre la progresión real de sus usuarios, ¡se verá más amigable y más bonita! – para mostrar una progresión segmentada en lugar de una progresión lineal parcialmente llena.

Este componente le permite dividir su progresión en distintos segmentos. Va aún más allá, permitiéndole personalizar la pantalla con atributos como el espacio entre segmentos y un bisel para embellecer su diseño.

El campeón habla por sí mismo

Incluido en tu proyecto

Dado que la biblioteca está escrita con Jetpack Compose, el proyecto debe usar Kotlin para inflar este componente. Puede insertarlo de forma segura en un proyecto que no sea Compose con un ComposeView siempre y cuando uses Kotlin.

Agregue Jitpack (donde está alojada la biblioteca) en su raíz build.gradle Archivo:

allprojects {
  repositories {
    maven { url "https://jitpack.io" }
  }
}

entonces en el tuyo build.gradle archivo de módulo donde desea utilizar esta biblioteca:

dependencies {
  implementation "com.stephenvinouze:SegmentedProgressBar:{latest_version}"
}

Cómo utilizar

Solo se requiere segmentCount para crear la barra de progreso.

Desde marcar:

setContent {
  YourTheme {
    SegmentedProgressBar(
      segmentCount = 3,
    )
  }
}

Dónde está YourTheme y el Theme está utilizando en su aplicación.

Desde XML:

<androidx.compose.ui.platform.ComposeView
  android:id="@+id/segmented_progress_bar"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />

Así que en tu código:

findViewById<ComposeView>(R.id.segmented_progress_bar).setContent {
  YourTheme {
    Surface {
      SegmentedProgressBar(
        segmentCount = 3,
      )
    }
  }
}

Si desea saber qué ofrece este componente, aquí hay una descripción completa de lo que es capaz de hacer.

SegmentedProgressBar(
  segmentCount = 3,
  modifier = Modifier,
  spacing = 10.dp,
  angle = 30f, // Can also be negative to invert the bevel side
  progress = 1,
  segmentColor = SegmentColor(
    color = Color.Gray,
    alpha = 0.3f,
  ),
  progressColor = SegmentColor(
    color = Color.Green,
    alpha = 1f,
  ),
  drawSegmentsBehindProgress = false, // See Javadoc for more explanation on this parameter
  progressAnimationSpec = tween( // You can give any animation spec you'd like
    durationMillis = 1000,
    easing = LinearEasing,
  ),
  onProgressChanged = { progress: Float, progressCoordinates: SegmentCoordinates ->
    // Get notified at each recomposition cycle when a progression occurs.
    // You can use the current progression or the coordinates the progress segment currently has.
  },
  onProgressFinished = {
    // Get notified when the progression animation ends.
  }
)

Os animo a jugar con el campeón para conseguir un mejor aspecto. Muestre casos de uso avanzados con animaciones personalizadas basadas en devoluciones de llamada de progresión que no forman parte de la biblioteca en sí.

Copyright 2022 Stephen Vinouze

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.