Vorschau Ihrer Jetpack Compose-Glimmer-UI mit zusammensetzbaren Vorschauen ansehen

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 →
Display-Brille
Informationen zu XR-Gerätetypen →

Wenn Sie Ihre Jetpack Compose Glimmer-UI entwickeln, können Sie mit composable-Vorschauen Ihre Designs schnell und effizient visualisieren und iterieren. Mit der Vorschau von zusammensetzbaren Funktionen erhalten Sie ein interaktives Live-Rendering Ihrer Jetpack Compose Glimmer-UI-Komponenten direkt in Android Studio. Dank dieser Vorabversionen müssen Sie Ihre App nicht mehr für jede kleine Änderung an der Benutzeroberfläche auf einem Emulator oder physischen Gerät erstellen und ausführen. Das beschleunigt den Entwicklungszyklus erheblich.

Vorschau der Jetpack Compose Glimmer-UI-Komponenten

  1. Öffnen Sie Ihr XR-Projekt im neuesten Canary-Build von Android Studio.
  2. Prüfen Sie, ob Ihre zusammensetzbare Funktion mit der Annotation @Preview versehen ist.

  3. Klicken Sie in der Codeansicht auf die Auswahl für die Vorschaukonfiguration  für die zusammensetzbare Funktion.

  4. Wählen Sie im Drop-down-Menü Gerät die Option KI-Brille aus.

    Dadurch wird die Vorschauoberfläche an die Auflösung und das Seitenverhältnis der Display-Brille angepasst.

    Wählen Sie in der Vorschaukonfiguration der zusammensetzbaren Funktion „KI-Brille“ als Gerät aus.

  5. Wählen Sie entweder die Ansicht Design oder Teilen aus, um die Vorschau zu sehen.

    Die Vorschau der zusammensetzbaren Funktion wird in der geteilten Ansicht für ein simuliertes Display-Brillengerät angezeigt.

Vorschauumgebung anpassen

Die Brille verwendet ein additives, transparentes Display. Das bedeutet, dass das Display nur Licht hinzufügen, aber kein Schwarz erzeugen kann. Bei einem additiven Display ist Schwarz keine Farbe, sondern wird zu 100 % transparent dargestellt. Die Compose-Vorschau bietet eine Annäherung, die Ihnen hilft, das Verhalten der Benutzeroberfläche unter verschiedenen Bedingungen zu verstehen.

Wenn Sie verschiedene Betrachtungsbedingungen simulieren möchten, klicken Sie in der Symbolleiste des Vorschaufensters auf das Umgebungssymbol. Probieren Sie verschiedene Hintergrundoptionen aus (z. B. „Hell“, „Dunkel“ oder „Beschäftigt“), um zu prüfen, ob Text und Komponenten ausreichend kontrastreich und sichtbar sind.