Réutiliser des mises en page avec <inclure>

Essayer Compose
Jetpack Compose est le kit d'outils d'UI recommandé pour Android. Découvrez comment utiliser les mises en page dans Compose.
Mises en page basées sur les emplacements →

Bien qu'Android propose une variété de widgets pour fournir de petits éléments interactifs réutilisables, vous pouvez également avoir besoin de réutiliser des composants plus grands nécessitant une mise en page spéciale. Pour réutiliser efficacement des mises en page complètes, utilisez les balises <include> et <merge> pour intégrer une mise en page à une autre.

Vous pouvez ainsi créer des mises en page complexes, comme un panneau de boutons oui/non ou une barre de progression personnalisée avec une description. Cela signifie que vous pouvez extraire tous les éléments de votre application communs à plusieurs mises en page, les gérer séparément et les inclure dans chaque mise en page. Bien que vous puissiez créer des composants d'UI individuels en écrivant une View personnalisée, vous pouvez le faire plus facilement en réutilisant un fichier de mise en page.

Créer une mise en page réutilisable

Commencez par créer un fichier XML et définissez la mise en page que vous souhaitez pouvoir réutiliser. Par exemple, voici une mise en page qui définit une barre de titre à inclure dans chaque activité (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>

La View racine doit correspondre exactement à la façon dont vous souhaitez l'afficher dans chaque mise en page à laquelle vous l'ajoutez.

Utiliser la balise <include>

Dans la mise en page à laquelle vous souhaitez ajouter le composant réutilisable, ajoutez la balise <include>. Par exemple, voici une mise en page qui inclut la barre de titre de l'exemple précédent:

<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>

Vous pouvez également remplacer tous les paramètres de mise en page (tous les attributs android:layout_*) de la vue racine de la mise en page incluse en les spécifiant dans la balise <include>. Ce processus est illustré dans l'exemple suivant :

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

Toutefois, si vous souhaitez remplacer les attributs de mise en page à l'aide de la balise <include>, remplacez également android:layout_height et android:layout_width pour que les autres attributs de mise en page s'appliquent.

Utiliser la balise <merge>

La balise <merge> permet d'éliminer les groupes de vues redondants dans votre hiérarchie de vues lorsque vous incluez une mise en page dans une autre. Un cas d'utilisation de <merge> est lorsque vous implémentez une vue personnalisée en étendant un ViewGroup.

Par exemple, si votre mise en page principale est une LinearLayout verticale dans laquelle deux vues consécutives peuvent être réutilisées dans plusieurs mises en page, la mise en page réutilisable dans laquelle vous placez les deux vues nécessite sa propre vue racine. Toutefois, utiliser une autre LinearLayout comme racine pour la mise en page réutilisable se traduirait par une LinearLayout verticale dans une LinearLayout verticale. L'élément LinearLayout imbriqué n'a aucune utilité réelle et ralentit les performances de votre interface utilisateur.

À la place, vous pouvez étendre un LinearLayout pour créer une vue personnalisée et utiliser un fichier XML de mise en page pour décrire ses vues enfants. La première balise du fichier XML est <merge>, et non LinearLayout, comme illustré dans l'exemple suivant:

<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>

Lorsque vous incluez cette mise en page dans une autre (à l'aide de la balise <include>), le système ignore l'élément <merge> et place les deux boutons directement dans la mise en page, à la place de la balise <include>.

Pour en savoir plus sur <include>, consultez la section Ressource de mise en page.