Conception d'interface utilisateur Android Pagination en vue horizontale

Peut-être avez-vous déjà vu certaines des nouvelles fonctionnalités de l'interface utilisateur disponibles dans le package de compatibilité Android. Une de ces fonctionnalités, la radiomessagerie en vue horizontale, permet de faire glisser facilement à gauche et à droite différents écrans (pages), contrôlés par une seule activité. Cette fonctionnalité a été présentée dans plusieurs applications de haut niveau telles que l'application Android Market et le client Google+ Android..

Un certain nombre de classes dans le package de compatibilité Android peuvent être utilisées pour implémenter un comportement de balayage de page horizontal dans vos packages Android. Le contrôle ViewPager (android.support.v4.view.ViewPager) fournit le comportement de balayage horizontal. Il peut être utilisé dans vos mises en page, à l’instar d’une galerie ou d’un autre contrôle d’interface utilisateur peuplé d’adaptateur. La classe PagerAdapter (android.support.v4.view.PagerAdapter) permet de définir les données affichées par le contrôle ViewPager. Aujourd'hui, nous allons voir un exemple simple d'utilisation de ces classes pour fournir un comportement de balayage.


Étape 0: Mise en route

Nous fournissons le code source complet pour l'exemple d'application présenté dans ce tutoriel. Vous pouvez télécharger l'exemple de code source que nous fournissons pour révision..


Étape 1: Utiliser le package de compatibilité

La pagination en vue horizontale est basée sur des API uniquement disponibles avec le package de compatibilité Android v4, révision 3; ces API ne sont pas disponibles dans le SDK Android standard pour le moment. Par conséquent, vous devrez ajouter le package de compatibilité Android à votre projet Android pour accéder aux API appropriées..

Pour ajouter le package de compatibilité Android à votre projet Eclipse Android, cliquez avec le bouton droit sur le projet dans l'explorateur de projets. Choisissez Outils Android, Ajouter une bibliothèque de compatibilité. Vous verrez maintenant le fichier android-support-v4.jar dans le dossier de votre projet Bibliothèques référencées. Cela signifie que vous avez ajouté avec succès le package à votre projet et que vous pouvez maintenant commencer à l'utiliser..


Étape 2: Définir un ViewPager

Ensuite, vous devrez définir un contrôle ViewPager dans votre fichier de ressources de présentation. Dans notre exemple simple, nous mettons à jour la ressource de présentation main.xml utilisée par notre classe Activity et définissons un contrôle ViewPager au sein de cette présentation. Ce contrôle doit être référencé par son nom complet: android.support.v4.view.ViewPager.

Par exemple, voici la ressource de présentation main.xml mise à jour avec un ViewPager défini:

   

Les commandes ViewPager occupent souvent tout l'écran, mais ce n'est pas nécessairement le cas. Pour cet exemple, nous allons afficher cinq "pages" de mise en page différentes. Nous appelons donc notre contrôle ViewPager par un identifiant unique intitulé myfivepanelpager..


Étape 3: Créer des ressources de mise en page

Ensuite, vous voudrez créer un ensemble de ressources qui constitueront les "pages" ou les "volets" du balayage horizontal. Vous pouvez utiliser le même fichier de ressources de présentation pour chaque page et ajouter un contenu différent, ou vous pouvez charger des ressources de présentation complètement différentes pour les pages individuelles. Pour cet exemple, nous avons créé cinq fichiers de ressources de présentation distincts, nommés farleft.xml, left.xml, middle.xml, right.xml et farright.xml. Chaque ressource de présentation a un contenu différent à afficher. Le contenu de chaque ressource de présentation dépend de vous. Vous pouvez utiliser des contrôles statiques ou dynamiques. Pour que cet exemple reste simple, nous allons nous en tenir à des contrôles statiques tels que les contrôles TextView et ImageView. Pour les pages d'extrême gauche et d'extrême droite, nous inclurons des contrôles Button..

Cette image montre les cinq différents résultats du fichier de ressources de présentation:

L'implémentation de ces fichiers de mise en page n'a rien de spécial. N'oubliez pas d'implémenter les gestionnaires Button onClick dans votre classe d'activité. Ces ressources de présentation seront chargées par le PagerAdapter lors de l'exécution pour être affichées à l'écran. Pour plus de détails sur l'implémentation, voir le code source fourni avec ce projet..


