Layouthierarchien optimieren

Die Compose-Methode

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Arbeiten mit Layouts in Compose

Layout Inspector in Compose →

Es ist ein weitverbreiteter Irrtum, dass die Verwendung der grundlegenden Layoutstrukturen zu den effizientesten Layouts führt. Jedes Widget und jedes Layout, das Sie Ihrer App hinzufügen, muss jedoch initialisiert, angeordnet und gezeichnet werden. Wenn Sie beispielsweise verschachtelte Instanzen von LinearLayout verwenden, kann dies zu einer übermäßig tiefen Ansichtshierarchie führen. Außerdem kann die Verschachtelung mehrerer Instanzen von LinearLayout, die den Parameter layout_weight verwenden, besonders kostspielig sein, da jedes untergeordnete Element zweimal gemessen werden muss. Dies ist besonders wichtig, wenn das Layout wiederholt aufgebläht wird, z. B. wenn es in einem RecyclerView verwendet wird.

In diesem Dokument wird gezeigt, wie Sie Layout Inspector und lint verwenden, um Ihr Layout zu untersuchen und zu optimieren.

Layout prüfen

Die Android SDK-Tools enthalten das Layout Inspector-Tool, mit dem Sie Ihr Layout analysieren können, während Ihre App ausgeführt wird. Mit diesem Tool können Sie Ineffizienzen bei der Layoutleistung erkennen.

Mit Layout Inspector können Sie laufende Prozesse auf einem verbundenen Gerät oder Emulator auswählen und dann die Layoutstruktur anzeigen. Die Ampeln in jedem Block stehen für die Leistung in den Bereichen „Measure“, „Layout“ und „Draw“ und helfen Ihnen, potenzielle Probleme zu erkennen.

Abbildung 1 zeigt beispielsweise ein Layout, das als Element in einem RecyclerView verwendet wird. Dieses Layout enthält links ein kleines Bitmap-Bild und rechts zwei gestapelte Textelemente. Es ist besonders wichtig, dass Layouts wie dieses, die mehrmals aufgebläht werden, optimiert werden, da sich die Leistungsverbesserungen multiplizieren.

Layout Inspector zeigt eine Liste der verfügbaren Geräte und ihrer laufenden Komponenten an. Wählen Sie auf dem Tab Windows Ihre Komponente aus und klicken Sie auf Layout Inspector, um die Layoutstruktur der ausgewählten Komponente aufzurufen. Abbildung 2 zeigt beispielsweise das Layout für das Listenelement aus Abbildung 1.

Layout überarbeiten

Da die Leistung des vorherigen Layouts aufgrund eines verschachtelten LinearLayout abnimmt, können Sie die Leistung möglicherweise verbessern, indem Sie das Layout vereinfachen. Das bedeutet, dass das Layout flach und breit statt schmal und tief sein sollte. Ein ConstraintLayout als Root-Knoten ermöglicht solche Layouts. Wenn Sie dieses Design in ConstraintLayout konvertieren, wird das Layout zu einer zweistufigen Hierarchie:

    <androidx.constraintlayout.widget.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/root"
      android:layout_width="match_parent"
      android:layout_height="52dp"
      android:background="#e4e6e4"
      android:padding="4dp">

      <ImageView
          android:id="@+id/image"
          android:layout_width="48dp"
          android:layout_height="48dp"
          android:background="#5c5c74"
          android:contentDescription="An example box"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/title"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_marginStart="4dp"
          android:background="#745c74"
          app:layout_constraintBottom_toTopOf="@+id/subtitle"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@id/image"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/subtitle"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:background="#7e8d6e"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="@id/title"
          app:layout_constraintTop_toBottomOf="@+id/title" />
  </androidx.constraintlayout.widget.ConstraintLayout>
    

Die Prüfung des neuen Layouts sieht so aus:

Die Vorteile davon multiplizieren sich, da dieses Layout für jedes Element in einer Liste verwendet wird.

Der Großteil des Unterschieds ist auf die Verwendung von layout_weight im LinearLayout-Design zurückzuführen, was die Messung verlangsamen kann. Dies ist ein Beispiel dafür, wie jedes Layout für bestimmte Zwecke geeignet ist. Überlegen Sie sorgfältig, ob die Verwendung von Layoutgewicht erforderlich ist.

In einigen komplexen Layouts verschwendet das System möglicherweise Ressourcen, indem es dasselbe UI-Element mehrmals misst. Dieses Phänomen wird als doppelte Besteuerung bezeichnet. Weitere Informationen zur doppelten Besteuerung und wie Sie sie vermeiden können, finden Sie unter Leistung und Ansichtshierarchien.

Lint verwenden

Es empfiehlt sich, das lint-Tool auf Ihre Layoutdateien auszuführen, um nach möglichen Optimierungen der Ansichtshierarchie zu suchen. Lint ersetzt das Tool layoutopt und bietet mehr Funktionen. Die folgenden sind Beispiele für lint Regeln:

• Zusammengesetzte Drawables verwenden. Ein LinearLayout, das einImageView und ein TextView enthält, kann effizienter als zusammengesetztes Drawable verarbeitet werden.
• Root-Frame zusammenführen. Wenn der Root eines Layouts ein FrameLayout ist, das keinen Hintergrund oder kein Padding bietet, können Sie es durch ein Merge-Tag ersetzen, das etwas effizienter ist.
• Nutzlose Blätter entfernen. Sie können ein Layout ohne untergeordnete Elemente oder ohne Hintergrund entfernen, da es nicht sichtbar ist. So erhalten Sie eine flachere und effizientere Layoutstruktur.
• Nutzlose übergeordnete Elemente entfernen. Sie können ein Layout mit einem untergeordneten Element entfernen, das keine Geschwister hat, kein ScrollView oder Root-Layout ist und keinen Hintergrund hat. Sie können die untergeordnete Ansicht auch direkt in das übergeordnete Element verschieben, um eine flachere und effizientere Layoutstruktur zu erhalten.
• Tiefe Layouts vermeiden. Layouts mit zu vielen Verschachtelungen sind schlecht für die Leistung. Verwenden Sie flachere Layouts wie ConstraintLayout, um die Leistung zu verbessern. Die maximale Standardtiefe für lint-Prüfungen beträgt 10.

Ein weiterer Vorteil des lint-Tools ist die Integration in Android Studio. Lint wird automatisch ausgeführt, wenn Sie Ihr Programm kompilieren. Mit Android Studio können Sie auch lint-Prüfungen für eine bestimmte Build-Variante oder für alle Build-Varianten ausführen.

Sie können Prüfungsprofile auch verwalten und Prüfungen in Android Studio konfigurieren. Wählen Sie dazu File > Settings > Project Settings aus. Die Seite „Inspection Configuration“ wird mit den unterstützten Prüfungen angezeigt:

Lint kann einige Probleme automatisch beheben, Vorschläge für andere Probleme machen und direkt zum fehlerhaften Code springen, um ihn zu überprüfen.

Weitere Informationen finden Sie unter Layouts und Layout ressource.