Layoutfehler mit Layout Inspector beheben

Mit dem Layout Inspector in Android Studio kannst du Fehler im Layout deiner App beheben, indem du zeigt eine Ansichtshierarchie, in der Sie die Eigenschaften der einzelnen Ansichten überprüfen können. Mit dem Layout-Inspektor können Sie das App-Layout mit Design-Mockups vergleichen, eine vergrößerte oder 3D-Ansicht Ihrer App anzeigen und Details des Layouts zur Laufzeit prüfen. Dies ist besonders nützlich, wenn Ihr Layout während der Laufzeit erstellt wird und nicht als vollständig in XML und das Layout verhält sich unerwartet.

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

Erste Schritte

Wenn Sie den Layout-Inspektor starten möchten, führen Sie Ihre App aus, rufen Sie das Fenster Laufende Geräte auf und klicken Sie auf Layout-Inspektor ein-/ausschalten Schaltfläche zum Ein-/Ausschalten des eingebetteten Layout-Inspektors. Wenn Sie zwischen mehreren Geräten oder Projekten wechseln, stellt der Layout-Inspektor automatisch eine Verbindung zu den debuggbaren Prozessen her, die im Vordergrund des verbundenen Geräts ausgeführt werden.

So erledigen Sie einige häufige Aufgaben:

  • Um eine Hierarchie anzuzeigen und die Eigenschaften der einzelnen Ansichten zu überprüfen, verwenden Sie die Toolfenster Komponentenstruktur und Attribute Layout Inspector kann erfordern einen Neustart der Aktivität, um auf die Attribute zugreifen zu können. 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 wechseln möchten, aktivieren Sie Detaillierte Prüfung aktivieren/deaktivieren Schaltfläche zum Umschalten der Deep-Inspection.
  • Wenn Sie mit der App interagieren möchten, deaktivieren Sie Detaillierte Prüfung aktivieren/deaktivieren Schaltfläche „Tiefenprüfung“ ein-/ausschalten.
  • Wenn Sie physische Geräte prüfen möchten, aktivieren Sie die Gerätespiegelung.
  • Um Live-Updates beim Aktualisieren der Benutzeroberfläche Ihrer App zu aktivieren, prüfen Sie, Live-Bearbeitung ist aktiviert.
  • Wenn Sie den 3D-Modus nutzen möchten, machen Sie einen Layout Inspector-Snapshot. Layout Inspector-Snapshot und dann klicken Sie auf 3D-Modus 3D-Schaltfläche.

Ansicht auswählen oder isolieren

Eine Ansicht zeigt normalerweise etwas, das der Nutzer sehen und mit dem er interagieren kann. Der Komponentenbaum zeigt die Hierarchie Ihrer App in Echtzeit mit jeder Ansichtskomponente an. So können Sie das Layout Ihrer App leichter debuggen, da Sie die Elemente in Ihrer App und die zugehörigen Werte visualisieren können.

Klicken Sie in der Komponentenstruktur oder im Layout auf die gewünschte Ansicht, um sie auszuwählen. Alle Layoutattribute für die ausgewählte Ansicht werden im Bereich Attribute angezeigt.

Wenn Ihr Layout sich überschneidende Ansichten enthält, können Sie alle Ansichten in einem Bereich sehen, indem Sie im Modus Detaillierte PrüfungSchaltfläche „Tiefenprüfung“ ein-/ausschalten mit der rechten Maustaste klicken. Zum Auswählen eine Ansicht, die sich nicht im Vordergrund befindet, klicken Sie in der Komponentenstruktur darauf oder Drehen Sie das Layout.

Wenn Sie mit komplexen Layouts arbeiten, können Sie einzelne Ansichten isolieren, sodass nur ein Teil des Layouts im Komponentenbaum angezeigt und im Layout-Display gerendert wird. Wenn Sie eine Ansicht isolieren möchten, erstellen Sie einen Snapshot Layout Inspector-Snapshot, klicken Sie im Komponentenbaum mit der rechten Maustaste auf die Ansicht und wählen Sie Nur untergeordneten Teilbaum anzeigen oder Nur übergeordnete Elemente anzeigen aus. Um zur Vollansicht zurückzukehren, klicken Sie mit der rechten Maustaste wählen Sie Alle anzeigen aus. Sie müssen einen Snapshot erstellen, bevor Sie eine Ansicht isolieren.

