Layouts mit <Einschließen> wiederverwenden

Compose ausprobieren

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

Slotbasierte Layouts →

Android bietet zwar eine Vielzahl von Widgets für kleine, wiederverwendbare, interaktive Elemente, aber möglicherweise müssen Sie auch größere Komponenten wiederverwenden, die ein spezielles Layout erfordern. Wenn Sie vollständige Layouts effizient wiederverwenden möchten, können Sie die Tags <include> und <merge> verwenden, um ein Layout in ein anderes einzubetten.

So lassen sich komplexe Layouts erstellen, z. B. ein Bereich mit Ja- oder Nein-Schaltflächen oder eine benutzerdefinierte Fortschrittsanzeige mit Beschreibungstext. Außerdem können Sie alle Elemente Ihrer Anwendung, die für mehrere Layouts gemeinsam sind, extrahieren, separat verwalten und in jedes Layout einbinden. Sie können zwar einzelne UI-Komponenten erstellen, indem Sie eine benutzerdefinierte View schreiben, aber es ist einfacher, eine Layoutdatei wiederzuverwenden.

Wiederverwendbares Layout erstellen

Erstellen Sie zuerst eine neue XML-Datei und definieren Sie das Layout, das Sie wiederverwenden möchten. Hier ist beispielsweise ein Layout zu sehen, in dem eine Titelleiste definiert ist, die in jede Aktivität eingefügt werden soll (titlebar.xml):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg"
    tools:showIn="@layout/activity_main" >

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/gafricalogo" />
</FrameLayout>

Die Stamm-View muss genau so aussehen, wie sie in jedem Layout erscheinen soll, in dem Sie dieses Layout hinzufügen möchten.

<include>-Tag verwenden

Fügen Sie im Layout, in das Sie die wiederverwendbare Komponente einfügen möchten, das Tag <include> hinzu. Hier ist beispielsweise ein Layout mit der Titelleiste aus dem vorherigen Beispiel:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    android:gravity="center_horizontal">

    <include layout="@layout/titlebar"/>

    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />
    ...
</LinearLayout>

Sie können auch alle Layoutparameter – alle android:layout_*-Attribute – der Stammansicht des enthaltenen Layouts überschreiben, indem Sie sie im <include>-Tag angeben. Das ist im folgenden Beispiel zu sehen:

<include android:id="@+id/news_title"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         layout="@layout/title"/>

Wenn Sie jedoch Layoutattribute mit dem <include>-Tag überschreiben möchten, müssen Sie auch android:layout_height und android:layout_width überschreiben, damit die anderen Layoutattribute wirksam werden.

<merge>-Tag verwenden

Mit dem <merge>-Tag können Sie redundante Ansichtsgruppen in Ihrer Ansichtshierarchie vermeiden, wenn Sie ein Layout in ein anderes einbetten. Ein Anwendungsfall für <merge> ist die Implementierung einer benutzerdefinierten Ansicht durch Erweiterung einer ViewGroup.

Wenn Ihr Hauptlayout beispielsweise ein vertikales LinearLayout ist, in dem zwei aufeinanderfolgende Ansichten in mehreren Layouts wiederverwendet werden können, benötigt das wiederverwendbare Layout, in dem Sie die beiden Ansichten platzieren, eine eigene Stammansicht. Wenn Sie jedoch ein anderes LinearLayout als Stammelement für das wiederverwendbare Layout verwenden, wird ein vertikales LinearLayout in einem vertikalen LinearLayout angezeigt. Das verschachtelte LinearLayout erfüllt keinen wirklichen Zweck und verlangsamt die Leistung der Benutzeroberfläche.

Stattdessen können Sie eine LinearLayout erweitern, um eine benutzerdefinierte Ansicht zu erstellen, und die untergeordneten Ansichten mithilfe einer Layout-XML-Datei beschreiben. Das oberste Tag in der XML-Datei ist <merge> und nicht LinearLayout, wie im folgenden Beispiel zu sehen ist:

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>

</merge>

Wenn du dieses Layout mithilfe des <include>-Tags in ein anderes Layout einbindest, ignoriert das System das <merge>-Element und platziert die beiden Schaltflächen direkt im Layout anstelle des <include>-Tags.

Weitere Informationen zu <include> finden Sie unter Layoutressource.