swirl logo

About     Archive     Feed     Impressum

Android: Layouts mithilfe von <merge> und <include> wiederverwenden

Hintergrund

Seit der Unterstützung von Fragments ist es durchaus üblich, sowohl ein separates Layout für Smartphone-, als auch für Tablet-Besitzer anzubieten. In diesem Zusammenhang spielt vor allem die Wiederverwendbarkeit bestehender Layout-Ressourcen eine große Rolle. Wie sich die Wiederverwendbarkeit Mithilfe von <merge> und <include> realisieren lässt, ist im folgenden Abschnitt beschrieben.

Vorgehensweise

Das include-Tag

Das include-Tag ermöglicht die Integration von Layout-XML-Dateien in bestehende Layouts. Grundsätzlich verhält sich dies dabei, als ob das inkludierte Layout 1:1 in die zu importierende Layout-Ressource kopiert worden wäre:

Basis-Layout:

<FrameLayout>
   <include layout="@layout/layoutFragment"/>
</FrameLayout>

LayoutFragment-Layout:

<FrameLayout>
   <TextView android:id="@+id/txtView" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</FrameLayout>

Die Integration des Layouts würde somit wie folgt effektiv resultieren:

<FrameLayout>
   <FrameLayout>
      <TextView android:id="@+id/txtView" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
   </FrameLayout>
</FrameLayout>

Das Beispiel verdeutlicht, dass wirklich die gesamte Layout-Ressource 1:1 kopiert wurde. Dies birgt die Unschönheit, dass das Root-Layout von LayoutFragment entsprechend übernommen wurde. Eine unnötige Verschachtelung, die das Rendering des Layouts unnötigerweise verlangsamt.

Aus diesem Grund wurde im gleichen Zuge das merge-Tag eingeführt.

Das merge-Tag

Das merge-Tag wird nun - im Gegensatz zum include-Tag - in der Layout-Ressource eingesetzt, die von anderen Layouts "inkludiert" bzw. importiert werden soll. Es fungiert als eine Art Root-Layout-Platzhalter, welches beim Merge-Prozess dynamisch entfernt wird.

Basis-Layout:

<FrameLayout>
   <include layout="@layout/layoutFragment"/>
</FrameLayout>

LayoutFragment-Layout:

<merge>
   <TextView android:id="@+id/txtView" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</merge>

Die Integration des Layouts würde somit wie folgt effektiv resultieren:

<FrameLayout>
  <TextView android:id="@+id/txtView" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</FrameLayout>

Das merge-Tag wurde beim inkludieren entsprechend entfernt und das Layout ist somit ohne jegliche unnötige Verschachtelung aufgebaut.

Hire me!