Nous revoici pour un nouveau tutoriel, le premier à aborder la notion de Fragment. Les Fragments ont été introduits dans la version Android 3.0 (également utilisable avec des versions antérieures) avec pour objectif de permettre une plus grande flexibilité pour les écrans larges tel que les tablettes tactiles (ce que nous verrons dans un prochain tutoriel). Notre objectif aujourd’hui est simplement de créer un joli effet “slide” entre des pages.

Qu’est-ce qu’un Fragment ?

C’est certainement la question que vous devez vous poser. On peut voir un Fragment comme une “mini-Activity” ou une portion d’une activité qui ne peut pas vivre en dehors d’une Activity. Un des aspects pratiques du Fragment est qu’il peut être facilement réutilisé d’une Activity à l’autre.

Notre projet

Comme d’habitude, je vous invite à créer un projet dédié à ce tutoriel, que j’ai baptisé TutoFragment. Je l’ai volontairement créé pour la version Android 2.2 pour y intégrer le package de compatibilité, puisqu’à la base, les Fragments viennent sont une fonctionnalité de la version 3.0.
Nous allons donc premièrement télécharger la librairie complémentaire. Pour cela, allez dans le SDK Manager en cliquant sur l’icône suivante et télécharger “Android Support”.

sdk_manager

Ajoutons ensuite cette librairie au projet. Pour cela, sélectionnez votre projet sous Eclipse, clic droit/Android tools/Add support library. La librairie s’intègre automatiquement au projet, ce qui nous permet d’utiliser la classe Fragment !

Les fichiers xml

Le layout principal, que j’ai renommé viewpager.xml, se présente de la manière suivante:

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

<android.support.v4.view.ViewPager
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:id="@+id/viewpager">
</android.support.v4.view.ViewPager>

La balise du composant utilisé ici a une syntaxe particulière puisqu’elle fait référence à un composant de la librairie ajoutée précédemment.

Les trois autres layouts seront les pages affichées successivement lors du slide et possèdent un code similaires. Voici le code de page_gauche_layout.xml, je vous laisse créer les deux autres par vous même (page_milieu_layout et page_droite_layout).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="20dp"
        android:text="Page de gauche" />

</LinearLayout>

Le code Java

J’ai renommé la classe principale en FragmentsSliderActivity. Celle-ci dérive de la classe FragmentActivity qui est simplement une Activity permettant de gérer les Fragments. Le code est commenté, je vous laisse regarder.

import java.util.List;
import java.util.Vector;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;

public class FragmentsSliderActivity extends FragmentActivity {

	private PagerAdapter mPagerAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.viewpager);

		// Création de la liste de Fragments que fera défiler le PagerAdapter
		List fragments = new Vector();

		// Ajout des Fragments dans la liste
		fragments.add(Fragment.instantiate(this,PageGaucheFragment.class.getName()));
		fragments.add(Fragment.instantiate(this,PageMilieuFragment.class.getName()));
		fragments.add(Fragment.instantiate(this,PageDroiteFragment.class.getName()));

		// Création de l'adapter qui s'occupera de l'affichage de la liste de
		// Fragments
		this.mPagerAdapter = new MyPagerAdapter(super.getSupportFragmentManager(), fragments);

		ViewPager pager = (ViewPager) super.findViewById(R.id.viewpager);
		// Affectation de l'adapter au ViewPager
		pager.setAdapter(this.mPagerAdapter);
	}
}

Pour passer d’une page à une autre, nous avons besoin d’un adapter (à la manière des ListView). L’adapter, appelé MyPagerAdapter dérive de FragmentPagerAdapter. Rien de compliqué, il fonctionne sur le même principe que les Adapters de ListViews.

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyPagerAdapter extends FragmentPagerAdapter {

	private final List fragments;

	//On fournit à l'adapter la liste des fragments à afficher
	public MyPagerAdapter(FragmentManager fm, List fragments) {
		super(fm);
		this.fragments = fragments;
	}

	@Override
	public Fragment getItem(int position) {
		return this.fragments.get(position);
	}

	@Override
	public int getCount() {
		return this.fragments.size();
	}
}

Enfin, la classe PageGaucheFragment, qui dérive de la classe Fragment possède des méthodes différentes de la classe Activity.

Ici, nous allons surcharger la méthode onCreateView. Cette méthode retourne un type View, on va donc lui indiquer notre layout par le biais de l’inflater. Les classes PageMilieuFragment et PageDroiteFragment sont quasi-identiques, je vous laisse vous en occuper.

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class PageGaucheFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.page_gauche_layout, container, false);
	}
}

Rendu final:
page 1page 2page 2

Conclusion

Ainsi se termine notre premier tutoriel sur les Fragments, en espérant que tout soit clair. Vous pouvez trouver le code source ici.

Categories: Tutoriels

33 Responses so far.


  1. Marmol dit :

    Bonjour,
    Est ce que quelqu’un aurait une idée pour pourvoir gérer la scrollbar verticale dans le cas ou le texte afficher est plus long que l’écran ?
    Merci :)

  2. Nils dit :

    Très bon tuto, mais comment conserver les données dans mes fragments si je souhaite faire un bouton précédent pour revenir au dernier fragment? Par exemple si Fragment1 contient un EditText informé par mon utilisateur et qu’il passe a Fragment2, mais qu’il souhaite par la suite revenir sur Fragment1, comment ré-afficher la valeur de mon EditText dans Fragment1?

  3. Whatups dit :

    Super tuto, je suis partis de cette base.

    J’ai un problème pour accéder à mes fragments depuis l’activité host , j’utilise la méthode getItem() de l’adapter mais celle ci me renvoie null pour le fragment dès que le tel est tourné. pouvez vous m’aider svp ?

    Peut être une idée de tuto approfondi à en voir le nombre de questions sur le sujet et rien de clair en réponse.

  4. Nubydev dit :

    Bonjour tout le monde, je suis étudiant et novice sur Android. Je souhaite développer une application (sur eclipse).
    Comment procède t-on pour afficher des contacts dans une application à partir d’un flux rss ?
    Et je souhaiterai ensuite pouvoir appeler ces contacts.
    Tout informations ou conseil sera bon à prendre ;)
    Merci pour votre aide

  5. Lotfi dit :

    Merci pour ton Tuto
    j’ai fait un mix entre ce que tu donnes et le projet par défaut d’Android studio
    et ça marche mais qd je switch entre les tab et que je cherche à mettre à jour un TextView

    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

    mViewPager.setCurrentItem(tab.getPosition());
    TextView mMsg;

    mMsg = (TextView) (findViewById(R.id.h_message));
    mMsg.setText(mr.TownName);
    ne marche pas car mMsg est null !
    pourquoi findViewById me retourne un null,

    je signale que le id.h_message fait partie du fragment .xml

    comment fait on pour acceder aux textview des fragements sélectionné

    Merci

Leave a Reply


Notifiez-moi des commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.