Layoutfehler mit Layout Inspector beheben

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

android layout

Mit dem Layout Inspector können Sie auch prüfen, wie oft eine komponierbare Funktion neu zusammengesetzt oder übersprungen wird. So lassen sich Probleme mit Ihrer App erkennen. Einige Programmierfehler können beispielsweise dazu führen, dass die Benutzeroberfläche zu oft neu zusammengesetzt wird, was die Leistung beeinträchtigen kann. Einige 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.

Jetzt starten

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

• Wenn Sie die Hierarchie anzeigen und die Attribute der einzelnen Komponenten prüfen möchten, verwenden Sie die Toolfenster Component Tree (Komponentenbaum) und Attributes (Attribute). Für den Zugriff auf die Attribute ist möglicherweise ein Neustart der Aktivität erforderlich.
• Wenn Sie Komponenten auswählen möchten, aktivieren Sie zuerst Tiefenprüfung ein-/ausschalten und klicken Sie dann auf die Komponenten. Alternativ können Sie auch auf die Komponenten doppelklicken, um zu Ihrem Code zu gelangen.
• Wenn Sie mit der App interagieren möchten, deaktivieren Sie Toggle Deep Inspect .
• 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.

Komponente auswählen oder isolieren

Eine Komponente rendert in der Regel etwas, das der Nutzer sehen und mit dem er interagieren kann. Im Komponentenbaum 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 im Komponentenbaum oder in der Layoutansicht darauf. Alle Layoutattribute für die ausgewählte Komponente werden im Bereich Attribute angezeigt.

Wenn Ihr Layout überlappende Komponenten enthält, können Sie alle Komponenten in einer Region sehen, wenn Sie im Modus Deep Inspect  mit der rechten Maustaste klicken. Wenn Sie eine Komponente auswählen möchten, die nicht im Vordergrund ist, klicken Sie im Komponentenbaum darauf.

Bei komplexen Layouts können Sie einzelne Komponenten isolieren, sodass nur eine Teilmenge des Layouts im Component Tree (Komponentenbaum) angezeigt und im Layout Display (Layout-Anzeige) gerendert wird. Wenn Sie eine Komponente isolieren möchten, klicken Sie im Komponentenbaum mit der rechten Maustaste auf die Komponente 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 Komponente und wählen Sie Alle anzeigen aus.

Layoutgrenzen und Ansichtslabels ausblenden

Wenn Sie den Begrenzungsrahmen oder die Komponentenlabels für ein Layoutelement ausblenden möchten, klicken Sie oben im Layout Display auf Ansichtsoptionen und aktivieren oder deaktivieren Sie Rahmen anzeigen oder Ansichtslabels anzeigen.

Snapshots der Layouthierarchie aufnehmen

Mit dem 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 Darstellung Ihres Layouts, des Komponentenbaums 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 und dann auf Snapshot exportieren.

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

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 Bitmap-Bild-Overlay laden.

• Wenn Sie ein Overlay laden möchten, wählen Sie in der Symbolleiste des Layout Inspector die Option Load Overlay aus. Das Overlay wird an das Layout angepasst.
• 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.

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 Fenster herauslösen möchten, gehen Sie zu Datei (Android Studio unter macOS) > Einstellungen > Tools > Layout Inspector und deaktivieren Sie das Kästchen Enable embedded Layout Inspector.

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

Zusätzliche Ressourcen

Inhalte ansehen

• Layout mit dem Layout Inspector debuggen (Ansichten)