Layouts mit <Einschließen> wiederverwenden

Jetpack Compose

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

Slot-basierte Layouts →

Android bietet zwar eine Vielzahl von Widgets, um kleine, wiederverwendbare, interaktive Elemente bereitzustellen, 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, verwenden Sie die Tags <include> und <merge>, um ein Layout in ein anderes einzubetten.

So können Sie komplexe Layouts erstellen, z. B. ein Bedienfeld mit Schaltflächen für „Ja“ oder „Nein“ oder eine benutzerdefinierte Fortschrittsanzeige mit Beschreibungstext. Außerdem können Sie alle Elemente Ihrer Anwendung, die in mehreren Layouts verwendet werden, extrahieren, separat verwalten und in jedes Layout einfügen. 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 ein Beispiel für ein Layout, das eine Titelleiste definiert, 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 View des Stammverzeichnisses muss genau so aussehen, wie sie in jedem Layout angezeigt werden soll, in dem Sie dieses Layout hinzufügen möchten.

Hinweis: Das tools:showIn Attribut in der vorherigen XML-Datei ist ein spezielles Attribut, das nur zur Designzeit in Android Studio verwendet und während der Kompilierung entfernt wird. Es gibt ein Layout an, das diese Datei enthält. So können Sie eine Vorschau dieser Datei aufrufen und sie bearbeiten, während sie in ein übergeordnetes Layout eingebettet ist.

Tag <include> verwenden

Fügen Sie in dem Layout, in dem Sie die wiederverwendbare Komponente hinzufügen möchten, das <include> Tag ein. Hier ist ein Beispiel für ein Layout, das die Titelleiste aus dem vorherigen Beispiel enthält:

<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 eingefügten Layouts überschreiben, indem Sie sie im <include> Tag angeben. Das wird im folgenden Beispiel gezeigt:

<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 Tag <include> überschreiben möchten, überschreiben Sie auch android:layout_height und android:layout_width, damit die anderen Layoutattribute wirksam werden.

Tag <merge> verwenden

Mit dem <merge> Tag können Sie redundante Ansichtsgruppen in der Ansichtshierarchie vermeiden wenn Sie ein Layout in ein anderes einfügen. Ein Anwendungsfall für <merge> ist die Implementierung einer benutzerdefinierten Ansicht durch Erweitern 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 Stammverzeichnis für das wiederverwendbare Layout verwenden, entsteht ein vertikales LinearLayout innerhalb eines vertikalen LinearLayout. Das verschachtelte LinearLayout hat keinen wirklichen Zweck und verlangsamt die UI-Leistung.

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

<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 Sie dieses Layout in ein anderes Layout einfügen – mit dem <include> Tag – 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.