iOS - Vue scrollable et draggable, comment faire ?

#1

Bonsoir tout le monde,

J’aimerai faire le même style de fenêtre que l’application Maps d’Apple (Plans), seulement, j’aimerai votre avis pour savoir comment cela peut-être fait ?
La vue que je souhaite réaliser est la suivante :

J’ai l’impression qu’il s’agit d’une table view qui commence en bas de la fenêtre, et ensuite, on peut l’étendre sur tout l’écran, ou la réduire. Seulement, comment faire pour la réduire ou l’agrandir avec des mouvements comme sur ce gif ?

Tous vos avis m’intéresse, il y a peut-être plusieurs moyens de faire :slightly_smiling_face:

Merci à vous,
Bonne soirée,

Alexandre

#2

Je ne suis pas persuadé que la taille de la tableView soit modifié. Je dirais plutôt que sa position d’affichage est modifié, probablement par l’intermédiaire d’une gesture verticale.

#3

Oui oui, par agrandir et réduire, je voulais dire sur le rendu à l’ecran, mais en effet, c’est plutôt une gesture.

Ce qui m’intrigue au niveau de cette gesture, c’est que, à priori, je peux la faire partout sur la vue en question, donc, je devrais mettre la gesture sur la vue en tant que tel ?

Pour être honnête, je n’ai pas encore eu le temps d’essayer, je me renseigne vers où chercher, et puis j’essayerai :slightly_smiling_face:

#4

Oui, tu places la gesture verticale sur la vue de la tableView, pour pouvoir la déplacer de partout. Je viens de tester, c’est comme ça que fonctionne l’application Plan d’Apple. Et des gestures de tap sur les cellules si tu as besoin de les sélectionner individuellement.

#5

Tu peux aussi utiliser tout simplement une contrainte verticale entre le haut de ta tableview et le haut de l’écran. Puis tu as plusieurs modifs possibles en agissant uniquement sur la constante de ta contrainte :

  • En le mettant à 20, ça remonte ta vue presque jusqu’en haut
  • En le mettant à la taille de ton écran moins 50 ça te fait ta position basse
  • Pendant le drag, tu peux prendre la position du doigt et appliquer le y à cette contrainte

Tu peux surveiller les taps sur le champ texte ou sur le bouton au dessus pour afficher/masquer ta vue, puis surveiller les drags pour permettre à l’utilisateur de tirer manuellement le volet vers le haut.
Tu peux animer les changements hors drag comme on l’a vu dans le chapitre sur les animations basées sur les contraintes.

#6

Bonjour Alexandre,

Je mets en lien un tuto trouvé le web permettant de programmer ce type d’animation à partir de UIViewPropertyAnimator, de reconnaissance de geste, gestion de contraintes, etc…

Le lien du tuto : http://www.swiftkickmobile.com/building-better-app-animations-swift-uiviewpropertyanimator/

Bonne journée.

#7

Merci à tous pour vos réponses, j’y jette un oeil dès que j’ai un peu de temps ! :grin:

Bonne soirée à tout le monde,

#8

Hello Alexandre,

Voici un autre article sur le sujet
Re-creating the Siri Shortcuts Drawer Interaction

:v:t2:

1 Like