Symbole in Jetpack Compose-Glimmer

XR‑Geräte, für die der Leitfaden gilt

Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.

Informationen zu XR‑Gerätetypen

Informationen zu XR‑Gerätetypen

In Jetpack Compose Glimmer ist die Icon Komponente ein UI-Element zum Rendern einfarbiger Symbole. Symbole werden intelligent getönt und skaliert, so dass sie lesbar bleiben und visuell mit dem GlimmerTheme übereinstimmen.

Größen

Standardmäßig haben Symbole die Größe, die von LocalIconSize bereitgestellt wird. Sie können aber auch die drei Symbolgrößen verwenden, um eine bestimmte Größe festzulegen. Diese Größen werden standardmäßig auch für die folgenden Kontexte verwendet:

Symbolquellen

Symbole können ImageVector, ImageBitmap oder Painter als Quelle akzeptieren. Wenn Sie eigene Symbole definieren, verwenden Sie nach Möglichkeit ImageVector, um eine scharfe Darstellung in jeder Größe auf Displaybrillen zu gewährleisten.

Farbe und Tönung

• Automatische Tönung: Die Farbe des Symbols wird anhand von LocalContentColor bestimmt, das von der übergeordneten Oberfläche LocalContentColor bereitgestellt wird, z. B. surface oder Button.
• Manuelle Tönung: Verwenden Sie den tint Parameter, um eine bestimmte Farbe anzuwenden.
• Mehrfarbige Assets: Für Symbole, die nicht getönt werden sollen (wie mehrfarbige Markenlogos), legen Sie tint = Color.Unspecified fest.
• Allgemeine Bilder: Für Fotos oder allgemeine Bilder, die nicht den Regeln für Symbolgröße und -tönung entsprechen, verwenden Sie stattdessen das Standardandroidx.compose.foundation.Image.

Beispiel: Einfaches Symbol auf einer Oberfläche

Mit dem folgenden Code wird ein Symbol erstellt, das sich auf einer kreisförmigen Oberfläche befindet. Dabei wird die Primärfarbe des Designs verwendet:

@Composable
fun IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}
IconSamples.kt

Beispiel: Symbole mit unterschiedlichen Größen

Der folgende Code zeigt die verschiedenen Symbolgrößen:

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}
IconSamples.kt

Wichtige Informationen zum Code

• Die Größe der einzelnen Symbole wird mit GlimmerTheme.iconSizes und einem Modifikator angepasst. Für Symbole ist der Standardwert GlimmerTheme.iconSizes.medium. Verwenden Sie diese Größen anstelle von fest codierten Werten, um die Konsistenz in der gesamten UI zu gewährleisten.
• Stellt für jedes Symbol eine lokalisierte contentDescription bereit. Geben Sie diese Beschreibungen immer an, es sei denn, das Symbol ist rein dekorativ.