Dév Android SRDice : Mutualisation des layouts

Après avoir mutualisé le code Java, il est temps de se pencher les éléments visuels composant les vues : les layouts.

En développement Android on a la possibilité d’inclure des layouts dans d’autres avec le mot clé include.

Étape 1 : Etude de l’existant :

J’étudie donc la vue de mon application pour définir les ensembles d’éléments qui peuvent (doivent) être modulaire. Pour ce faire, outre le fait de penser à quels éléments je vais avoir besoin à la fois dans SRDSimpleActivity et SRDExtendedActivity, je pense aussi aux différences que je peux déjà avoir entre le layout et le layout-land et sur la façon d’en profiter pour optimiser ceci :

• L’entête avec le logo
• Le bloc « Nombre de dés » avec les boutons – et +
• La checkbox « Edge/Chance » qui selon l’orientation se retrouve à des endroits différents mais reste identique, ce qui peut se régler avec un include
• Le bouton « Throw/Lancer »

Étape 2 : Faire un include

Pour faire un include il faut créer un fichier xml contenant les objets que l’on désire avec leur mise en page. Il fauit faire attention à bien englober ceci dans un unique élément, par exemple pour mon entête avec le logo :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView
        android:id="@+id/logoSR"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:contentDescription="@string/logo"
        android:cropToPadding="true"
        android:src="@drawable/srlogo" />

</FrameLayout>

Et dans le layout qui appelle l’inclusion :

    <include android:id="@+id/head_inc" 
        layout="@layout/srd_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

Note importante : le fichier contenant ce qu’il y a à inclure s’appelle ici srd_title.xml, il se trouve dans le dossier layout.

Pour l’englobage : LinearLayout, RelativeLayout, FrameLayout sont possibles. Et dans mon cas réagissent pareil (Pour Linear et Relative : normale, ça ne contient qu’un seul élément, et la différence est sur l’agencement à l’intérieur). Pour le FrameLayout… je ne sais pas encore trop quel est sa particularité et le meilleur moyen de l’utiliser…

On a aussi moyen d’englober avec la balise <merge> :

<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/logoSR"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:contentDescription="@string/logo"
        android:cropToPadding="true"
        android:src="@drawable/srlogo" />

</merge>

Là part contre attention…

Sans Merge :	Avec Merge :

Cela peut être utile, mais dans d’autres occasions…

Étape 3 : appliquer

Comme lors de la mutualisation du code Java, dans un premier temps je m’applique à faire en sorte que les rendus verticaux et horizontaux de SRDice V1 soient toujours fonctionnels.

Au final, une fois ceci fait, je me retrouve avec des tailles de dossiers sensiblement identiques à quelques octets prêts à ce que j’avais avec SRDice V1. Et de quoi gagner énormément sur la création des écrans pour les Tests Étendus !

Billets similaires

Dév Android SRDice : Mutualisation du code Java SRDice, premiers retours utilisateurs : Edge/Chance, Règle des six et layouts différents suivant l’orientation de l’écran Dév Android SRDice : Ecouteurs d’une série de boutons