Comment naviguer au doigt entre des vues ?

[Jorodan]

Bonjour à tous,

Je viens vers vous pour pas qu'Arnouf me trouve relou à toujours lui poser des questions de dev!! xD

Je cherche à réaliser une navigation entre des vues à la manière de ce qui se fait sur la home, ou sur le calendrier en mode semaine.

Le truc que je cherche c'est à ce que le changement de vue suive le mouvement du doigt et que tant que je n'ai pas relaché la pression du doigt, je vois une partie de l'ancienne vue et une partie de la nouvelle.

Actuellement, je fais cela avec une gesture (si j'ai bien compris le conseil d'Arnouf xD). Mais ca ne me convient pas car l'animation n'est déclenchée qu'une fois le tracé du doigt réalisé.

Je ne trouve pas les bons mots clés en anglais pour faire une recherche de Tuto. Donc si quelqu'un a l'amabilité de m'expliquer comment faire cette animation ou de m'envoyer vers un tuto qui l'explique il aura droit a un bonbon :)

Merci d'avance!

[Kuiplo]

J'ai regardé vite fait les sources du home de base pour voir comment c'est géré :

http://android.git.kernel.org/?p=platform/packages/apps/Launcher2.git;a=tree

En fait, ils utilisent une view custom pour gérer les différents écrans (Workspace.java).

Ils ont une référence sur l'écran courant, et une référence sur l'écran vers lequel tu "scroll".

Dans la méthode "dispatchDraw", si tu est en train de scroller vers un écran, ils dessinent les 2 vues (avec les décalages qui vont bien dus à ton scroll).

Par contre ils n'utilisent pas les gesture selon moi, ils doivent surement utiliser les MotionEvent (méthode OnTouchEvent), pour suivre le tracer de l'utilisateur, et déterminer ainsi la distance entre le point initial où tu as touché l'écran, et le point courant dans le mouvement.

Si tu veux plus de détail, je pense que le mieux est de regarder les sources du home de base.

[Jorodan]

Ok merci.

Si j'y arrive, je fais un tuto! :)

[Alocaly]

Il me semblait que les viewFlipper servaient à ca.

Mais j'ai pas super bien regardé :(

Emmanuel / Alocaly

[Nivek]

J'ai utilisé le ViewFlipper pour les slideshows d'EmailAlbum. Cela ne permet pas d'atteindre la précision voulue par Jorodan par rapport au suivi du tracé de l'utilisateur. Le principe est plutôt :

• On affiche une vue
  
• On détecte un gesture de l'utilisateur
  
• On affiche une animation de transition
  
• On affiche la vue suivante
  

Les mouvements en "temps réel" selon le suivi du tracé sont plus complexes et ne me semblent pas être très outillés pour le moment dans l'API.

J'ai l'exemple également de la listview modifiable par drag'n'drop où j'ai du reprendre le TouchInterceptor.java de l'appli musique pour arriver à mes fins.

[Jorodan]

Je confirme l'analyse de Nivek sur le ViewFlipper :)

[chris2a]

Salut !

J'aimerais essayer de mettre en place la même chose et donc je voulais savoir si depuis ton premier post tu avais réussi à implémenter cette fonction ou si tu avais trouvé des tutos ?

Merci beaucoup !!!

[Profete162]

Si j'y arrive, je fais un tuto! :)

+1 karma virtuel

[chris2a]

j'ai trouvé un exemple qui a l'air sympa !!

http://www.zumodrive.com/files?key=5SBbYzk0Mj#item=170533463

[eric.taix]

Ayant trouvé hier la piste pour implémenter un workspace like, je me devais de poster la solution ici !

