Les interfaces : Réutilisation d’interfaces & de styles

L’un des points importants lors de la création d’une application Android est l’organisation et l’optimisation de vos interfaces. Cela est important, car une interface mal conçue, peux produire de nombreux bugs (un ralentissement de votre application, non compatibilité avec certains terminaux ou versions d’Android).

Ce tuto se découpera en plusieurs parties et abordera différents aspects de l’optimisation et l’organisation des interfaces d’une application Android. La première partie abordera l’inclusion et la réutilisation d’interface ainsi que l’extraction de style.


1 – Principe

L’un des points utiles est le système d’inclusion. Il vous permet de découpez votre application en plusieurs parties et vous offre ainsi la possibilité de réutilisez des parties d’une vue dans une autre vue.

Voici un petit exemple concret, imaginez que dans une application Android sur plusieurs écrans, vous avez un bandeau en haut et un bandeau en bas (un pseudo Header / Footer). Au lieu de créer ces deux éléments dans chaque interface, vous pouvez le créer une seule fois et le réutiliser (inclure) dans les interfaces ciblées.

Cela est possible à l’aide de la balise include qui vous permet de spécifier une vue à inclure dans votre layout. Vous pouvez surcharger la longueur et largeur d’un élément lors de son inclusion (layout_width et layout_height).

2 – Implémentation

Pour commencer, il faut créer le fichier XML qui représentera le header de l’interface et qui sera réutilisez dans toutes les parties nécessaires de l’application. Dans ce cas le Header représente une zone de texte et ça largeur est spécifier en poids (layout weight) afin que la proportion d’espace qu’il occupe soit toujours la même (d’ou la hauter à 0dp).

Vous pouvez remarquer que le background, et le style référence des fichiers de l’application, cette partie sera abordée plus loin dans le tuto.

<?xml version="1.0" encoding="utf-8"?>

<TextView
        android:layout_width="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="0dp"
        android:layout_weight="0.5"
        android:text="@string/header_vue"
        android:background="@color/header_background"
        style="@style/text_view_style"></TextView>

Même chose pour le footer.

<?xml version="1.0" encoding="utf-8"?>

<TextView
        android:layout_width="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="0dp"
        android:layout_weight="0.5"
        style="@style/text_view_style"
        android:background="@color/footer_background"
        android:text="@string/footer_vue"
        ></TextView>

Maintenant la vue principale de notre application. En inclus à l’aide de la balise include les deux layout crée précédemment, et on spécifie le poids du corps de l’interface, pour qu’il prenne plus de place que les deux layout inclus (header / footer).
L’attribut weightSum, permet de spécifier la somme des poids des différents éléments du layout. Donc 0.5 pour footer, 0.5 pour header et 4 pour le corps, ce qui donne bien 5.

Vous pouvez aussi spécifier les tailles du layout à inclure au moment de l’inclusion (dans la balise include). Donc les attributs layout_width, layout_height et layout_weight dans la balise include.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              tools:context=".MainActivity"
              android:weightSum="5">

    <include layout="@layout/header"
            ></include>

    <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="4"
            style="@style/text_view_style"
            android:text="@string/corps_vue"
            android:background="@color/body_background"/>

    <include layout="@layout/footer"></include>

</LinearLayout>

3 – Extraction de style

Lorsque dans une application, vous possédez plusieurs composant qui ont le même style (coulour de texte, taille, gravity …), au lieu de dupliquer ces valeurs dans chaque composant (ce qui entraine des problémes si vous voulez, par exemple, changer la couleur de texte, vous devez repasser sur tous les composants), il suffit de créer un style (comme çi-dessous dans le fichier styles.xml) puis l’appliquer aux différents éléments de votre interface.

Ce style sera utilisé pour les zones de texte, il défini :

  • La position du texte dans la zone de texte
  • La position de la zone de texte
  • La couleur et taille du texte
  • Le style et police du texte
<resources>

    <style name="text_view_style">
        <item name="android:gravity">center</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:textColor">#FFF</item>
        <item name="android:textSize">20sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:typeface">serif</item>
    </style>

</resources>

Vous pouvez aussi externaliser toutes les couleurs utilisées dans votre application dans le fichier colors.xml et ainsi les réutiliser partout dans l’application.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="footer_background">#d96859</color>
    <color name="header_background">#5fd976</color>
    <color name="body_background">#56aaca</color>
</resources>

Ce qui donnera le résultat suivant :

Le code source (Android Studio) est disponible ici, la suite arrive très bientôt.

9 commentaires


  1. j’ai pas compris comment la hauteur du header est petit et le corps est plyus grand.
    en résumé, c’est ce que je veux maitriser mais jai pas trouver un tuto

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *