Réutiliser des mises en page avec <inclure>

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 les mises en page complètes, utilisez les balises <include> et <merge> pour intégrer une mise en page à l'intérieur d'une autre.

Cela vous permet de créer des mises en page complexes, comme un panneau avec des boutons oui ou non ou une progression personnalisée. contenant une description. Cela signifie que vous pouvez extraire tous les éléments de votre application sont communs à plusieurs mises en page, les gérez-les séparément et les incluez-les dans chaque mise en page. Alors que vous pouvez créer des composants d'interface utilisateur individuels View, vous pouvez le faire plus facilement en à réutiliser 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. Pour Voici un exemple de 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 à laquelle vous prévoyez d'ajouter cette mise en page.

<ph type="x-smartling-placeholder">

</ph> Remarque : Attribut tools:showIn du fichier XML précédent est un attribut spécial utilisé uniquement lors de la conception dans Android Studio et est supprimé lors de la compilation. Il spécifie une mise en page qui inclut ce fichier, afin que vous puissiez prévisualiser et modifier ce fichier tel qu'il apparaît lorsqu'il est intégré dans une mise en page parent.

Utiliser la balise <include>

Dans la mise en page à laquelle vous souhaitez ajouter le composant réutilisable, ajoutez le code 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 (n'importe quel android:layout_*). de la vue racine de la mise en page incluse en les spécifiant dans 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 et les autres attributs de mise en page sont pris en compte.

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é lorsque vous implémenter une vue personnalisée en étendant un ViewGroup.

Par exemple, si votre mise en page principale est une mise en page verticale LinearLayout au cours duquel deux les vues consécutives peuvent être réutilisées dans plusieurs mises en page, puis la mise en page réutilisable dans laquelle vous placez deux vues nécessitent sa propre vue racine. Toutefois, si vous utilisez un autre LinearLayout comme racine pour la mise en page réutilisable se traduit par un LinearLayout vertical à l'intérieur d'une LinearLayout Le 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 balise principale du fichier XML est <merge>, et non plus 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 <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 Ressource de mise en page.