CSA0X Cambia de opinión con Switch

tags: blog, compose, csa

La función Switch

La función componible Switch nos proveerá la opción de alternar entre dos estados, encendio y apagado. Para usarlo, deberemos indicar el estado inicial, además de la función que responderá al evento de cambiar de estado.

Switch(
    checked = true,
    onCheckedChange = { /*TODO*/ }
)

La lista de atributos de Switch es la que sigue:

@Composable
@OptIn(ExperimentalMaterialApi::class)
fun Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: SwitchColors = SwitchDefaults.colors()
)

• checked: Indica si está marcado o no.
• onCheckedChange: Evento que responde al cambio de estado entre marcado o no.
• modifier: Modificador aplicado al conmutador.
• enabled: Define si el conmutador está o no habilitado.
• interactonState: Estados de interacción del conmutador.
• colors: Colores aplicados al conmutador. Por defecto será el color secundario de la aplicación el que se aplique.

Gestionar el cambio de marcado a no marcado

Creamos una val isChecked usando la función remember pasándole a la lambda un estado de Boolean mutable. Cuando declaremos la función Switch, pasaremos como parámetro checked el value de isChecked y en el parámetro onCheckedChange pasamos la lamda que actualice el valor del estado dependiendo de si el conmutador está marcado o no.

fun SwitchStateExample() {
    val isChecked = remember {
        mutableStateOf(false)
    }
    Switch(
        checked = isChecked.value,
        onCheckedChange = { checked ->
            isChecked.value = checked
        }
    )
}

Coloreemos al gusto nuestro conmutador

El parámetro color de Switch es una interfaz SwitchColors que define una serie de colores y transparencias aplicadas a cada parte y estado del conmutador.

• Thumb

	checked	unchecked
enable	checkedThumbColor	uncheckedThumbColor
disable	disableCheckedThumbColor	disableUncheckedThumbColor

• Track

	checked	unchecked
enable	checkedTrackColor	uncheckedTrackColor
disable	disableCheckedTrackColor	disableUncheckedTrackColor
alpha	checkedTrackAlpha	uncheckedTrackAlpha

Jugemos con los colores para ver los resultados. Empezamos aplicando color al thumb marcado y habilitado:

@Composable
fun SwitchColorsThumbExample(){
    val isChecked = remember { mutableStateOf(true) }
    Switch(
        modifier = Modifier.padding(16.dp),
        checked = isChecked.value,
        onCheckedChange = { checked ->
            isChecked.value = checked
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color.Red
        )
    )
}

Si en su lugar coloreamos de rojo el track:

    colors = SwitchDefaults.colors(
        checkedTrackColor = Color.Red
    )

Y además le aplicamos una transparencia:

colors = SwitchDefaults.colors(
            checkedTrackColor = Color.Red,
            checkedTrackAlpha = 0.1f
        )

Y por último le damos color a todo lo habilitado

    colors = SwitchDefaults.colors(
        checkedThumbColor = Color.Blue,
        checkedTrackColor = Color.Red,
        checkedTrackAlpha = 0.3f,
        uncheckedThumbColor = Color.LightGray,
        uncheckedTrackColor = Color.Magenta,
        uncheckedTrackAlpha = 0.1f,
    )

Podemos seguir coloreando para cuando el conmutador esté deshabilitado, pero ya podemos hacernos una idea de la flexibilidad de personalización que tenemos.