Android : Introduction aux fragments

Publié dans: 

Le marché des technologies mobiles offre aujourd’hui deux grands produits très utilisés à savoir les Smartphones et les Tablettes. Etant donné la grande différence entre les tailles de leurs écrans, une application se doit d’être développée soit pour les Smartphones, soit pour les Tablettes. Alors pour quel appareil allez-vous développer vos applications ?

Avec ANDROID cette question n’a plus lieu d’être. Suite à l’introduction des fragments, il devient presque naturel de développer une application qui s’adapte automatiquement au périphérique sur lequel elle est installée.
Commençons par introduire les fragments.

Introduits à partir de d’ANDROID 3.0 (API 11), les fragments permettent de développer des applications qui offriraient une navigation adaptée aussi bien à l’utilisation à partir d’un téléphone portable qu’à partir d’une tablette. Ils permettent de considérer deux vues en tant que deux activités distinctes (Smartphone) ou en tant qu’une seul activité, et les afficher simultanément à l’écran (Tablette).

Ci-dessous une figure exposant l’apport des fragments. Avec cette technique il est possible d’avoir une vue par écran sur les Smartphones et deux sur les tablettes.

 

Passons maintenant à un exemple afin d’éclaircir davantage cette notion.

(Pour mieux suivre le code source de l’exemple est disponible ici. Le code a été écrit dans l'unique objectif d'exposer l'utilisation des fragment. C'est pour cela qu'il ne respecte pas forcément toutes les bonnes pratiques)

Considérons une application météo. Cette dernière affiche la liste des pays sur une vue. Suite au clic sur un élément de la liste, l’application affiche sur une autre vue les prévisions météo du pays en question.
Nous allons donc écrire un fragment ListPaysFragment pour gérer et afficher la liste des pays et un fragment PrevisionFragment pour récupérer et afficher les prévisions météo.
Nous aurons également besoin d’une activité ListPaysActivity qui affichera dans le Smartphone le fragment ListPaysFragment et dans le cas d’une tablette les fragments ListPaysFragment et PrevisionFragment. Donc cette activité disposera de deux fichiers layout (l’un sous layout et l’autre sous layout-Large). Et pour finir nous aurons une activité PrevisionActivity qui affichera le fragment PrevisionFragment. (Cette activité ne sera utilisée que dans le cas des Smartphones)

Le contenu des vues sera défini dans les fichiers ListPaysFragment.xml et PrevisionFragment.xml et sera affiché et géré par ListPaysFragment.java et PrevisionFragment.java. La liaison entre un fragment et la classe correspondante se fait par le biais de l’attribut class de la balise fragment.

<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"

tools:context=".ListPaysActivity" >

<fragment

android:id="@+id/list_pays_fragment"

android:layout_width="match_parent"

android:layout_height="match_parent"

class="com.example.tutometeo.ListPaysFragment" >

</fragment>

</LinearLayout>

Il ne reste plus qu’une seule chose à faire, détecter si l’on doit démarrer une nouvelle activité (cas d’un Smartphone) ou est-ce qu’il y a déjà le fragment qui est affiché donc l’utiliser directement. Pour cela il suffit de demander à ANDROID :

//On récupère le fragment PrevisionFragment

PrevisionFragment fragment = (PrevisionFragment) getSupportFragmentManager()

.findFragmentById(R.id.prevision_fragment);

//Si le fragment est déjà à l'écran on le met à jour (tablette), si non on démarre une nouvelle activité (Smartphone).

if ((fragment != null) && fragment.isInLayout()) {

fragment.setMsg("Prévision de " + region

+ " dans un fragment mis à jour");

} else {

Intent intent = new Intent(this, PrevisionActivity.class);

intent.putExtra(PrevisionActivity.MSG_EXTRAS, "Prévision de "

+ region + " dans une nouvelle activité");

startActivity(intent);

}

 

Attention : le déplacement ou le renom des classes ne met pas automatiquement à jour la référence dans le xml.

 

J’ai essayé de commenter au mieux le code source.

Un Tuto détaillé est disponible ici.

Si vous avez des questions n’hésitez pas à poster vos commentaires.