Botones en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes

Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.

Más información sobre los tipos de dispositivos de realidad extendida →

Más información sobre los tipos de dispositivos de realidad extendida →

En Glimmer de Jetpack Compose, un Button es un componente interactivo que está optimizado para la entrada de lentes con pantalla y ofrece comentarios visuales claros a través de sus estados para guiar las acciones del usuario.

Los botones se crean en el sistema de superficies de Glimmer de Jetpack Compose, que controla automáticamente las propiedades físicas, como los bordes y la profundidad.

El botón estándar contiene una etiqueta de texto y, de forma opcional, íconos. Puedes usarlo para acciones principales o secundarias. También hay botones especializados, como los botones de ícono y los botones de activación, que se definen como componentes independientes en Glimmer de Jetpack Compose.

Predeterminado

Grande

Anatomía

Un botón consta de un contenedor y una etiqueta, con íconos iniciales y finales opcionales.

Tamaños

Los botones de Glimmer de Jetpack Compose admiten dos variantes de tamaño. Estos afectan la altura mínima y el padding interno.

Estados

Los botones de Jetpack Compose Glimmer cambian de apariencia para comunicar su estado.

• Habilitado: Es el estado predeterminado de un botón interactivo.
• Enfocado: Cuando se enfoca, el botón aplica un GlimmerTheme.depthEffectLevels.level1 y un borde destacado enfocado.
• Presionado: Cuando se activa, se aplica una superposición blanca semitransparente a la superficie.
• Inhabilitado: El botón no responde a la entrada y se ajusta su apariencia visual.

Configuración predeterminada del botón

Los siguientes valores predeterminados se aplican a los botones estándar:

• De forma predeterminada, los botones usan GlimmerTheme.typography.bodySmall. Asegúrate de que el texto de los botones sea conciso y describa claramente la acción.
• La forma predeterminada de un botón es GlimmerTheme.shapes.large. Este redondeo coherente ayuda a los usuarios a identificar los botones en la interfaz de los lentes con pantalla.

Ejemplo: Botón con texto e íconos

Un botón básico solo incluye una etiqueta de texto, pero también puedes agregar íconos al principio (con leadingIcon) o al final (con trailingIcon) del texto para proporcionar contexto adicional.

El siguiente código crea un botón con un ícono inicial y uno final:

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

Grupos de botones

El elemento de componibilidad ButtonGroup te permite agrupar botones en una fila desplazable que actúa como un controlador de enfoque. A medida que el usuario se desplaza, el enfoque se mueve automáticamente para destacar el botón correspondiente a la posición de desplazamiento actual.

Ejemplo: Grupos de botones

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

Control de enfoque en grupos de botones

Puedes mover el enfoque a cualquier botón de un grupo para controlar la selección de forma manual.

Personaliza y controla el comportamiento de desplazamiento con el estado ButtonGroup:

1. Declara el estado con rememberButtonGroupState.
2. Pásalo al elemento de componibilidad ButtonGroup.
3. Llama a animateScrollToItem (o scrollToItem para el desplazamiento instantáneo) para desplazarte a un elemento específico y mover el enfoque automáticamente hacia él.

El siguiente código mueve el enfoque de un botón a otro cuando se hace clic en él:

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt

Personaliza el color de enfoque para la expresión de la marca

En Glimmer de Jetpack Compose, los componentes están diseñados y optimizados para pantallas transparentes, por lo que se basan principalmente en superficies translúcidas sutiles y bordes de alto contraste para garantizar la legibilidad y la comodidad visual en el mundo real. Debido a que los estados de reposo favorecen los tonos neutros para evitar la fatiga visual y la obstrucción del campo visual del usuario, el parámetro focusedColor en Button proporciona la affordance principal que expresa la marca de tu app.

Esta affordance hace que el color de tu marca sea una parte dinámica del estado de interacción activo del sistema, en lugar de teñir los botones inactivos con colores saturados que podrían comprometer la transparencia y el contraste en entornos ópticos transparentes. Cuando se enfoca, el botón eleva su fondo a este tono de la marca, junto con un recálculo automático del contraste del contenido con calculateContentColor(focusedColor), lo que logra comentarios claros e interactivos y, al mismo tiempo, conserva la moderación y la ergonomía óptica que se requieren en los lentes con pantalla.

En el siguiente ejemplo, se muestra cómo anular el focusedColor predeterminado con el color de tu marca:

Button(
    onClick = {},
    focusedColor = brandColor,
) {
    Text("Focus Color Button")
}
ButtonSamples.kt