Donc voilà, je suis parti des sources de Android pour définir un WorkspaceView, tout en enlevant la gestion des CellLayout (qui permet de poser les raccourcis d'application sur le bureau, ainsi que la gestion des folders) !

Cette View peut contenir différentes vues et/ou layout, chaque enfant étant posé sur un "écran différent".

Ensuite la vue gère le swipe left/right pour passer d'une vue à l'autre de façon esthétique en suivant le doigt, gère le changement d'écran en fonction de la position de relâchement et ainsi que la velocité de mouvement qui permet de changer d'écran pour peu que l'on ait envoyé la page (même sur une faible distance) avec suffisamment de force...

Et voilà !

Je livre en pièce jointe le code source, ainsi qu'une Activity de test. J'ai d'ailleurs pu tester que les clicks longs ou courts sur les ListView sont bien gérés. Seule chose que j'ai enlevé car me provoquait un bug sur les ListView c'est la gestion du cache lors du scrolling. Pour mon test cela a paru quand même très fluide (sur HTC Hero).

N'hésitez pas à poster vos impressions et remarques. Il doit rester des bugs notamment dans l'exemple fournit où la 3ème vue est certaines fois difficile à bouger (mais il faut insister: pas eu le temps de chercher pourquoi). IL faudrait rajouter la gestion d'un listener de type OnScreenChange par exemple pour permettre à l'application de rafraichir les données de la page qui est affichée !

Merci encore à Kuiplo qui par son lien m'a permis en quelques heures de réaliser cette implémentation qui me sera bien utile pour un projet.

PS: J'ai gardé la gestion d'une image en background, ca peut toujours servir à quelqu'un.

Allez je vous ai même fait une petite vidéo sur le résultat de l'exemple livré dans les sources joints:

Dans la vidéo on voit des sacades mais c'est le logiciel de capture du téléphone et pas l'application.

Eric

Modifié 19 août 2010 par eric.taix

[Nivek]

Excellent, merci ! Faudra que je jette un oeil un de ces 4 pour un éventuel remplacement de mon vieux ViewFlipper... ah mais non parce que ca ne permet pas d'autres transition que de la simple translation... bon bref, merci ! Je suis sûr que ça me servira un jour ou l'autre :)

[eric.taix]

Au fait Jorodan, n'oublie pas le bonbon que tu avais promis !!!

[akex]

Intéressant :). Pourrais me servir prochainement.

Merci pour ta contribution.

[naholyr]

Super taf eric !

C'est vrai que ce type de vue peut être utile assez souvent... Notamment pour des jeux où on a toujours un manque de place si on veut tout afficher ;) ça permet d'avoir plusieurs écrans sans changer d'activité, et sans avoir à perdre de la place avec des titres d'onglet.

[eephyne]

super !

Pour la troisième vue j'ai trouvé le problème mais pas la solution <<

ça vient du type de view , j'ai testé les Relative et Image et toutes deux ne fonctionne pas , ça vient du onInterceptTouchEvent , qui -on dirait- ne marche pas sur le ACTION_MOVE de ces view , il passe donc directement sur le onTouchEvent et vu que la variable touchState n'a pas été mise à 1 comme il le fallait , ça ne bouge pas

[eric.taix]

Je viens de créer un projet sur Google code pour partager le WorkspaceView (et d'autres vues à venir).

http://code.google.com/p/andro-views/

Le projet est opensource sous licence Apache 2 donc utilisable à souhait et ce gratuitement. Si vous corrigez des bugs, merci d'en faire profiter la communauté en m'envoyant vos fix depuis la page du projet.

[Jorodan]

Très très bon. Merci !

[eric.taix]

Pour ceux que cela peut encore intéresser: le projet sur Google Code n'est plus maintenu. J'ai plutôt contribué à un autre projet sur GitHub de Patrik Åkerfeldt (https://github.com/pakerfeldt/android-viewflow). Tout d'abord les bugs existants sur mon projet n'existent pas sur celui ci ! De plus nous avons rajouté un système de FlowIndicator permettant de savoir sur quelle page se trouve l'utilisateur (regardez les screenshots) et vous pouvez rajouter vos propres FlowIndicator.

Les FlowIndicators livrés de base:

Pour ceux qui utilisent ActionBarSherlock et le ViewPager de la Compatibility library, ils peuvent se reporter au projet de Jake Whartson (https://github.com/JakeWharton/Android-ViewPagerIndicator) qui a forké le projet AndroidViewFlow.

[Touch69]

Bonjour, je suis désolé de déterrer ce sujet de un ou deux mois, mais j'ai un problème avec le code proposé par eric.taix.

J'essaie désespérément d'intégrer le code à mon projet mais rien n'y fait, je n'y arrive pas. Quand j'essaie d'ajouter ViewFlow.jar à mon projet, il me dit qu'il contient déjà un androidmanifest.xml et qu'il est donc impossible de lancer l'application dans l'émulateur.

Si eric.taix pouvait m'aider ou bien même les autres cela me serait très gentil et je vous en remercierais profondément.

Merci d'avance.