Jetpack Compose Glimmer basiert auf Jetpack Compose und umfasst Composables, Komponenten, Verhaltensweisen und ein Theme, die für KI-Brillen mit Display entwickelt wurden. Mit Glimmer können Sie native Benutzeroberflächen für Datenbrillen mit Compose erstellen und Ihre App-Erlebnisse mit weniger Code, leistungsstarken Tools und intuitiven Kotlin-APIs zum Leben erwecken.
Jetpack Compose-Glimmer-Composables
Jetpack Compose Glimmer bietet @Composable-Funktionen, die auf Displays von KI-Brillen zugeschnitten sind, z. B. Text, Button und ListItem. Hier sind einige einzigartige Merkmale von Jetpack Compose Glimmer-Composables:
- Vereinfachtes Styling: Die
Surface-Komponenten haben standardmäßig beispielsweise schwarze oder transparente Hintergründe, um die Darstellung zu optimieren. - Optimierte Standardfarben: Jetpack Compose Glimmer berechnet die Inhaltsfarbe standardmäßig basierend auf der Hintergrundfarbe. Entwickler müssen Textfarben also nur selten manuell festlegen. Das verbessert die Lesbarkeit ohne zusätzlichen Aufwand.
Differenzierter Fokus: Der Fokus wird durch visuelles Feedback in Form von Umrisslinien anstelle des Welleneffekts angezeigt, was für eine bessere Sichtbarkeit sorgt.
Abbildung 1. Drei Fokusstatus in Jetpack Compose Glimmer, die durch umrissbasiertes visuelles Feedback unterschieden werden. Optimierte Erhebung: Jetpack Compose Glimmer verwendet nur wenige Schatten, um Elemente visuell voneinander abzugrenzen.
Abbildung 2: Fünf Ebenen in Jetpack Compose Glimmer, die durch begrenzte Schatten unterschieden werden.
Jetpack Compose-Glimmer-Komponenten
Jetpack Compose Glimmer bietet eigene, speziell entwickelte Komponenten, ähnlich den Komponenten in Jetpack Compose, die jedoch speziell für die besonderen visuellen und interaktiven Anforderungen von Datenbrillen optimiert sind. Jetpack Compose Glimmer-Komponenten lassen sich mit dem Jetpack Compose Glimmer-Theme anpassen. Sie basieren auf Compose-Funktionen auf niedrigerer Ebene, um standardmäßig Nutzereingabemethoden wie Tippen und Wischen zu unterstützen.
Weitere Informationen zur Verwendung einer bestimmten Komponente finden Sie in den folgenden Anleitungen:
- Tasten
- Infokarten
- Symbole
- Symbolschaltflächen
- Listen
- Elemente auflisten
- Anzeigeninventar
- Text
- Ein/Aus-Schaltflächen
- Titel-Chips
- Vertikale Stapel
Wenn eine dieser Komponenten auf hoher Ebene für Ihren Anwendungsfall nicht funktioniert, können Sie mit einem surface eine benutzerdefinierte Komponente erstellen. Oberflächen sind der grundlegendste Baustein in Jetpack Compose Glimmer – eine leere Leinwand für alle spezifischen, benutzerdefinierten Designs oder Interaktionen, die Sie erstellen möchten.
Jetpack Compose-Glimmer-Modifikatoren
Modifikatoren in Jetpack Compose Glimmer funktionieren identisch mit Compose-Modifikatoren. Mit ihnen können Sie zusammensetzbare Funktionen erweitern, indem Sie ihr Layout, ihr Erscheinungsbild und ihr Verhalten anpassen. Jetpack Compose Glimmer enthält Modifikatoren und eindeutige Standardeinstellungen für brillenspezifisches visuelles Feedback und Leistung.
Jetpack Compose-Design von Glimmer
Jetpack Compose Glimmer bietet ein spezielles Theming-System für Brillen mit Display.
Das Design von Jetpack Compose Glimmer bietet eine vereinfachte und optimierte Palette von Farben, Typografie und Formen. So wird eine maximale Sichtbarkeit und Übersichtlichkeit für Displaybrillen erreicht. Alle Jetpack Compose Glimmer-Komponenten sind für die automatische Integration in brillenspezifische Eingabemethoden konzipiert. Das Design von Jetpack Compose Glimmer wird über die Klasse GlimmerTheme bereitgestellt.
Wie andere Themes in Jetpack Compose enthält GlimmerTheme mehrere Subsysteme, die in den folgenden Abschnitten zusammen mit ihren anpassbaren Attributen kurz beschrieben werden:
- Farben
- Typografie
- Werte für den Abstand zwischen Komponenten
- Formen
- Tiefeneffektstufen
- Symbolgrößen
Farben
Das Farbsystem von Jetpack Compose Glimmer wurde für additive Displays und reale Umgebungen entwickelt. Im Gegensatz zu Standard-Android-Designs werden im GlimmerTheme
Colors dunkle Hintergründe mit Semitransparenz und lebendigen Akzenten priorisiert, damit Inhalte bei unvorhersehbaren realen Lichtverhältnissen lesbar sind.
Das System verwendet eine dreiteilige Palette mit primären, sekundären und neutralen Farben. Neutrale Farben dienen oft als physische Oberflächen der räumlichen Benutzeroberfläche, während die primären und sekundären Farben klare visuelle Hinweise für Interaktion und Branding liefern.
GlimmerTheme.Typografie
Das Typografiesystem von Jetpack Compose Glimmer umfasst verschiedene Typografiestile für eine gute Lesbarkeit und Übersichtlichkeit auf Datenbrillen. Diese Schriftarten sind so konzipiert, dass sie den Kontrast maximieren und die Lesbarkeit von Text durch fettere Schriftstärken, größere Buchstabenabstände und geeignete Zeilenhöhen verbessern. Diese Stile sind über GlimmerTheme.typography verfügbar.
Werte für den Abstand zwischen Komponenten
Diese Werte werden verwendet, um einen einheitlichen Abstand zwischen den Glimmer-Komponenten von Jetpack Compose zu gewährleisten. Dazu gehören das Padding von Komponenten, der Abstand zwischen Komponenten und andere Abstandselemente. Wenn Sie diese Werte ändern, wirkt sich das auf die Standardgröße der meisten Komponenten aus.
Formen
Das Formsystem von Jetpack Compose Glimmer definiert eine Reihe von Standard-Eckenbearbeitungen und geometrischen Formen für Komponenten, die darauf ausgelegt sind, eine einheitliche und minimalistische visuelle Sprache auf der Benutzeroberfläche von Smartglasses zu schaffen. Alle Formen werden über GlimmerTheme.shapes verfügbar gemacht.
Tiefeneffektstufen
Jetpack Compose-Glimmer-Komponenten verwenden Tiefe, um die Hierarchie darzustellen. So lassen sich Elemente, die über anderen Karten angezeigt werden, optisch unterscheiden. Die Tiefe auf dem Display der Brille ergibt sich aus der Kombination aus der Platzierung im Z-Raum und den Schatten. Bei den meisten Komponenten auf hoher Ebene, z. B. Listenelementen, wird die Tiefe automatisch basierend auf dem Fokusstatus angewendet. Wenn der Fokus auf eine Komponente gerichtet ist, wird sie dreidimensional dargestellt. Wenn der Fokus verloren geht, wird sie wieder in ihrem normalen Zustand dargestellt. Wenn Sie jedoch mit benutzerdefinierten Komponenten arbeiten, können Sie den Parameter depthEffect für Modifier.surface oder depthEffect verwenden.
Symbolgrößen
Das Symbolsystem von Jetpack Compose Glimmer ist so konzipiert, dass es sich nahtlos in die vereinfachte visuelle Sprache von Benutzeroberflächen für Smartglasses einfügt. Dabei werden häufig abgerundete Formen wie Material Symbols Rounded verwendet, um eine optimale Lesbarkeit zu erzielen.