Control deslizante personalizado en Jetpack Compose

Foto de Jeremy Bishop en UnsplashEn el mundo del desarrollo moderno de aplicaciones para Android, Jetpack Compose se ha convertido en un potente conjunto de herramientas de interfaz de usuario que ofrece un enfoque declarativo para crear aplicaciones nativas de Android. Jetpack Compose le permite crear interfaces de usuario interactivas y visualmente atractivas utilizando funciones componibles. En este artículo, veremos la función componible CustomSlider, que le permite crear controles deslizantes personalizados con comportamiento y estilo personalizados en Jetpack Compose. En este artículo, veremos cómo crear nuestra propia implementación de CustomSlider en Jetpack Compose. CustomSlider nos permite colocar indicadores debajo del control deslizante y etiquetas sobre el pulgar del control deslizante. Los controles deslizantes se usan comúnmente en aplicaciones para permitir a los usuarios seleccionar valores dentro de un rango específico. Con CustomSlider tenemos la flexibilidad de definir el comportamiento y la apariencia de un control deslizante personalizando sus diversos parámetros.Echemos un vistazo más de cerca a la firma de la función CustomSlider y comprendamos su propósito: @Composablefun CustomSlider(value: Float,onValueChange: (Float) -> Unit,modifier: Modifier = Modifier,valueRange: ClosedFloatingPointRange = ValueRange,gap: Int = Gap,showIndicator: Boolean = false,showLabel: Boolean = false,enabled: Boolean = true,thumb: @Composable (thumbValue: Int) -> Unit = {CustomSliderDefaults.Thumb(it.toString())},track: @Composable (sliderPositions: SliderPositions) -> Unit = { sliderPositions ->CustomSlider Defaults.Track (sliderPositions = sliderPositions)},indicator: @Composable (indicatorValue: Int) -> Unit = { IndicatorValue ->CustomSliderDefaults.Indicator(indicatorValue = IndicatorValue.toString())},label: @Composable (labelValue: Int) -> Unit = { labelValue ->CustomSliderDefaults.Label(labelValue = labelValue.toString())} ) {// Detalles de implementación} CustomSlider acepta varios parámetros , que le permiten personalizar el comportamiento y la apariencia del control deslizante para satisfacer sus necesidades. Examinemos cada parámetro con más detalle:

• Valor: Representa el valor actual del deslizador, es de tipo Flotante.
• onValueChange: una función de devolución de llamada que se llama cada vez que cambia el valor del control deslizante. Se requiere un parámetro flotante que represente el nuevo valor seleccionado por el usuario.
• Modificador: un modificador opcional que le permite realizar cambios personalizados en la apariencia visual o el comportamiento del control deslizante.
• valueRange: Indica el rango de valores que puede asumir el deslizador. Es como ClosedFloatingPointRange Están definidos.
• Espacio: especifica el espacio o la distancia entre cada paso del control deslizante. Este parámetro determina la granularidad de los valores seleccionables. De forma predeterminada, el espacio se establece en 1, lo que significa que no hay espacio entre los pasos.
• showIndicator: un valor booleano que determina si mostrar indicadores en cada paso del control deslizante.
• showLabel: un valor booleano que indica si mostrar etiquetas encima del control deslizante.
• habilitado: un valor booleano que indica si el control deslizante está habilitado o deshabilitado.
• Pulgar: una función componible que define la representación visual del pulgar del control deslizante. El valor del pulgar actual se utiliza como un parámetro int.
• pista: una función componible que define la representación visual de la pista del control deslizante. Toma un parámetro SliderPositions.
• Indicador: una función componible que define la representación visual de los indicadores que aparecen en el control deslizante en cada paso. El valor del indicador se utiliza como un parámetro int.
• Subtítulo: una función componible que define la representación visual de los subtítulos que aparecen sobre el control deslizante. El valor de la etiqueta se utiliza como un parámetro int.

Al aprovechar estos parámetros, puede crear controles deslizantes altamente personalizables que se adapten al diseño y la funcionalidad de su aplicación. Ahora que hemos examinado la firma y los parámetros de la función CustomSlider, profundicemos en los detalles de implementación para comprender cómo funciona restando el valor inicial del valor final de la variable valueRange itemCount. La variable «pasos» se calcula en función del valor de la brecha. Si el espacio se establece en 1, lo que significa que no hay espacio entre los pasos, el valor del paso se establece en 0. De lo contrario, se calcula como el número de pasos en función de itemCount y Gap. El itemCount se divide por el espacio y luego se resta por 1. El resultado se redondea al entero más cercano mediante la función roundToInt(). La función componible del control deslizante es responsable del diseño y la representación de los componentes del control deslizante. Utiliza la función de diseño componible para colocar los componentes correctamente. Echemos un vistazo más de cerca al código en la función Slider: La función de diseño componible se usa para definir un diseño personalizado para los componentes Slider. En él hemos definido nuestros componentes de etiqueta, indicador y control deslizante. El parámetro MeasurePolicy se establece en la función custommSliderMeasurePolicy. Esta función contiene la lógica central para colocar los elementos de nuestro control deslizante personalizado. Examinaremos la función custommSliderMeasurePolicy con más detalle en breve. La función componible Indicador es responsable de mostrar los indicadores en cada paso en el control deslizante. Itera a través del rango de valores definido por valueRange y verifica si cada valor es un múltiplo del espacio. Si es así, se representa un indicador utilizando la función de indicador componible provista. Aquí hay un extracto del código dentro de la función de indicador: // Iterar a través del rango de valores y mostrar los indicadores a intervalos regulares (i en valuerange.start. Uerange.Start to Valuerange.inclusive usando un bucle for con un paso igual a gap. Se representa un indicador para cada valor llamando a la función componible del indicador y pasando el valor como parámetro. La función de composición de etiquetas es responsable de representar la etiqueta sobre el pulgar del control deslizante. Aquí hay un fragmento de código dentro de la función Label: Box(modifier = modifier,contentAlignment = Alignment.Center) {label(value.roundToInt())}La función customSliderMeasurePolicy es responsable de medir y posicionar los componentes dentro del diseño CustomSlider. Calcula el ancho y el alto del diseño y determina las posiciones de la etiqueta, el control deslizante y los indicadores. Comprendamos el concepto de colocar indicadores y etiquetas del control deslizante personalizado. Digamos que hemos establecido el espacio en 2 y el rango de valores es de 0 a 10. Paso 1: Calcula el ancho de cada sección.Primero dividimos el ancho de la pista por el número de elementos como se muestra en la imagen de arriba. Supongamos que el ancho de la traza es 500 dp y el número de elementos es 10, entonces el ancho de cada sección es 500/10 = 50 dp. Así es como calculamos el ancho de cada sección. // Calcula el ancho disponible para la pista (excluyendo el radio del pulgar en cada lado). val trackWidth = ancho – (2 * thumbRadius) // Calcula el ancho de cada sección en la pista. val sectionWidth = trackWidth / itemCountPaso 2: Calcula la distancia entre indicadores.Ahora necesitamos calcular la distancia entre dos indicadores. Para hacer esto, multiplicamos el ancho de cada sección por el espacio, que es 2, por lo que obtenemos 50 * 2 = 100 dp. // Calcula el espaciado horizontal entre indicadores.val IndicadorEspaciado = ancho de sección * EspacioPaso 3: Coloca los indicadores.Para colocar los indicadores manejamos la variable IndicatorOffsetX. Primero, configuramos la variable indicadorOffsetX en «thumbRadius» para que comience en la traza como se muestra en la imagen de arriba. Y ahora, cuando coloquemos nuestro indicador en este IndicadorOffsetX, se colocará un poco más a la derecha, como se muestra en la imagen de arriba. Para colocar el indicador exactamente en el medio, necesitamos dividir el ancho del indicador por 2 y luego restarlo del IndicadorOffsetX. Para colocar todos los indicadores, necesitamos iterar a través de todos los indicadores y agregar el espacio entre dos indicadores, z ,// para colocar nuestros indicadores en el medio.placeable.placeRelative(x = (indicatorOffsetX – (placeable.width / 2)).roundToInt(),y = labelHeight + sliderHeight)indicatorOffsetX += IndicatorSpacing}Paso 4: coloque etiquetas sobre el control deslizante.Para colocar la etiqueta sobre el pulgar del control deslizante, debemos multiplicar el ancho de la sección por el valor actual. Para calcular el valor actual, restamos el valor final del control deslizante del valor inicial, es decir, en nuestro caso es (6–0 = 6). Hacemos esto porque es posible que el valor inicial de valueRange no comience en 0; por ejemplo, puede ser 10f..100f. // Para calcular el desplazamiento de la etiqueta, primero calculamos el progreso del control deslizante // restando el valor inicial del valor actual. // Después de eso, multiplicamos este progreso por el ancho de la sección. // Agregue el radio del pulgar a este valor de altura resultante) { // Necesitamos restar la mitad del ancho de la etiqueta de labelOffset, // para colocar nuestra etiqueta en el medio.labelPlaceable?.placeRelative (x = (labelOffset – (label Placeable.width / 2)).roundToInt(),y = 0) // Otro código } Aquí está el código completo de customSliderMeasurePolicyCustomSliderDefaults se utiliza para almacenar los valores predeterminados utilizados por los controles deslizantes personalizados. Tiene 4 funciones: Thumb, Trace, Display y Anotation. CustomSliderDefaults es simple y no tiene complejidad, por lo que no lo explicaré en este artículo. El código completo de CustomSlider está a continuación: Ahora hemos terminado de crear nuestra implementación de control deslizante personalizado. Así que veamos cómo podemos usarlos en nuestros proyectos y adaptarlos a nuestras necesidades.

Salida

Gracias por leer este artículo. El código completo para crear CustomSlider se puede encontrar aquí. En este artículo, echamos un vistazo en profundidad a la característica componible CustomSlider en Jetpack Compose. Exploramos sus parámetros y aprendimos a personalizar el comportamiento y la apariencia de los controles deslizantes en Jetpack Compose. Al comprender la implementación de la función CustomSlider, puede crear controles deslizantes personalizados que coincidan con el diseño y las necesidades funcionales de su aplicación. Con Jetpack Compose puede crear interfaces de usuario dinámicas e interactivas. Los controles deslizantes son solo un ejemplo de los componentes versátiles que puede crear con ellos.