Mit dem Layout Inspector in Android Studio können Sie Fehler im Layout Ihrer App beheben. Dazu wird eine Ansichtshierarchie angezeigt und Sie können die Eigenschaften jeder Ansicht prüfen. Mit dem Layout Inspector können Sie Ihr App-Layout mit Design-Mockups vergleichen, eine vergrößerte oder 3D-Ansicht Ihrer App anzeigen und Details des Layouts zur Laufzeit untersuchen. Dies ist besonders nützlich, wenn das Layout zur Laufzeit und nicht vollständig in XML erstellt wird und sich das Layout unerwartet verhält.
Mit der Layoutvalidierung können Sie Layouts auf verschiedenen Geräten und Anzeigekonfigurationen gleichzeitig in der Vorschau ansehen, einschließlich variabler Schriftgrößen oder Nutzersprachen, sodass Sie problemlos eine Vielzahl von häufigen Layoutproblemen testen können.
Um den Layout Inspector zu öffnen, führen Sie die App auf einem verbundenen Gerät oder Emulator aus und wählen dann Tools > Layout Inspector aus. Beim Wechsel zwischen mehreren Geräten oder Projekten stellt der Layout Inspector automatisch eine Verbindung zu den Debug-fähigen Prozessen her, die im Vordergrund auf dem verbundenen Gerät ausgeführt werden.
Abbildung 1: Snapshot des Layout Inspectors für die Sunflower-Beispiel-App. Im Layout Inspector von links nach rechts werden Komponentenstruktur, Layoutanzeige und Attribute angezeigt.
- Komponentenstruktur: Die Hierarchie der Ansichten im Layout.
- Layoutanzeige: Rendering des Layouts der App, wie es auf dem Gerät oder Emulator angezeigt wird, wobei für jede Ansicht Layoutgrenzen angezeigt werden.
- Attribute: Die Layoutattribute für die ausgewählte Ansicht. Der Layout Inspector erfordert einen Aktivitätsneustart, um auf die Attribute zugreifen zu können. Weitere Informationen finden Sie unter Aktivitätsneustart.
Einführung in den Layout-Editor
Integrierter Layout Inspector (experimentell)
Ab Android Studio Hedgehog können Sie den Layout Inspector direkt im Fenster „Aktive Geräte“ ausführen. Diese experimentelle Funktion verbessert die Leistung des Layout Inspectors erheblich, spart Platz auf dem Bildschirm und hilft Ihnen, Ihren UI-Debugging-Workflow in einem einzigen Toolfenster zu organisieren. So aktivieren Sie den eingebetteten Modus:
- Unter Windows: Gehen Sie zu File > Settings > Experimental > Layout Inspector.
- Unter macOS rufen Sie Android Studio > Einstellungen > Experimentell > Layout Inspector auf.
Hier finden Sie Informationen zum Einstieg und erfahren, wie Sie einige häufige Aufgaben ausführen:
- Um den Layout Inspector zu starten, klicken Sie im Fenster Laufende Geräte auf Layout Inspector ein-/ausblenden
. - Verwenden Sie die Toolfenster Komponentenstruktur und Attributbereich, um die Hierarchie anzusehen und die Eigenschaften der einzelnen Ansichten zu überprüfen.
- Aktivieren Sie Deep Inspect ein-/ausblenden
, um Ansichten durch einmaliges Klicken direkt auf die Ansichten auszuwählen oder durch Doppelklicken auf Code Code zu öffnen. - Deaktivieren Sie Deep Inspect ein-/ausschalten , um mit der App zu interagieren.
- Aktivieren Sie die Gerätespiegelung, um physische Geräte zu prüfen.
- Wenn Sie den 3D-Modus verwenden möchten, nehmen Sie einen Layoutinspektor-Snapshot
auf.
Abbildung 2: Integrierter Layout Inspector für Jetchat-App
Live-Updates
Über die Layoutanzeige wird das Layout Ihrer App so gerendert, wie es auf Ihrem Gerät oder Emulator erscheint. Dabei werden für jede Ansicht Layoutgrenzen angezeigt. Sie können auf jede Komponente klicken, um sie zu überprüfen.
Der Live Layout Inspector bietet vollständige Echtzeiteinblicke in die Benutzeroberfläche Ihrer App, während sie auf einem Gerät oder Emulator mit API-Level 29 oder höher bereitgestellt wird.
Um den Live Layout Inspector zu aktivieren, wählen Sie in der Symbolleiste Layout Inspector die Option Live Updates
aus.
Der Live Layout Inspector enthält eine dynamische Layouthierarchie, in der die Komponentenstruktur und die Layoutanzeige aktualisiert werden, wenn sich die Ansichten auf dem Gerät ändern.
Ansicht auswählen oder isolieren
Eine Ansicht zeichnet in der Regel etwas, das die Nutzenden sehen und mit dem sie interagieren können. Die Komponentenstruktur zeigt die Hierarchie Ihrer App mit jeder Komponente der Ansicht in Echtzeit an. So können Sie Fehler im App-Layout beheben, da Sie die Elemente in Ihrer App und die zugehörigen Werte visualisieren können.
Sie können eine Ansicht auswählen, indem Sie in der Komponentenstruktur oder der Layoutanzeige darauf klicken. Alle Layoutattribute für die ausgewählte Ansicht werden im Bereich Attribute angezeigt.
Wenn Ihr Layout überlappende Ansichten umfasst, können Sie eine Ansicht auswählen, die nicht im Vordergrund liegt. Klicken Sie dazu in der Komponentenstruktur darauf oder drehen Sie das Layout.
Für die Arbeit mit komplexen Layouts können Sie einzelne Ansichten isolieren, sodass nur ein Teil des Layouts in der Komponentenstruktur angezeigt und auf der Layoutanzeige gerendert wird.
Abbildung 3: Wenn Sie eine Ansicht isolieren möchten, klicken Sie in der Komponentenstruktur mit der rechten Maustaste auf die Ansicht und wählen Sie Nur Unterstruktur anzeigen oder Nur übergeordnete Elemente anzeigen aus.
Um zur Vollansicht zurückzukehren, klicken Sie mit der rechten Maustaste auf die Ansicht und wählen Sie Alle anzeigen aus.
Layoutrahmen ausblenden und Labels anzeigen
Um den Begrenzungsrahmen oder die Ansichtslabels für ein Layoutelement auszublenden, klicken Sie oben in der Layoutanzeige auf Ansichtsoptionen 
und aktivieren bzw. deaktivieren Sie Rahmenlinien anzeigen oder Ansichtslabel anzeigen.
Abbildung 4: Klicken Sie in der Symbolleiste des Layout Inspector auf das zweite View Options-Element, um Layoutränder und Ansichtslabels auszublenden.
3D-Modus
Die Layoutanzeige bietet eine erweiterte 3D-Visualisierung der Ansichtshierarchie Ihrer App zur Laufzeit. Klicken Sie dazu im Fenster „Live Layout Inspector“ auf die Schaltfläche 3D Mode (3D-Modus) 
und drehen Sie das Element mit der Maus.
Abbildung 5: Gedrehte 3D-Ansicht eines Layouts
Abbildung 6: Mit dem Schieberegler Ebenenabstand können Sie die Ebenen des Layouts maximieren oder verkleinern.
App-Layout mit einem Referenzbild-Overlay vergleichen
Wenn Sie Ihr App-Layout mit einem Referenzbild vergleichen möchten, z. B. einem UI-Mockup, können Sie im Layout Inspector ein Bitmapbild-Overlay laden.
- Wählen Sie zum Laden eines Overlays in der Symbolleiste von Layout Inspector die Option Overlay laden
aus. Das Overlay wird an das Layout angepasst. - Die Transparenz des Overlays können Sie mit dem Schieberegler Overlay Alpha anpassen.
- Wenn Sie das Overlay entfernen möchten, klicken Sie auf Overlay löschen
.
Schnappschüsse der Layouthierarchie aufnehmen
Mit dem Layout Inspector können Sie Snapshots der Layouthierarchie Ihrer laufenden App speichern, sodass Sie sie einfach mit anderen teilen oder später darauf zurückgreifen können.
Snapshots erfassen die Daten, die normalerweise bei Verwendung des Layout Inspectors zu sehen sind, darunter ein detailliertes 3D-Rendering Ihres Layouts, die Komponentenstruktur Ihres Ansichts-, Schreib- oder Hybridlayouts und detaillierte Attribute für jede Komponente Ihrer UI. So speichern Sie einen Snapshot:
- Öffnen Sie das Layout Inspector.
- Der Layout Inspector stellt automatisch eine Verbindung zum App-Prozess her. Ist dies nicht der Fall, wählen Sie den Anwendungsprozess aus dem Drop-down-Menü aus.
- Wenn Sie einen Snapshot erstellen möchten, klicken Sie in der Symbolleiste des Layout Inspectors auf Snapshot exportieren
. - Geben Sie im angezeigten Systemdialogfeld den Namen und den Speicherort für den Snapshot an. Die Datei muss mit der Erweiterung
*.ligespeichert werden.
Sie können dann einen Layout Inspector-Snapshot laden, indem Sie in der Hauptmenüleiste File > Open (Datei > Öffnen) auswählen und eine *.li-Datei öffnen.
Abbildung 7: Im Layout Inspector einen Snapshot erstellen
„Compose“ prüfen
Mit dem Layout Inspector können Sie ein Compose-Layout innerhalb einer laufenden App in einem Emulator oder auf einem physischen Gerät prüfen. Mit dem Layout Inspector können Sie prüfen, wie oft eine zusammensetzbare Funktion neu zusammengesetzt oder übersprungen wird. Dadurch lassen sich Probleme mit Ihrer App ermitteln. Einige Codefehler können beispielsweise eine übermäßige Neuzusammensetzung Ihrer UI zwingen, was zu einer schlechten Leistung führen kann. Einige Codierungsfehler können dazu führen, dass die UI nicht neu zusammengesetzt und somit auch nicht auf dem Bildschirm angezeigt wird.
Weitere Informationen zum Layout Inspector für Compose
Aktivitätsneustarts vermeiden
Für den Layout Inspector ist eine der folgenden globalen Einstellungen erforderlich, um richtig zu funktionieren. Wenn Sie keine globale Einstellung angeben, legt der Layout Inspector automatisch eine fest.
adb shell settings put global debug_view_attributes_application_package <processname>Diese Option generiert zusätzliche Informationen zur Prüfung des angegebenen Prozesses.
adb shell settings put global debug_view_attributes 1Diese Option generiert zusätzliche Informationen zur Prüfung aller Prozesse auf dem Gerät.
Das Ändern einer globalen Einstellung kann dazu führen, dass die Aktivität neu gestartet wird. Wenn du einen Neustart deiner Aktivitäten vermeiden möchtest, kannst du entweder die Einstellungen in Android Studio oder die Entwickleroptionen in den Geräteeinstellungen ändern.
Um die automatische Aktualisierung in Android Studio zu aktivieren, öffnen Sie Run/Debug Configurations, indem Sie im Menü Run > Edit Configurations auswählen. Rufen Sie dann den Tab Verschiedenes auf und klicken Sie unter Optionen des Layout Inspectors das Kästchen Mit Layout Inspector verbinden, ohne Aktivität neu zu starten an.
Abbildung 12: Aktivieren Sie die automatische Aktualisierung unter „Run/Debug Configurations“.
Alternativ können Sie auch die Entwickleroptionen Ihres Geräts aktivieren und dann in den Entwicklereinstellungen des Geräts die Option Attributprüfung der Ansicht aktivieren aktivieren.
Layoutvalidierung
Die Layout Validation ist ein visuelles Tool, mit dem Sie Layouts für verschiedene Geräte und Anzeigekonfigurationen gleichzeitig in der Vorschau anzeigen können. So lassen sich Probleme in Ihren Layouts früher erkennen. Klicken Sie rechts oben im IDE-Fenster auf den Tab Layout Validation (Layoutvalidierung), um auf diese Funktion zuzugreifen:
Abbildung 13: Tab „Layoutvalidierung“.
Wenn Sie zwischen den verfügbaren Konfigurationssätzen wechseln möchten, wählen Sie oben im Fenster "Layout Validation" (Layoutvalidierung) im Drop-down-Menü Referenzgeräte eine der folgenden Optionen aus:
- Referenzgeräte
- Benutzerdefiniert
- Farbenblind
- Schriftgrößen
Abbildung 14: Drop-down-Menüoption „Referenzgeräte“.
Referenzgeräte
Referenzgeräte sind eine Reihe von Geräten, mit denen wir dir empfehlen. Dazu gehören Smartphones, faltbare Smartphones, Tablets und Computer. In der Vorschau siehst du, wie dein Layout auf diesen Referenzgeräten aussieht:
Abbildung 15: Verweisen Sie auf Gerätevorschauen im Layout Validation Tool.
Benutzerdefiniert
Um eine Anzeigekonfiguration für die Vorschau anzupassen, wählen Sie aus verschiedenen Einstellungen wie Sprache, Gerät oder Bildschirmausrichtung aus:
Abbildung 16: Konfigurieren Sie eine benutzerdefinierte Anzeige im Tool zur Layoutvalidierung.
Farbenblind
Validieren Sie Ihr Layout mit Simulationen gängiger Arten von Farbenblindheit, um die Barrierefreiheit Ihrer Anwendung für farbenblinde Nutzer zu verbessern:
Abbildung 17: Vorschauen von Simulationen der Farbenblindheit im Tool Layout Validation
Schriftgrößen
Validieren Sie Ihre Layouts in verschiedenen Schriftgrößen und verbessern Sie die Barrierefreiheit Ihrer App für sehbehinderte Nutzer, indem Sie Ihre Layouts mit größeren Schriftarten testen:
Abbildung 18: Vorschau mit variabler Schriftgröße im Tool Layout Validation