Layoutfehler mit Layout Inspector beheben

Mit dem Layout Inspector in Android Studio können Sie das Layout in einer laufenden App in einem Emulator oder auf einem physischen Gerät untersuchen und Fehler beheben. Sie können die Attribute der einzelnen Komponenten prüfen, das Layout Ihrer App mit Design-Mockups vergleichen und eine vergrößerte Ansicht Ihrer App anzeigen.

Mit dem Layout Inspector können Sie auch prüfen, wie oft eine zusammensetzbare Funktion neu zusammengesetzt oder übersprungen wird. So lassen sich Probleme mit Ihrer App leichter erkennen. Einige Programmierfehler können beispielsweise dazu führen, dass die Benutzeroberfläche zu oft neu zusammengesetzt wird, was sich negativ auf die Leistung auswirken kann. Andere Programmierfehler können verhindern, dass die Benutzeroberfläche neu zusammengesetzt wird, und somit auch, dass Änderungen an der Benutzeroberfläche auf dem Bildschirm angezeigt werden.

Weitere Informationen finden Sie unter Compose-Benutzeroberfläche debuggen.

Abbildung 1. Eingebetteter Layout Inspector für die Jetchat-App.

Jetzt starten

Starten Sie die App, um den Layout Inspector zu öffnen. Rufen Sie das Fenster Running Devices (Laufende Geräte) auf und klicken Sie auf Toggle Layout Inspector (Layout Inspector ein-/ausschalten) Schaltfläche zum Ein- und Ausblenden des eingebetteten Layout Inspector Wenn Sie zwischen mehreren Geräten oder Projekten wechseln, stellt der Layout Inspector automatisch eine Verbindung zu den debugfähigen Prozessen her, die im Vordergrund des verbundenen Geräts ausgeführt werden.

So führen Sie einige häufige Aufgaben aus:

  • In den Toolfenstern Component Tree (Komponentenstruktur) und Attributes (Attribute) können Sie die Hierarchie ansehen und die Attribute der einzelnen Komponenten prüfen. Möglicherweise müssen Sie die Aktivität neu starten, um auf die Attribute zuzugreifen.
  • Wenn Sie Komponenten auswählen möchten, aktivieren Sie zuerst Toggle Deep Inspect Schaltfläche zum Umschalten der detaillierten Analyse und klicken Sie dann auf die Komponenten. Alternativ können Sie auch auf die Komponenten doppelklicken, um zum Code zu gelangen.
  • Wenn Sie mit der App interagieren möchten, deaktivieren Sie Toggle Deep Inspect (Detaillierte Prüfung ein-/ausschalten) Schaltfläche zum Umschalten der detaillierten Analyse.
  • Wenn Sie physische Geräte prüfen möchten, aktivieren Sie die Gerätespiegelung.
  • Wenn Sie Live-Updates aktivieren möchten, während Sie die Benutzeroberfläche Ihrer App aktualisieren, muss Live Edit aktiviert sein.

Komponente auswählen oder isolieren

Eine Komponente zeichnet in der Regel etwas, das der Nutzer sehen und mit dem er interagieren kann. In der Component Tree (Komponentenstruktur) wird die Hierarchie Ihrer App in Echtzeit mit jeder zusammensetzbaren Komponente angezeigt. So können Sie das Layout Ihrer App debuggen, da Sie die Elemente in Ihrer App und die zugehörigen Werte visualisieren können.

Wenn Sie eine Komponente auswählen möchten, klicken Sie in der Component Tree (Komponentenstruktur) oder in der Layout Display (Layoutanzeige) darauf. Alle Layoutattribute für die ausgewählte Komponente werden im Bereich Attributes (Attribute) angezeigt.

Wenn Ihr Layout überlappende Komponenten enthält, können Sie alle Komponenten in einem Bereich sehen, wenn Sie im Modus Deep Inspect mit der rechten Maustaste klicken Schaltfläche „Detaillierte Analyse“ ein-/ausblenden. Wenn Sie eine Komponente auswählen möchten, die nicht im Vordergrund ist, klicken Sie in der Component Tree (Komponentenstruktur) darauf.

Bei komplexen Layouts können Sie einzelne Komponenten isolieren, sodass in der Component Tree (Komponentenstruktur) nur eine Teilmenge des Layouts angezeigt und in der Layout Display (Layoutanzeige) gerendert wird. Wenn Sie eine Komponente isolieren möchten, klicken Sie in der Component Tree (Komponentenstruktur) mit der rechten Maustaste auf die Komponente und wählen Sie Show Only Subtree (Nur Unterstruktur anzeigen) oder Show Only Parents (Nur übergeordnete Elemente anzeigen) aus. Wenn Sie zur vollständigen Ansicht zurückkehren möchten, klicken Sie mit der rechten Maustaste auf die Komponente und wählen Sie Show All (Alle anzeigen) aus.

Layoutgrenzen ausblenden und Labels ansehen

Wenn Sie das Begrenzungsfeld oder die Komponentenlabels für ein Layout-Element ausblenden möchten, klicken Sie View Options Schaltfläche „Ansichtsoptionen“ oben in der Layout Display (Layoutanzeige) auf und aktivieren oder deaktivieren Sie Show Borders (Rahmen anzeigen) oder Show View Label (Label anzeigen).

Snapshots der Layoutstruktur erstellen

Mit dem Layout Inspector können Sie Snapshots der Layoutstruktur Ihrer laufenden App speichern, um sie mit anderen zu teilen oder später darauf zurückzugreifen.

Snapshots enthalten die Daten, die Sie normalerweise im Layout Inspector sehen, einschließlich einer detaillierten Darstellung Ihres Layouts, der Komponentenstruktur Ihres Compose-, View- oder Hybrid-Layouts und detaillierter Attribute für jede Komponente Ihrer Benutzeroberfläche. Wenn Sie einen Snapshot speichern möchten, klicken Sie auf Snapshot Export/Import Snapshot-Export/-Import und dann Export Snapshot (Snapshot exportieren).

Wenn Sie einen zuvor gespeicherten Layout Inspector-Snapshot laden möchten, klicken Sie auf Import Snapshot (Snapshot importieren).

App-Layout mit einem Referenzbild-Overlay vergleichen

Wenn Sie Ihr App-Layout mit einem Referenzbild wie einem UI-Mockup vergleichen möchten, können Sie im Layout Inspector ein Bitmapbild-Overlay laden.

  • Wählen Sie in der Symbolleiste des Layout Inspector (Layout Inspector) die Option Load Overlay (Overlay laden) aus, um ein Overlay zu laden. Das Overlay wird so skaliert, dass es zum Layout passt.
  • Mit dem Schieberegler Overlay Alpha (Overlay-Alpha) können Sie die Transparenz des Overlays anpassen.
  • Wenn Sie das Overlay entfernen möchten, klicken Sie auf Clear Overlay.

Eigenständiger Layout Inspector

Für eine optimale Leistung empfehlen wir, den Layout Inspector im eingebetteten Standardmodus zu verwenden. Wenn Sie den Layout Inspector ausbetten möchten, rufen Sie File (Datei) (Android Studio unter macOS) > Settings (Einstellungen) > Tools (Tools) > Layout Inspector (Layout Inspector) auf und deaktivieren Sie das Kästchen Enable embedded Layout Inspector (Eingebetteten Layout Inspector aktivieren).

Aktivieren Sie im eigenständigen Modus Live-Updates, indem Sie in der Symbolleiste des Layout Inspector auf die Option Live Updates klicken.

Zusätzliche Ressourcen

Ansichteninhalte