Besoin de pistes pour un design
heylucienne
Membre
Bonsoir à tous, je cherche à reproduire un comportement de l'application deliveroo ( qui est sans doute l'une des plus sympa que j'aie eu à utiliser )
Une fois qu'on choisit son restaurant on arrive sur la vue que j'aimerais reproduire.
Après quelques recherches j'ai pu comprendre qu'il y avait un effet "parallax" sur l'image.
Ma question est simple, selon vous quels éléments sont utilisés ici pour construire cette vue et de cette manière.
Mes idées:
Nous avons en haut une navbar qui devient sombre à mesure qu'on scroll vers le haut et le title qui apparait à la fin du scroll
En dessous on a l'image d'un plat avec un effet de zoom quand on scroll vers le bas.
Et en dernier j'ai l'impression que c'est une scrollview qui commence un peu plus haut que le milieu de l'écran et qu'on peut scroller jusqu'à la navbar vers le haut.
Est ce que j'oublie quelque chose? J'ai pas mal cherché et j'avoue que j'ai pas vraiment de certitudes sur ce que je dois faire.
Merci à vous et bonne soirée.
Réponses
Quelques copies d'écrans de cette application pourraient être utiles pour analyser son interface graphique.
Pardon, mieux qu'une capture d'écran voici une vidéo qui montre exactement ce que je veux faire.
Le tout en swift, j'ai oublié de préciser
Ce n'est pas une scrollView, qui est un composant graphique assez rudimentaire où il faut gérer à la main le positionnement des objets et leurs affichages/disparitions pour éviter de saturer la mémoire. Il s'agit plutôt d'une tableView ou d'une collectionView.
Oui en fait comme un tableView est une scrollView, j'avais pas précisé... Le contenu dans le rectangle blanc du bas n'est pas important,
Je n'ai pas vraiment besoin que ce soit un tableView en fait.
Ce que je cherche à reproduire c'est surtout ces "animations" au moment du scroll à savoir:
-navBar qui devient plus foncée et ajout du titre une fois que la scrollview semble atteindre une certaine position en y
-effet de zoom sur la photo quand on veut scroller vers le bas alors qu'on ne peut pas
Je pense que l'image est affichée dans une UIImageView en haut de l'écran. L'effet de zoom est réalisé en changeant la hauteur de l'imageView en suivant le mouvement du scrolling.
Le composant scrollable occupe la totalité de l'écran, à l'exception de la barre de navigation du haut. On a l'impression qu'il commence au 2/3 de la hauteur parce le haut est en couleur transparente, ce qui permet de voir l'image placée sous les autres éléments.
En surveillant la position courante du scrolling, on peut ajuster la hauteur du UIImageView contenant l'image, pour augmenter ou réduire sa taille apparente. Même chose pour l'apparition du titre et la couleur de la barre de navigation.
C'était effectivement une de mes idées... Concernant la vue du bas tu as une idée?
Voici un petit schéma pour voir si je pars dans la bonne direction
La bordure verte représente la scrollview, dont le premier élément est à un margin top particulier.
En faisant cela on peut scroller le rectangle vert vers le haut comme dans la vidéo. Quand le rectangle vert atteint le bas du cadre noir lors d'un scroll vers le bas, je modifie la taille de mon image view pour donner cet effet de zoom.
Quand le haut du rectangle vert touche la bordure rouge, je commence l'animation sur la navbar.
Ca semble correct?
Oui, cela semble correct. Bonne chance pour tes essais.
Il y a pas mal d'exemples sur CocoaControls qui devraient te donner de l'inspiration: Recherche sur TableView, UITableView, Parallax, etc.
Je ne dis pas de les utiliser tels quels, mais potentiellement de voir comment différentes personnes ont réalisé leur truc, d'en déduire la " meilleure " (j'insiste aussi entre parenthèses sur la présence des guillemets) façon ensuite de faire ta version.
C'est comme l'application Deezer par exemple.
En fait il y a plusieurs façons de le faire mais l'un des plus simples je pense c'est de jouer sur la propriété contentInset du TableView pour faire démarrer ta première cellule à X (qui correspond au maxY de ton image) sur l'axe des ordonné. Sur le storyboard il faut placer l'image derrière le tableView. Ensuite quand tu scroll ton image sera caché progressivement.
Pour la barre de navigation c'est toi qui gère son apparence en fonction de la position du ScrollView.
Salut,
Pas mal d'applications utilisent cette effet, Twitter par exemple dans la rubrique "moi".
j'avais fait une demande similaire pour reproduire ces effets et on m'avait renvoyé vers ce tuto :
https://www.cocoacontrols.com/controls/gkfadenavigationcontroller
En fait, c'est un concept de navigation bar étendue. Cela n'a de sens que si la vue de détails contient à la fois une "mini-fiche" et une liste.
Quand on arrive dans une vue de détails, la vue Navigation bar est initialement étendue pour montrer plus d'informations que le simple "titre" ; puis quand on scrolle pour visualiser la liste, cette mini fiche d'informations se transforme en barre de navigation réduite qui ne contient que le titre.
Donc, logiquement, une implémentation réutilisable devrait se faire dans la navigation bar, via une propriété titleView.
Le concept peut se défendre, mais il y a plusieurs soucis :
-le fait que les boutons de navigations soient initialement "en l'air" sur la fiche,
-les boutons de navigation ne peuvent pas s'appliquer à la liste puisqu'ils sont initialement sur la fiche, pas de bouton + par exemple,
-l'animation ne sert à rien, elle ne donne aucune information à l'utilisateur.
Pour moi c'est plutôt un concept pour un catalogue en readonly (restaurants, séances de cinéma, etc).
Si je pouvais, je lancerais bien une collection d'app "no-bs" (no-bullshit), en noir et blanc, avec que des contrôles standard et des animations utiles. Un client twitter, une application de notes, un player de musique, etc. Ce serait rafraà®chissant. Et cela finira par être à la mode.
Y'a pas mal de composant sur GitHub qui font exactement ca. (le réécrire c'est mieux mais si on veut gagner du temps...)
J'utilise par exemple IOStickyHeader