Layoutrahmen ausblenden und Labels anzeigen

Wenn Sie den Begrenzungsrahmen oder die Ansichtslabels für ein Layoutelement ausblenden möchten, klicken Sie oben in der Layoutanzeige auf Ansichtsoptionen Schaltfläche „View Options“ (Ansichtsoptionen) und aktivieren oder deaktivieren Sie Rahmen anzeigen oder Ansichtslabel anzeigen.

Snapshots der Layouthierarchie erfassen

Mit Layout Inspector können Sie Momentaufnahmen der Layouthierarchie Ihrer laufenden App speichern, damit Sie sie mit anderen teilen oder später darauf zurückgreifen können.

Snapshots erfassen die Daten, die Sie normalerweise sehen, wenn Sie das Layout Prüftool, einschließlich eines detaillierten 3D-Renderings Ihres Layouts, der Komponentenstruktur Ihres Layouts zum Anzeigen, Schreiben oder Hybrid-Layout und detaillierte Attribute für die einzelnen Komponente Ihrer Benutzeroberfläche. Wenn Sie einen Snapshot speichern möchten, klicken Sie auf Snapshot exportieren/importierenSnapshot-Export/Import und dann auf Snapshot exportieren.

Klicken Sie auf Snapshot importieren, um einen zuvor gespeicherten Layout-Inspection-Snapshot zu laden.

3D-Modus

Die Layoutanzeige bietet eine erweiterte 3D-Visualisierung Ihres App-Ansichtshierarchie während der Laufzeit. Erstellen Sie einen Snapshot, um diese Funktion zu verwenden Snapshot-Export/-Import, Klick die Schaltfläche 3D-Modus 3D-Schaltfläche in der Snapshot Inspector-Fenster an und drehen Sie es durch Ziehen der Maus.

Layout Inspector: 3D-Ansicht
Abbildung 2. Gedrehte 3D-Ansicht eines Layouts.
Layout-Inspektor: Ansicht für Ebenenabstand
Abbildung 3. So vergrößern oder verkleinern Sie die Ebenen des Layouts: verwenden Sie den Schieberegler Ebenenabstand.

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 ein Bitmap-Bild-Overlay in den Layout-Inspektor laden.

  • Wenn Sie ein Overlay laden möchten, wählen Sie in der Symbolleiste des Layout-Inspektors die Option Overlay laden  aus. Das Overlay wird an das Layout angepasst.
  • Passen Sie die Transparenz des Overlays mit dem Schieberegler Overlay-Alpha an.
  • 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 einen Emulator oder ein physisches Gerät. Mit dem Layout-Inspektor können Sie prüfen, wie oft ein Composeable neu zusammengesetzt oder übersprungen wird. So lassen sich Probleme mit Ihrer App leichter erkennen. Beispielsweise können einige Programmierfehler dazu führen, dass Ihre Benutzeroberfläche übermäßig neu zusammengesetzt wird, was zu einer schlechten Leistung führen kann. Einige Programmierfehler können verhindern, dass Ihre Benutzeroberfläche neu zusammengesetzt wird, und somit verhindern, dass Ihre Änderungen an der Benutzeroberfläche auf dem Bildschirm angezeigt werden.

Weitere Informationen zum Layout-Inspektor für Compose

Inspektion der Anzeigeattribute

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

adb shell settings put global debug_view_attributes 1

Diese Option generiert zusätzliche Informationen zur Prüfung auf allen Prozesse auf dem Gerät.

Die Einstellung wird beim Starten des Layout-Inspect-Tools automatisch aktiviert. Dadurch wird die aktuelle Aktivität im Vordergrund neu gestartet. Es wird kein weiterer Neustart der Aktivität, sofern die Kennzeichnung nicht manuell auf dem Gerät deaktiviert ist.

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-Inspektor im standardmäßigen eingebetteten Modus zu verwenden. Wenn Sie den Layout-Inspektor nicht mehr einbetten möchten, klicken Sie auf Datei (Android Studio auf macOS) > Einstellungen > Tools > Layout-Inspektor und entfernen Sie das Häkchen bei Eingebetteten Layout-Inspektor aktivieren.

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