Bien qu'Android propose une variété de widgets pour fournir de petits éléments interactifs réutilisables, 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, telles qu'un panneau de boutons oui ou non, ou une barre de progression personnalisée avec un texte de 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. <merge> est utilisé par exemple 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'instruction LinearLayout imbriquée ne sert à rien et ralentit les performances de l'UI.
À 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 balise supérieure 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.