In Android Studio sind Tools zum Debuggen Ihrer Compose-Benutzeroberfläche verfügbar.
Layout Inspector
Mit dem Layout Inspector können Sie ein Compose-Layout in einer laufenden App in einem Emulator oder auf einem physischen Gerät untersuchen. Sie können den Layout Inspector verwenden, um zu prüfen, wie oft eine zusammensetzbare 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. Wenn Sie den Layout Inspector noch nicht kennen, lesen Sie die Anleitung zum Ausführen.
Anzahl der Neuzusammensetzungen abrufen
Beim Debuggen von Compose-Layouts ist es wichtig zu wissen, wann zusammensetzbare Funktionen neu zusammengesetzt werden, um zu verstehen, ob die Benutzeroberfläche richtig implementiert ist. Wenn sie beispielsweise zu oft neu zusammengesetzt wird, führt Ihre App möglicherweise mehr Vorgänge aus als nötig. Andererseits können Komponenten, die nicht neu zusammengesetzt werden, wenn Sie es erwarten, zu unerwartetem Verhalten führen.
Der Layout Inspector zeigt Ihnen, wann einzelne zusammensetzbare Funktionen in Ihrer Layout-Hierarchie neu zusammengesetzt oder übersprungen wurden, während Sie mit Ihrer App interagieren. In Android Studio werden die Neuzusammensetzungen hervorgehoben, damit Sie sehen können, wo in der Benutzeroberfläche die zusammensetzbaren Funktionen neu zusammengesetzt werden.
Abbildung 1 : Neuzusammensetzungen werden im Layout Inspector hervorgehoben.
Der hervorgehobene Bereich zeigt ein Farbverlaufs-Overlay der zusammensetzbaren Funktion im Bildbereich des Layout Inspectors. Es verschwindet allmählich, sodass Sie sehen können, wo in der Benutzeroberfläche die zusammensetzbare Funktion mit den meisten Neuzusammensetzungen zu finden ist. Wenn eine zusammensetzbare Funktion häufiger neu zusammengesetzt wird als eine andere, erhält die erste zusammensetzbare Funktion eine stärkere Farbverlaufs-Overlay-Farbe. Wenn Sie im Layout Inspector auf eine zusammensetzbare Funktion doppelklicken, gelangen Sie zum entsprechenden Code zur Analyse.
Öffnen Sie das Fenster Layout Inspector und stellen Sie eine Verbindung zum App-Prozess her. In der Komponentenstruktur gibt es zwei Spalten neben der Layout Hierarchie. In der ersten Spalte wird die Anzahl der Zusammensetzungen für jeden Knoten angezeigt, in der zweiten Spalte die Anzahl der Überspringungen. Wenn Sie einen zusammensetzbaren Knoten auswählen, werden die Dimensionen und Parameter der zusammensetzbaren Funktion angezeigt. Bei einer Inline-Funktion können die Parameter nicht angezeigt werden. Ähnliche Informationen finden Sie auch im Bereich Attribute , wenn Sie eine zusammensetzbare Funktion in der Komponentenstruktur oder der Layoutanzeige auswählen.
Wenn Sie die Anzahl zurücksetzen, können Sie Neuzusammensetzungen oder Überspringungen bei einer bestimmten Interaktion mit Ihrer App besser nachvollziehen. Klicken Sie dazu oben im Bereich Komponentenstruktur auf Zurücksetzen.
Abbildung 3 : Zähler für Zusammensetzung und Überspringen im Layout Inspector aktivieren.
Compose-Semantik
In Compose wird die Benutzeroberfläche auf eine alternative Weise beschrieben, die für Bedienungshilfen und das Testframework verständlich ist. Mit dem Layout Inspector können Sie semantische Informationen in Ihren Compose-Layouts untersuchen.
Wenn Sie einen Compose-Knoten auswählen, können Sie im Bereich Attribute prüfen, ob er semantische Informationen direkt deklariert, Semantik von seinen untergeordneten Elementen zusammenführt oder beides. Wenn Sie schnell herausfinden möchten, welche Knoten deklarierte oder zusammengeführte Semantik enthalten, wählen Sie im Bereich Komponentenstruktur das Drop-down-Menü Ansichtsoptionen aus und wählen Sie Semantik-Ebenen hervorheben aus. Dadurch werden nur die Knoten in der Struktur hervorgehoben, die Semantik enthalten. Sie können mit der Tastatur schnell zwischen ihnen navigieren.
Compose-UI-Prüfung
Damit Sie in Jetpack Compose besser adaptive und barrierefreie Benutzeroberflächen erstellen können, bietet Android Studio in der Compose-Vorschau einen UI-Prüfmodus. Diese Funktion ähnelt dem Accessibility Scanner für Ansichten.
Wenn Sie den Compose-UI-Prüfmodus in einer Compose-Vorschau aktivieren, prüft Android Studio automatisch Ihre Compose-Benutzeroberfläche und schlägt Verbesserungen vor, um sie barrierefreier und adaptiver zu gestalten. Android Studio prüft, ob Ihre Benutzeroberfläche auf verschiedenen Bildschirmgrößen funktioniert. Im Bereich Probleme werden die erkannten Probleme angezeigt, z. B. Text, der auf großen Bildschirmen gestreckt wird, oder ein geringer Farbkontrast.
Klicken Sie in der Compose-Vorschau auf das Symbol „UI-Prüfung“ , um auf diese Funktion zuzugreifen:
Bei der UI-Prüfung wird automatisch eine Vorschau Ihrer Benutzeroberfläche in verschiedenen Konfigurationen angezeigt und Probleme hervorgehoben, die in verschiedenen Konfigurationen gefunden wurden. Wenn Sie im Bereich Probleme auf ein Problem klicken, werden die Details des Problems, Vorschläge zur Behebung und die Renderings angezeigt, die den Bereich des Problems hervorheben.
Mit KI beheben
Bei Problemen, die im UI-Prüfmodus erkannt wurden, können Sie den KI-Agenten verwenden, um Codekorrekturen vorzuschlagen und anzuwenden. Klicken Sie im Bereich Probleme bei einem Problem auf die Schaltfläche Mit KI beheben. Der Agent analysiert das Problem und Ihren Code, um Änderungen vorzuschlagen, mit denen das Problem mit der Barrierefreiheit oder der Anpassung behoben wird.
