Réutiliser des mises en page avec <inclure>

Bien qu'Android propose une variété de widgets pour fournir de petits éléments réutilisables et interactifs, vous devrez peut-être également réutiliser des composants plus volumineux 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 dans une autre.

Cela vous permet de créer des mises en page complexes, par exemple un panneau avec des boutons oui ou non, ou une barre de progression personnalisée avec un texte descriptif. Cela signifie que vous pouvez extraire tous les éléments de votre application qui sont 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'interface utilisateur individuels en écrivant un View personnalisé, 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 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 racine View doit correspondre exactement à la manière dont vous souhaitez qu'elle apparaisse dans chaque mise en page où vous prévoyez d'ajouter cette mise en page.

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 ignorer 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 prennent effet.

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. <merge> est un cas d'utilisation 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, l'utilisation d'un autre LinearLayout comme racine pour la mise en page réutilisable génère une LinearLayout verticale à l'intérieur d'une LinearLayout verticale. Le LinearLayout imbriqué n'a aucune utilité réelle et ralentit les performances de l'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. Dans le code XML, la balise supérieure 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 mise en page à 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.