Layoutfehler mit Layout Inspector beheben

Mit dem Layout Inspector in Android Studio können Sie das Layout Ihrer App debuggen. Dazu wird eine Ansichtshierarchie angezeigt, in der Sie die Eigenschaften jeder Ansicht prüfen können. Mit dem Layout Inspector können Sie das App-Layout mit Design-Mockups vergleichen, eine vergrößerte oder 3D-Ansicht der App anzeigen und Details des Layouts zur Laufzeit untersuchen. Das ist besonders nützlich, wenn Ihr Layout zur Laufzeit und nicht vollständig in XML erstellt wird und sich das Layout unerwartet verhält.

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

Erste Schritte

Um den Layout Inspector zu starten, führen Sie Ihre App aus, rufen Sie das Fenster Running Devices (Aktive Geräte) auf und klicken Sie auf Toggle Layout Inspector (Layout Inspector ein-/ausblenden) 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:

  • Mit den Toolfenstern Component Tree (Komponentenbaum) und Attributes (Attribute) können Sie die Hierarchie aufrufen und die Eigenschaften der einzelnen Ansichten prüfen. Für den Layout Inspector ist möglicherweise ein Neustart der Aktivität erforderlich, um auf die Attribute zuzugreifen. Weitere Informationen finden Sie unter Attributprüfung ansehen.
  • Wenn Sie Ansichten durch einfaches Klicken direkt auf die Ansichten auswählen oder durch Doppelklicken auf die Ansichten zum Code navigieren möchten, aktivieren Sie Toggle Deep Inspect Schaltfläche zum Umschalten der detaillierten Prüfung.
  • Wenn Sie mit der App interagieren möchten, deaktivieren Sie Toggle Deep Inspect Schaltfläche zum Umschalten der detaillierten Prüfung.
  • Wenn Sie physische Geräte untersuchen 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-Bearbeitung aktiviert sein.
  • Wenn Sie den 3D-Modus verwenden möchten, erstellen Sie einen Layout Inspector-Snapshot Layout Inspector-Snapshot und klicken Sie dann auf 3D-Modus 3D-Schaltfläche.

Ansicht auswählen oder isolieren

In einer Ansicht wird in der Regel etwas dargestellt, das der Nutzer sehen und mit dem er interagieren kann. Im Komponentenbaum wird die Hierarchie Ihrer App in Echtzeit mit jeder Ansichtskomponente 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.

Klicken Sie im Komponentenbaum oder in der Layoutansicht auf eine Ansicht, um sie auszuwählen. Alle Layoutattribute für die ausgewählte Ansicht werden im Bereich Attribute angezeigt.

Wenn Ihr Layout überlappende Ansichten enthält, können Sie alle Ansichten in einem Bereich sehen, wenn Sie im Modus Deep Inspect Schaltfläche zum Umschalten der detaillierten Prüfung mit der rechten Maustaste klicken. Wenn Sie eine Ansicht auswählen möchten, die sich nicht im Vordergrund befindet, klicken Sie im Komponentenbaum darauf oder drehen Sie das Layout.

Bei komplexen Layouts können Sie einzelne Ansichten isolieren, sodass im Komponentenbaum nur eine Teilmenge des Layouts angezeigt und im Layout-Display gerendert wird. Wenn Sie eine Ansicht isolieren möchten, erstellen Sie einen Snapshot Layout Inspector-Snapshot, klicken Sie mit der rechten Maustaste auf die Ansicht im Komponentenbaum und wählen Sie Nur Unterbaum anzeigen oder Nur übergeordnete Elemente anzeigen aus. Wenn Sie zur vollständigen Ansicht zurückkehren möchten, klicken Sie mit der rechten Maustaste auf die Ansicht und wählen Sie Alle anzeigen aus. Sie müssen einen Snapshot erstellen, bevor Sie eine Ansicht isolieren.

Layoutgrenzen und Ansichtslabels ausblenden

