In Android Studio sind Tools zum Debuggen Ihrer Compose-UI verfügbar.
Layout-Inspector
Mit dem Layout Inspector kannst du ein Compose-Layout in 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. So können Sie Probleme mit Ihrer App erkennen. Beispielsweise können einige Programmierfehler dazu führen, dass die Benutzeroberfläche übermäßig oft neu zusammengesetzt wird, was zu einer schlechten Leistung führen kann. Einige Programmierfehler können verhindern, dass die Benutzeroberfläche neu zusammengesetzt wird und Ihre Änderungen an der Benutzeroberfläche auf dem Bildschirm angezeigt werden. Wenn Sie den Layout-Inspektor noch nicht kennen, finden Sie hier eine Anleitung, wie Sie ihn 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 beispielsweise zu viele Neuzusammensetzungen stattfinden, führt Ihre App möglicherweise mehr Arbeit als nötig aus. Andererseits können Komponenten, die nicht wie erwartet neu zusammengesetzt werden, zu unerwartetem Verhalten führen.
Der Layout Inspector zeigt Ihnen, wenn Sie mit Ihrer App interagieren, ob einzelne zusammensetzbare Funktionen in Ihrer Layouthierarchie neu zusammengesetzt oder übersprungen wurden. In Android Studio werden die Neuzusammensetzungen hervorgehoben, damit Sie sehen, wo in der Benutzeroberfläche die zusammensetzbaren Funktionen neu zusammengesetzt werden.
Abbildung 1. Rekombinationen werden im Layout-Inspektor hervorgehoben.
Der hervorgehobene Teil zeigt eine Farbverlaufsüberlagerung des Composables im Bildbereich des Layout Inspectors. Er verschwindet nach und nach, sodass Sie eine Vorstellung davon bekommen, wo sich das Composable mit den meisten Neuzusammensetzungen in der Benutzeroberfläche befindet. Wenn ein Compose-Element häufiger neu zusammengesetzt wird als ein anderes, erhält das erste Compose-Element eine stärkere Farbverlaufsüberlagerung. Wenn Sie im Layout-Inspektor auf ein Composable doppelklicken, gelangen Sie zum entsprechenden Code für die Analyse.
Öffnen Sie das Fenster Layout Inspector und stellen Sie eine Verbindung zum App-Prozess her. In der Komponentenstruktur werden neben der Layouthierarchie zwei Spalten angezeigt. In der ersten Spalte wird die Anzahl der Kompositionen für jeden Knoten und in der zweiten Spalte die Anzahl der Übersprünge für jeden Knoten angezeigt. Wenn Sie einen Knoten vom Typ „Composable“ auswählen, werden die Dimensionen und Parameter des Composables angezeigt, es sei denn, es handelt sich um eine Inline-Funktion. In diesem Fall können die Parameter nicht angezeigt werden. Ähnliche Informationen finden Sie auch im Bereich Attribute, wenn Sie eine komponierbare Funktion aus der Komponentenstruktur oder der Layoutanzeige auswählen.
Wenn Sie die Anzahl zurücksetzen, können Sie Rekompositionen oder Übersprünge während einer bestimmten Interaktion mit Ihrer App besser nachvollziehen. Wenn Sie die Anzahl zurücksetzen möchten, klicken Sie oben im Bereich Komponentenbaum auf Zurücksetzen.
Abbildung 3. Aktiviere den Zähler für die Neuzusammensetzung und das Überspringen im Layout-Inspektor.
Semantik in Compose
In Compose wird die Benutzeroberfläche mithilfe von Semantik auf eine alternative Weise beschrieben, die für Bedienungshilfen und das Test-Framework verständlich ist. Mit dem Layout Inspector können Sie semantische Informationen in Ihren Compose-Layouts prüfen.
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 Komponentenbaum das Drop-down-Menü Ansichtsoptionen und dann Semantikebenen hervorheben aus. Dadurch werden nur die Knoten im Baum hervorgehoben, die Semantik enthalten. Sie können dann mit der Tastatur schnell zwischen ihnen navigieren.
Compose-UI-Prüfung
Damit Sie in Jetpack Compose anpassungsfähigere 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-UI und schlägt Verbesserungen vor, um die UI barrierefreier und anpassungsfähiger zu machen. Android Studio prüft, ob Ihre Benutzeroberfläche auf verschiedenen Bildschirmgrößen funktioniert. Im Bereich Probleme werden die erkannten Probleme angezeigt, z. B. gestreckter Text auf großen Bildschirmen oder geringer Farbkontrast.
Klicken Sie auf das Symbol für die UI-Prüfung in der Compose-Vorschau, um auf diese Funktion zuzugreifen:
Bei der UI-Prüfung wird automatisch eine Vorschau Ihrer UI in verschiedenen Konfigurationen angezeigt und Probleme in verschiedenen Konfigurationen werden hervorgehoben. Wenn Sie im Bereich Probleme auf ein Problem klicken, werden die Details des Problems, vorgeschlagene Korrekturen und die Renderings angezeigt, in denen der Bereich des Problems hervorgehoben ist.
Mit KI korrigieren
Bei Problemen, die im UI-Prüfmodus erkannt werden, können Sie den KI-Agenten verwenden, um Codekorrekturen vorzuschlagen und anzuwenden. Klicken Sie im Bereich Probleme bei einem Problem auf den Button Mit KI beheben. Der KI-Agent analysiert das Problem und Ihren Code, um Änderungen vorzuschlagen, mit denen das Problem mit der Barrierefreiheit oder Anpassung behoben werden kann.