Étape 4: implémenter un PagerAdapter personnalisé

Votre ViewPager a besoin d’un adaptateur de données pour déterminer et charger le contenu approprié pour chaque page vers laquelle l’utilisateur glisse. Nous avons nommé notre fichier de ressources de mise en page? Pages? dans l'ordre que nous voulons qu'ils affichent, de l'extrême gauche à l'extrême droite.

Lorsque vous étendez la classe PagerAdapter, vous devez implémenter plusieurs méthodes de clé..

Tout d'abord, vous devrez définir la taille de votre plage de pagination. Dans ce cas, nous avons cinq pages à afficher. Par conséquent, vous souhaiterez que la méthode getCount () de la classe MyPagerAdapter renvoie une taille de page de 5..

Ensuite, vous devez implémenter la méthode instantiateItem () pour gonfler le fichier de ressources de présentation approprié, en fonction de la position de balayage de l'utilisateur. La page la plus éloignée à gauche est la position 0, la page suivante à droite est la position 1, etc. La méthode instantiateItem () utilise le service LayoutInflater pour gonfler la mise en page spécifique et l'ajouter à la collection utilisée par ViewPager..

Cette image montre les cinq différents fichiers de ressources de mise en page et leurs? Positions? en termes d'ordre de pagination:

La dernière méthode importante à implémenter est la méthode destroyItem (), qui supprime la présentation spécifique de la collection utilisée par ViewPager lorsqu'elle n'est plus affichée..

Voici une implémentation de base pour un adaptateur de pagette horizontal de cinq pages, appelé MyPagerAdapter, qui implémente ces méthodes principales ainsi que quelques autres:

La classe privée MyPagerAdapter étend PagerAdapter public int getCount () return 5;  objet public instantiateItem (collection View, position int) LayoutInflater inflater = (LayoutInflater) collection.getContext () .getSystemService (Context.LAYOUT_INFLATER_SERVICE); int resId = 0; commutateur (position) cas 0: resId = R.layout.farleft; Pause; cas 1: resId = R.layout.left; Pause; cas 2: resId = R.layout.middle; Pause; cas 3: resId = R.layout.right; Pause; cas 4: resId = R.layout.farright; Pause;  View view = inflater.inflate (resId, null); ((ViewPager) collection) .addView (vue, 0); retourner la vue;  @Override public null destroyItem (View arg0, int arg1, Object arg2) ((ViewPager) arg0) .removeView ((View) arg2);  @Override public boolean isViewFromObject (View arg0, Object arg1) return arg0 == ((View) arg1);  @Override public Parcelable saveState () return null; 

Étape 5: Lier MyPagerAdapter

Enfin, vous devez mettre à jour la méthode onCreate () de votre classe Activity pour lier votre MyPagerAdapter au contrôle ViewPager défini dans votre fichier de ressources de présentation main.xml..

Vous pouvez également prendre ce temps pour définir la position initiale du pager. Par défaut, il commencerait à la position 0 (la disposition la plus à gauche avec le simple contrôle Button). Cependant, nous souhaitons permettre à l'utilisateur de glisser à gauche et à droite afin de définir la position initiale de ViewPager sur la disposition centrale (le singe au milieu) à l'aide de la méthode setCurrentItem ()..

@Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main); MyPagerAdapter adaptateur = new MyPagerAdapter (); ViewPager myPager = (ViewPager) findViewById (R.id.myfivepanelpager); myPager.setAdapter (adaptateur); myPager.setCurrentItem (2); 

Maintenant, si vous exécutez votre application, vous commencerez avec le singe dans la page centrale et pourrez glisser deux pages à gauche ou à droite, comme indiqué ci-dessous:


Conclusion

Le contrôle de l'interface utilisateur du pager à vue horizontale est un contrôle d'interface utilisateur soigné mis à la disposition des développeurs Android via le package de compatibilité Android. Données pour l'individu? Pages? est géré par un adaptateur de données spécial appelé PagerAdapter. La bibliothèque de compatibilité contient également des classes permettant de créer des adaptateurs de données compatibles avec les fragments pour piloter les contrôles ViewPager..