In Android Studio sind Tools zur Fehlerbehebung für die Compose-Benutzeroberfläche verfügbar.
Layout Inspector
Mit dem Layout-Inspektor können Sie ein Compose-Layout in einer laufenden App in einem Emulator oder auf einem physischen Gerät prüfen. 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. Einige Programmierfehler können beispielsweise 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 dass Ihre Änderungen an der Benutzeroberfläche auf dem Bildschirm angezeigt werden. Wenn Sie den Layout-Inspektor noch nicht kennen, finden Sie hier eine Anleitung.
Anzahl der Neuzusammensetzungen abrufen
Wenn Sie Ihre Compose-Layouts debuggen, ist es wichtig zu wissen, wann sich Composeables neu zusammensetzen, um zu verstehen, ob Ihre Benutzeroberfläche richtig implementiert ist. Wenn die App beispielsweise zu oft neu zusammengesetzt wird, führt sie möglicherweise mehr Arbeit aus, als erforderlich ist. Andererseits können Komponenten, die nicht neu zusammengesetzt werden, wenn Sie dies erwarten, zu unerwartetem Verhalten führen.
Im Layout-Inspektor sehen Sie, ob einzelne Composeables in Ihrer Layouthierarchie neu zusammengesetzt oder übersprungen wurden, während Sie mit Ihrer App interagieren. In Android Studio werden die Neuzusammensetzungen hervorgehoben, damit Sie leichter feststellen können, wo in der Benutzeroberfläche Ihre Composeables neu zusammengesetzt werden.
Abbildung 1: Neuzusammensetzungen werden im Layout Inspector hervorgehoben.
Der hervorgehobene Bereich zeigt ein Farbverlaufs-Overlay des Composeables im Bildbereich des Layout-Inspektors. Es verschwindet nach und nach, damit Sie eine Vorstellung davon bekommen, wo in der Benutzeroberfläche sich das Composeable mit den meisten Neuzusammensetzungen befindet. Wenn ein Composed-Element häufiger neu zusammengesetzt wird als ein anderes, erhält das erste Composed-Element eine stärkere Farbüberlagerung mit einem Farbverlauf. Wenn Sie im Layout-Inspecteur auf ein Composeable doppelklicken, gelangen Sie zum entsprechenden Code für die Analyse.
Öffnen Sie das Fenster Layout-Inspektor und stellen Sie eine Verbindung zu Ihrem App-Prozess her. Im Komponentenbaum werden neben der Layouthierarchie zwei Spalten angezeigt. In der ersten Spalte sehen Sie die Anzahl der Zusammensetzungen für jeden Knoten und in der zweiten Spalte die Anzahl der Überspringungen für jeden Knoten. Wenn Sie einen zusammensetzbaren Knoten auswählen, werden die Dimensionen und Parameter des zusammensetzbaren Elements angezeigt, es sei denn, es handelt sich um eine Inline-Funktion. In diesem Fall können die Parameter nicht angezeigt werden. Ähnliche Informationen werden auch im Bereich Attribute angezeigt, wenn Sie im Komponentenbaum oder im Layout ein Composeable auswählen.
Wenn Sie die Zählung zurücksetzen, können Sie besser nachvollziehen, welche Komponenten bei einer bestimmten Interaktion mit Ihrer App neu zusammengestellt oder übersprungen wurden. Klicken Sie dazu oben im Bereich Komponentenstruktur auf Zurücksetzen.
Abbildung 3 Aktiviere im Layout Inspector die Option „Komposition“ und den „Überspringzähler“.
Zusammensetzungssemantik
In Compose beschreiben Semantiken Ihre Benutzeroberfläche auf alternative Weise, die für Barrierefreiheitsdienste und das Testframework verständlich ist. Mit dem Layout-Inspektor können Sie semantische Informationen in Ihren Compose-Layouts prüfen.
Abbildung 4: Semantische Informationen, die mit dem Layout-Prüftool angezeigt werden.
Wenn Sie einen Compose-Knoten auswählen, können Sie im Bereich Attribute prüfen, ob er semantische Informationen direkt deklariert, die Semantik seiner untergeordneten Elemente zusammenführt oder beides. Wenn Sie schnell sehen möchten, welche Knoten deklarierte oder zusammengeführte Semantik enthalten, wählen Sie im Bereich Komponentenstruktur das Drop-down-Menü Ansichtsoptionen aus und dann Semantikebenen hervorheben. Dadurch werden nur die Knoten im Baum hervorgehoben, die Semantik enthalten. Sie können dann mit der Tastatur schnell zwischen ihnen wechseln.
UI-Prüfung erstellen
Damit Sie in Jetpack Compose adaptivere und barrierefreiere 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 Prüfmodus für die Compose-Benutzeroberfläche in einer Compose-Vorschau aktivieren, prüft Android Studio automatisch Ihre Compose-Benutzeroberfläche und schlägt Verbesserungen vor, um sie barrierefreier und anpassungsfähiger zu machen. In Android Studio wird geprü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 gedehnt wird, oder ein geringer Farbkontrast.
Klicken Sie in der Vorschau der Mitteilung auf das Symbol für die 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 in den verschiedenen Konfigurationen werden hervorgehoben. Wenn Sie im Bereich Probleme auf ein Problem klicken, sehen Sie die Details des Problems, vorgeschlagene Lösungen und die Renderings, in denen der Bereich des Problems hervorgehoben wird.
