Layouthierarchien optimieren

Funktion „Schreiben“ ausprobieren

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfahren Sie, wie Sie in der Funktion „Compose“ mit Layouts arbeiten.

Layout Inspector in Compose →

Es ist ein weitverbreiteter Irrglaube, dass die Verwendung der grundlegenden Layoutstrukturen zu den effizientesten Layouts führt. Jedes Widget und Layout, das Sie Ihrer App hinzufügen, erfordert jedoch eine Initialisierung, ein Layout und eine Zeichnung. Beispielsweise kann die Verwendung verschachtelter Instanzen von LinearLayout zu einer übermäßig tiefen Ansichtshierarchie führen. Außerdem kann das Verschachteln mehrerer Instanzen von LinearLayout, die den Parameter layout_weight verwenden, besonders teuer sein, da jedes untergeordnete Element zweimal gemessen werden muss. Das ist besonders wichtig, wenn das Layout wiederholt aufgebläht wird, z. B. wenn es in einem RecyclerView verwendet wird.

In diesem Dokument erfahren Sie, wie Sie Ihr Layout mit dem Layout Inspector und Lint untersuchen und optimieren können.

Layout überprüfen

Die Android SDK-Tools enthalten den Layout Inspector, 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 dem Layout Inspector können Sie laufende Prozesse auf einem verbundenen Gerät oder Emulator auswählen und dann den Layoutbaum aufrufen. Die Ampeln auf jedem Block stellen die Messwerte „Messen“, „Layout“ und „Zeichnen“ dar und helfen Ihnen dabei, potenzielle Probleme zu erkennen.

Abbildung 1 zeigt beispielsweise ein Layout, das in einem RecyclerView als Element verwendet wird. Dieses Layout zeigt links ein kleines Bitmapbild und rechts zwei gestapelte Textelemente. Es ist besonders wichtig, dass Layouts wie dieses, die mehrfach aufgebläht sind, optimiert werden, da sich die Leistungsvorteile vervielfachen.

Der Layout Inspector zeigt eine Liste der verfügbaren Geräte und der zugehörigen laufenden Komponenten an. Wählen Sie auf dem Tab Windows Ihre Komponente aus und klicken Sie auf Layout Inspector, um die Layouthierarchie der ausgewählten Komponente aufzurufen. Abbildung 2 zeigt beispielsweise das Layout des in Abbildung 1 dargestellten Listenelements.

Layout überarbeiten

Da die vorherige Layoutleistung aufgrund eines verschachtelten LinearLayout abnimmt, können Sie die Leistung verbessern, indem Sie das Layout vereinfachen. Mit anderen Worten, das Layout sollte flach und breit statt schmal und tief sein. Ein ConstraintLayout als Stammknoten ermöglicht solche Layouts. Wenn Sie dieses Design in die Verwendung von 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 Überprüfung des neuen Layouts sieht so aus:

Dies hat mehrere Vorteile, da dieses Layout für jedes Element in einer Liste verwendet wird.

Der größte Unterschied ist auf die Verwendung von layout_weight im LinearLayout-Design zurückzuführen, das die Messung verlangsamen kann. Dies ist ein Beispiel dafür, wie jedes Layout angemessen genutzt werden kann. Überlegen Sie sorgfältig, ob die Verwendung der Layout-Gewichtung notwendig ist.

Bei einigen komplexen Layouts verschwendet das System möglicherweise Mühe, dasselbe UI-Element mehr als einmal zu messen. Dieses Phänomen wird als doppelte Besteuerung bezeichnet. Weitere Informationen zur doppelten Besteuerung und dazu, wie Sie dies verhindern können, finden Sie unter Leistungs- und Ansichtshierarchien.

Lint verwenden

Es empfiehlt sich, das Lint-Tool für Ihre Layoutdateien auszuführen, um nach möglichen Optimierungen der Ansichtshierarchie zu suchen. Lint ersetzt das Layoutopt-Tool und bietet mehr Funktionen. Im Folgenden finden Sie Beispiele für Lint-Regeln:

• Verwende zusammengesetzte Drawables. Du kannst ein LinearLayout, das ein ImageView-Element enthält, und ein TextView effizienter als zusammengesetztes Drawable verarbeiten.
• Stamm-Frame zusammenführen. Wenn das Stammverzeichnis eines Layouts ein FrameLayout ist, das keinen Hintergrund oder Abstand bietet, können Sie es durch ein Platzhalter-Tag ersetzen. Dies ist etwas effizienter.
• Entfernen Sie unbrauchbare Blätter. Sie können ein Layout entfernen, das keine untergeordneten Elemente oder keinen Hintergrund hat – da es unsichtbar ist –, um eine einfachere und effizientere Layouthierarchie zu erhalten.
• Entfernen Sie nutzlose übergeordnete Elemente. Sie können ein Layout mit einem untergeordneten Element entfernen, das keine gleichgeordneten Elemente hat, kein ScrollView- oder Stammlayout ist und das keinen Hintergrund hat. Für eine einfachere und effizientere Layouthierarchie kann die untergeordnete Ansicht auch direkt in die übergeordnete Ansicht verschoben werden.
• Vermeiden Sie tiefe Layouts. Zu viele Verschachtelungen wirken sich negativ auf die Leistung aus. Verwenden Sie einfachere Layouts wie ConstraintLayout, um die Leistung zu verbessern. Die standardmäßige maximale Tiefe für Lint-Prüfungen ist 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 Inspektionsprofile auch in Android Studio mit der Option File > Settings > Project Settings (Datei > Einstellungen > Projekteinstellungen) verwalten und Prüfungen konfigurieren. Die Seite „Inspektionskonfiguration“ wird mit den unterstützten Prüfungen angezeigt:

Lint kann einige Probleme automatisch beheben, Vorschläge für andere machen und zur Überprüfung direkt zum problematischen Code wechseln.

Weitere Informationen finden Sie unter Layouts und Layoutressource.