Création d'un carrousel

Cet article évoque la création d'un carrousel. Ce type d'affichage est de plus en plus courant et permet de présenter un grand nombre d'éléments à l'utilisateur.

Commentez Donner une note à l'article (0)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Share on Google+ 

I. Introduction

Cette implémentation n'est plus au goût du jour (l'API d'Android ayant énormement évoluée, il existe des moyens plus élégants et robustes pour arriver à ce résultat). Malgré cela, j'ai choisi de laisser le source code disponible au téléchargement.

Le carrousel est un moyen de présenter à l'utilisateur un grand nombre d'éléments. Ce que nous appelons des éléments sont en fait des vues : une image, un bouton ou une vue plus complexe. Le carrousel peut être comparé à un Layout, à l'exception près qu'il doit être muni d'intelligence pour se composer et récupérer les vues à afficher. L'originalité de ce type d'affichage provient de la manière dont les éléments sont présentés à l'utilisateur, puisque ceux-ci forment une sorte de liste parmi laquelle l'utilisateur navigue du bout des doigts.



II. Précisons le carrousel réalisé

Nous allons présenter le résultat final ainsi que le fonctionnement et les spécifications de notre carrousel.

II-A. Le design de notre carrousel

Nous proposons le design suivant pour notre carrousel.

Image non disponible
Carrousel variante 1

Les vues que le carrousel doit afficher sont superposées les unes sur les autres de telle manière qu'on ait une impression de profondeur. Étant dans un contexte uniquement en deux dimensions, nous allons jouer sur les échelles et la chronologie d'affichage des vues à l'écran pour donner une impression de relief.

II-B. Les variantes

Nous veillerons tout au long de l'article à centraliser les opérations de positionnement des vues et les opérations de dessin. L'intérêt est que nous allons pouvoir facilement modifier l'affichage de notre carrousel, avec très peu d'incidence sur le code, tout en proposant des rendus différents. Voici quelques exemples de rendu que nous expliciterons à la fin de cet article.

Image non disponible
Carrousel variante 2
Image non disponible
Carrousel variante 3
Image non disponible
Carrousel variante 4

II-C. Informations

Pour le moment, uniquement le code source est disponible. Le contenu de l'article est en cours de modifications. Merci de votre compréhension.

IV. Remerciements

Je tiens à remercier les membres de l'équipe de Developpez.com, jacques_jean pour son aide à la relecture de ce tutoriel.

V. Liens

Vous trouverez ci-dessous l'ensemble des liens pour télécharger les différents codes source et packages Android.

Le carrousel avec animation :
Le carrousel avec animation variante 1 :
  

Copyright © 2010 Davy Leggieri. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.