Wenn Sie den Begrenzungsrahmen ausblenden oder Labels für ein Layoutelement anzeigen möchten, klicken Sie oben im Layout Display auf View Options Schaltfläche „Ansichtsoptionen“ und aktivieren oder deaktivieren Sie Show Borders oder Show View Label.

Snapshots der Layout-Hierarchie aufnehmen

Mit Layout Inspector können Sie Snapshots der Layouthierarchie Ihrer laufenden App speichern, um sie mit anderen zu teilen oder später darauf zuzugreifen.

Snapshots enthalten die Daten, die Sie normalerweise im Layout Inspector sehen, einschließlich einer detaillierten 3D-Darstellung Ihres Layouts, des Komponentenbaums Ihres View-, Compose- 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 auf Snapshot exportieren.

Sie können einen zuvor gespeicherten Layout Inspector-Snapshot laden, indem Sie auf Snapshot importieren klicken.

3D-Modus

Die Layout-Anzeige bietet eine erweiterte 3D-Visualisierung der View-Hierarchie Ihrer App zur Laufzeit. Wenn Sie diese Funktion verwenden möchten, erstellen Sie einen Snapshot Snapshot-Export/-Import, klicken Sie im Snapshot-Inspector-Fenster auf die Schaltfläche 3D-Modus 3D-Schaltfläche und drehen Sie den Snapshot, indem Sie die Maus ziehen.

Layout Inspector: 3D-Ansicht
Abbildung 2. Gedrehte 3D-Ansicht eines Layouts
Layout Inspector: Ansicht für Ebenenabstand
Abbildung 3. Mit dem Schieberegler Ebenenabstand können Sie die Ebenen des Layouts ein- oder ausblenden.

App-Layout mit einem Referenzbild-Overlay vergleichen

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

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

Compose prüfen

Mit Layout Inspector können Sie ein Compose-Layout in einer laufenden App in einem Emulator oder auf einem physischen Gerät untersuchen. Mit dem Layout Inspector können Sie prüfen, wie oft ein Composable neu zusammengesetzt oder übersprungen wird. So lassen sich Probleme in Ihrer App erkennen. Einige Programmierfehler können beispielsweise dazu führen, dass die Benutzeroberfläche übermäßig oft neu zusammengesetzt wird, was zu einer schlechten Leistung führen kann. Einige Programmierfehler können verhindern, dass die Benutzeroberfläche neu zusammengesetzt wird und daher die Änderungen an der Benutzeroberfläche nicht auf dem Bildschirm angezeigt werden.

Weitere Informationen zum Layout Inspector für Compose

Attributinspektion ansehen

Damit der Layout Inspector ordnungsgemäß funktioniert, ist die folgende globale Einstellung erforderlich:

adb shell settings put global debug_view_attributes 1

Mit dieser Option werden zusätzliche Informationen zur Überprüfung aller Prozesse auf dem Gerät generiert.

Layout Inspector aktiviert die Einstellung beim Start automatisch. Dadurch wird die aktuelle Vordergrundaktivität neu gestartet. Ein weiterer Neustart der Aktivität erfolgt erst, wenn das Flag manuell auf dem Gerät deaktiviert wird.

Führen Sie den folgenden ADB-Befehl aus, um das Flag zu deaktivieren:

adb shell settings delete global debug_view_attributes

Alternativ können Sie die Option Inspektion der Anzeigeattribute aktivieren in den Entwickleroptionen Ihres Geräts deaktivieren.

Eigenständiger Layout Inspector

Für eine optimale Leistung empfehlen wir, den Layout Inspector im standardmäßigen eingebetteten Modus zu verwenden. Wenn Sie den Layout Inspector wieder aus dem Editor ausdocken möchten, gehen Sie zu Datei (Android Studio unter macOS)> Einstellungen > Tools > Layout Inspector und deaktivieren Sie das Kästchen Enable embedded Layout Inspector (Eingebetteten Layout Inspector aktivieren).

Aktivieren Sie im Standalone-Modus Live-Updates, indem Sie in der Symbolleiste des Layout-Inspectors auf die Option Live-Updates klicken.