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 eine bestimmte Größe festlegen, indem Sie eine der drei Symbolgrößen verwenden. Diese Größen werden standardmäßig auch für die folgenden Kontexte verwendet:

Symbolquellen

Für Symbole können ImageVector, ImageBitmap oder Painter als Quelle verwendet werden. 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 basierend auf der LocalContentColor der übergeordneten Oberfläche aufgelöst LocalContentColor der übergeordneten Oberfläche, 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 Symbol größe und ‑tönung entsprechen, verwenden Sie stattdessen das Standard androidx.compose.foundation.Image.

Beispiel: Einfaches Symbol

Mit dem folgenden Code wird ein einfaches Symbol erstellt:

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}
IconSamples.kt

Beispiel: Symbole mit Farbe

Mit dem folgenden Code wird ein farbiges Symbol mit der Primärfarbe des Designs erstellt:

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}
IconSamples.kt

Beispiel: Symbole mit unterschiedlichen Größen

Mit dem folgenden Code wird ein Symbol erstellt, das eine bestimmte Größe hat:

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}
IconSamples.kt

Wichtige Informationen zum Code

• Die Größe des Symbols 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 eine lokalisierte contentDescription für das Symbol bereit. Geben Sie diese Beschreibungen immer an, es sei denn, das Symbol ist rein dekorativ.