[CSA04] No nos olvidamos de los botones flotantes FAB

tags: blog, compose, csa

La función FloatingActionButton

Un FAB es un componente importante desde hace unos años en las aplicaciones, debido a que es usado habitualmente para mostrar acciones principales que pueden ser llevadas a cabo en la pantalla. Compose nos permite crear de manera más flexible los FABs con respecto a los diseños XML.

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable () -> Unit
)

• onClick: función lanzada al pulsar el FAB.
• modifier: el modificador aplicado en el FAB.
• interactionState:diferentes estados que pueden ser representados por el FAB con las diferentes interacciones del usuario.
• shape: forma aplicada al fondo del FAB.
• backgroundColor: color de fondo del FAB.
• contentColor: color del contenido del FAB.
• elevation: elevación del FAB.
• content: contenido del FAB.

Un ejemplo de uso, usando varios de los parámetros:

 FloatingActionButton(
    onClick = { /*TODO*/ },
    modifier = Modifier.padding(2.dp),
    backgroundColor = Color.Yellow,
    elevation = elevation(20.dp),
    shape = CutCornerShape(8.dp)){
        Icon(Icons.Filled.Favorite,
            contentDescription = "Icon")
    }

La función ExtendedFloatingActionButton

Es un componente muy particular, usado para mostrar texto además del icono de acción típico de un FAB. Además, no tiene parámetro content clásico en Compose, sino que lo sustituye por text, donde incluiremos el contenido.

 ExtendedFloatingActionButton(text = {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Icon(
            Icons.Filled.Favorite,
            contentDescription = "Icon"
        )
        Spacer(modifier = Modifier.size(4.dp))
        Text(text = "Favorito")
    }
}, onClick = { /*TODO*/ })