Formas 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 Jetpack Compose Glimmer, las superficies usan formas para definir sus límites visuales y su redondez. La clase Shapes proporciona diferentes niveles de redondez destinados a varios tipos de componentes.

Categorías de formas

La clase GlimmerTheme define tres tamaños de forma estándar:

• Pequeño: Una forma con cuatro esquinas del mismo tamaño. Se usa para componentes como tarjetas. De forma predeterminada, es un RoundedCornerShape de 24.dp.
• Mediano: Una forma con cuatro esquinas del mismo tamaño entre pequeñas y grandes. Esta es la forma de uso frecuente y es la predeterminada que se usa en la superficie. De forma predeterminada, es un RoundedCornerShape de 36.dp.
• Grande: Una forma con cuatro esquinas completamente redondeadas. Esta forma se usa para componentes como botones. De forma predeterminada, es un CircleShape.

Ejemplo: Obtén formas de GlimmerTheme y aplícalas a los componentes

Primero, obtén las formas definidas de GlimmerTheme.shapes y, luego, aplica esas formas a algunos componentes:

@Composable
fun ShapesSample() {
    val shapes = GlimmerTheme.shapes
    GlimmerLazyColumn {
        item { ShapeItem("small", shape = shapes.small) }
        item { ShapeItem("medium", shape = shapes.medium) }
        item { ShapeItem("large", shape = shapes.large) }
    }
}

@Composable
private fun ShapeItem(name: String, shape: Shape, modifier: Modifier = Modifier) {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier
            .aspectRatio(2.5f)
            .fillMaxWidth()
            .surface(interactionSource = interactionSource, shape = shape),
        contentAlignment = Alignment.Center,
    ) {
        Text(name)
    }
}
ShapesSamples.kt

Personalizar formas

La clase Shapes es @Immutable. Puedes crear una copia de las formas del tema existente y anular valores específicos con la función de copia. Haz esto para mantener la estructura del tema mientras ajustas radios específicos para la marca de tu app.

Ejemplo: Anula valores de forma específicos

El siguiente código anula valores de forma específicos:

@Composable
fun CustomShapesSample() {
    val customShapes = GlimmerTheme.shapes.copy(
        small = RoundedCornerShape(12.dp),
        medium = RoundedCornerShape(20.dp)
    )

    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier
            .aspectRatio(2.5f)
            .fillMaxWidth()
            .surface(interactionSource = interactionSource, shape = customShapes.small),
        contentAlignment = Alignment.Center,
    ) {
        Text("custom small")
    }
}
ShapesSamples.kt

Valores predeterminados

Si no se especifica lo contrario en GlimmerTheme, el sistema usa los siguientes valores de forma predeterminada: