Techniques de défilement pour la conception de matériaux

introduction

L’année dernière, Google a introduit la conception matérielle et il est devenu clair que le mouvement et l’animation seraient deux des fonctionnalités les plus accrocheuses des applications Android modernes. Mais Google n’a pas fourni aux développeurs une solution simple pour les intégrer dans les applications. En conséquence, de nombreuses bibliothèques ont été développées pour résoudre le problème d’intégration.

Cependant, au cours de Google I / O de cette année, Google a introduit la bibliothèque de support Android Design pour faciliter l’adoption de Material Design. Cela permet aux développeurs de se concentrer sur les fonctionnalités qui rendent leurs applications uniques.

1. Régions

Dans ce didacticiel, je vais vous montrer comment implémenter les techniques de défilement présentées dans Spécification de la conception matérielle de Google. Avant de commencer, vous devez vous familiariser avec les régions déroulantes disponibles dans une application Android. Dans l’image suivante, vous pouvez voir qu’il existe quatre régions.

Régions déroulantes dans les applications Android

Barre d’état

C’est là que les notifications apparaissent et que l’état des différentes fonctionnalités de l’appareil s’affiche.

Barre d’outils

La barre d’outils était anciennement connue sous le nom de barre d’action. C’est maintenant une vue plus personnalisable avec les mêmes fonctionnalités.

Barre d’onglets / de recherche

Cette région facultative est utilisée pour afficher les onglets qui catégorisent le contenu de votre application. Vous pouvez en savoir plus sur l’utilisation des onglets et les différentes façons de les afficher dans Spécification de la conception matérielle de Google. Le cas échéant, vous pouvez également l’utiliser dans Navigation latérale de Google.

Espace flexible

C’est ici que vous pouvez afficher des images ou des barres d’applications étendues.

En ce qui concerne les techniques de défilement, ce sont la barre d’outils et la barre d’onglets / de recherche qui répondent lorsque le contenu de votre application défile.

2. Configuration du projet

Pour suivre, vous devez utiliser la dernière version d’Android Studio. Vous pouvez l’obtenir auprès du Site Web des développeurs Android. Pour essayer ces techniques de défilement, je recommande de créer un nouveau projet (avec un niveau d’API minimum de 15), car la mise en page de votre application changera considérablement.

J’ai fourni un projet de démarrage, que vous pouvez télécharger à partir de GitHub. Vous pouvez utiliser le projet de démarrage comme point de départ et utiliser les techniques de défilement dans vos propres applications. Ajoutons d’abord les dépendances suivantes à votre projet build.gradle fichier dans le dossier de l’application:

Avec la première dépendance, vous obtenez la bibliothèque de support de conception Android, qui comprend les nouvelles classes dont nous avons besoin pour ce didacticiel.

Avec la deuxième dépendance, vous obtenez la dernière version de RecyclerView. La version répertoriée dans l’article officiel sur création de listes ne sera pas utile cette fois.

Ensuite, vous allez avoir besoin de quelques données factices pour essayer ces techniques et remplir le RecyclerView. Vous pouvez les implémenter vous-même ou copier l’implémentation depuis le InitialActivity classe dans le projet de démarrage.

3. Technique de défilement 1

Cette technique masque la zone de la barre d’outils lorsque le contenu de votre application est en cours de défilement. Vous pouvez voir la technique en action dans la vidéo suivante.


Pour cette conception de mise en page, vous pouvez penser à quelque chose comme ceci:

Le problème avec cette disposition est que vous devez gérer les événements vous-même, mais ce sera indolore si vous profitez des nouvelles classes. Modifions-le comme suit:

Dans cette nouvelle mise en page, vous pouvez voir que:

  • la RelativeLayout est remplacé par un CoordinatorLayout
  • la Toolbar est enveloppé dans un AppBarLayout
  • la Toolbar et RecyclerView a reçu quelques attributs supplémentaires

Quelles sont ces nouvelles classes?

CoordinatorLayout

Cette disposition est un nouveau conteneur et un suralimenté FrameLayout qui fournit un niveau supplémentaire de contrôle sur les événements tactiles entre les vues enfants.

AppBarLayout

Cette disposition est un autre nouveau conteneur, conçu spécifiquement pour implémenter de nombreuses fonctionnalités du concept de barre d’applications Material Design. Gardez à l’esprit que si vous l’utilisez dans un autre ViewGroup, la plupart de ses fonctionnalités ne fonctionneront pas.

La clé de cette technique de défilement, et de la plupart des autres techniques de défilement dont nous parlerons, est la CoordinatorLayout classe. Cette classe spéciale peut recevoir des événements et les livrer à ses vues enfants afin qu’elles répondent de manière appropriée. Il est conçu pour être utilisé comme vue du conteneur racine.

En relation :  7 jeux mobiles de Noël amusants à jouer sur Android et iOS

Pour activer cette technique, le app:layout_behavior L’attribut indique quelle vue déclenchera les événements dans le Toolbar. Dans ce cas, c’est le RecyclerView.

le app:layout_scrollFlags attribut du Toolbar indique à la vue comment répondre.

le app:layout_scrollFlags L’attribut peut avoir quatre valeurs possibles, qui peuvent être combinées pour créer l’effet souhaité:

scroll

Cet indicateur doit être défini pour toutes les vues qui doivent défiler hors écran. Les vues qui n’utilisent pas cet indicateur restent épinglées en haut de l’écran.

enterAlways

Cet indicateur garantit que tout défilement vers le bas rendra cette vue visible, ce qui permet retour rapide modèle.

enterAlwaysCollapsed

Lorsqu’une vue a déclaré un minHeight et vous utilisez cet indicateur, la vue n’entrera qu’à sa hauteur minimale (réduite), ne s’étendant à sa hauteur totale que lorsque la vue défilante aura atteint son sommet.

exitUntilCollapsed

Cet indicateur fait défiler la vue hors de l’écran jusqu’à ce qu’elle soit réduite (son minHeight est atteint) avant de quitter.

Vous pouvez maintenant exécuter le projet ou appuyer sur Contrôle + R, et voyez cette technique en action.

4. Technique de défilement 2

Cette technique fait défiler la barre d’outils hors de l’écran tandis que la zone de la barre d’onglets reste ancrée en haut. Vous pouvez voir cette technique en action dans la vidéo suivante.


Pour cette technique, je vais réutiliser la mise en page de la technique précédente et ajouter un TabLayout voir à côté du Toolbar, à l’intérieur de AppBarLayout.

le TabLayout view fournit une disposition horizontale pour afficher les onglets. Vous pouvez ajouter n’importe quel nombre d’onglets à l’aide du newTab et définissez son mode de comportement à l’aide de la setTabMode. Commençons par remplir les onglets.

En changeant la valeur du app:layout_scrollFlags attribut, et l’ajout et la suppression de Toolbar et TabLayout, vous pouvez obtenir des animations comme celles utilisées dans:

  • Google Play Store où la barre d’outils se cache et la barre d’onglets reste visible.
  • Foursquare où la barre d’onglets défile hors de l’écran tandis que la barre d’outils reste en haut.
  • Jouer de la musique où la barre d’outils et la barre d’onglets défilent hors de l’écran.

Jetez un œil aux vidéos suivantes pour des exemples de cette technique de défilement.




Vous pouvez exécuter votre projet et voir cette technique de défilement en action.

5. Technique de défilement 3

Pour cette technique de défilement, je vais utiliser la région d’espace flexible que j’ai mentionnée au début de ce tutoriel. Je fais cela pour réduire la hauteur initiale du AppBarLayout pendant que le contenu défile vers le haut. La hauteur de la AppBarLayout augmente à sa hauteur d’origine à mesure que le contenu défile vers le bas. Vous pouvez voir cette technique en action dans la vidéo suivante.


Pour cette technique de défilement, je vais utiliser la disposition suivante:

Cela ressemble certainement à beaucoup de code, alors décomposons-le. Dans cette mise en page, j’ai apporté les modifications suivantes:

  • le Toolbar est enveloppé dans un CollapsingToolBarLayout et les deux éléments sont placés dans le AppBarLayout.
  • le app:layout_scrollFlags l’attribut est déplacé de Toolbar à la CollapsingToolBarLayout, car ce conteneur est désormais en charge de répondre aux événements de défilement.
  • Un nouvel attribut, app:layout_collapseMode, a été ajouté au Toolbar. Cet attribut garantit que le Toolbar reste épinglé en haut de l’écran.
  • le AppBarLayout a une hauteur initiale fixe de 192dp.
  • UNE FloatingActionButton a été ajouté à la mise en page, sous le RecyclerView.

A quoi servent ces nouvelles classes?

CollapsingToolBarLayout

Il s’agit d’une nouvelle vue, spécialement conçue pour envelopper le Toolbar et implémentez une barre d’applications qui se réduit. Lors de l’utilisation du CollapsingToolBarLayout class, vous devez porter une attention particulière aux attributs suivants:

app:contentScrim

Cet attribut spécifie la couleur à afficher lorsqu’il est entièrement réduit.

En relation :  13 citations pour une attitude de reconnaissance

app:expandedTitleMarginStart/app:expandedTitleMarginEnd

Ces attributs spécifient les marges du titre développé. Ils sont utiles si vous prévoyez d’utiliser le setDisplayHomeAsUpEnabled méthode dans votre activité et remplissez les nouveaux espaces créés autour du titre.

FloatingActionButton

Le bouton d’action flottant est un composant important des applications Material Design. Vous pouvez désormais inclure des boutons d’action flottants dans votre mise en page avec seulement quelques lignes de code. Vous pouvez utiliser le app:fabSize attribut à choisir parmi deux tailles différentes, la norme (56dp) et mini (40dp). Standard est la taille par défaut.

L’effet de disparition est obtenu automatiquement en ancrant le bouton d’action flottant au AppBarLayout en utilisant le app:layout_anchor attribut. Vous pouvez également spécifier la position par rapport à cette ancre en utilisant le app:layout_anchorGravity attribut.

Avant d’exécuter le projet, nous devons spécifier dans l’activité que le CollapsingToolBarLayout va afficher le titre au lieu du Toolbar. Jetez un œil à l’extrait de code suivant pour plus de précisions.

Exécutez le projet pour voir la troisième technique de défilement en action.

6. Technique de défilement 4

Cette technique de défilement utilise l’extension AppBarLayout, montré dans la technique précédente, pour afficher une image. Vous pouvez voir cette technique dans la vidéo suivante.


Pour cette technique, je vais réutiliser la mise en page précédente et la modifier légèrement:

Dans cette mise en page, j’ai apporté les modifications suivantes:

  • le android:background l’attribut a été supprimé de AppBarLayout. Parce que le ImageView va remplir cet espace, il n’est pas nécessaire d’avoir une couleur d’arrière-plan.
  • le app:expandedTitleMarginStart et app:expandedTitleMarginEnd les attributs ont été supprimés, car nous n’utilisons pas le setDisplayHomeAsUpEnabled méthode dans l’activité.
  • Un ImageView était ajouté avant la Toolbar. Ceci est important pour éviter que le AppBarLayout affiche une partie de l’image au lieu de la couleur principale lorsqu’elle est réduite.

Vous avez peut-être également remarqué que le ImageView a la app:layout_collapseMode attribut. La valeur de l’attribut est définie sur parallax pour implémenter le défilement parallaxe. De plus, vous pouvez également ajouter le app:layout_collapseParallaxMultiplier attribut pour définir un multiplicateur.

Ce sont tous les changements que vous devez faire pour que cette technique de défilement fonctionne correctement dans votre application. Exécutez le projet pour voir cette technique de défilement en action.

sept. Technique de défilement 5

Pour cette technique de défilement, l’espace flexible est chevauché par le contenu de l’application et fait défiler hors de l’écran lorsque le contenu défile. Vous pouvez voir cette technique en action dans la vidéo suivante.


Pour cette technique, vous pouvez réutiliser la mise en page de la technique précédente, avec quelques petites modifications.

Pour cette mise en page:

  • le ImageView et le FloatingActionButton à l’intérieur de CollapsingToolbarLayout ont été supprimés. Cette technique ne nécessite pas d’image.
  • dans le CollapsingToolbarLayout, la app:contentScrim l’attribut a été remplacé par android:background attribut. Nous faisons cela, car la couleur d’arrière-plan doit correspondre à la Toolbar couleur de fond bien lors de la disparition.
  • le android:background l’attribut a été ajouté au Toolbar.
  • le app:behavior_overlapTop l’attribut a été ajouté au RecyclerView. Il s’agit de l’attribut le plus important pour cette technique de défilement car cet attribut spécifie le degré de chevauchement que la vue doit avoir avec le AppBarLayout. Pour que cet attribut ait effet, il doit être ajouté à la même vue qui a le app:layout_behavior attribut.

Si vous essayez d’utiliser cette technique de défilement avec ces modifications, la mise en page résultante n’aura pas de titre dans le Toolbar. Pour résoudre ce problème, vous pouvez créer un TextView et ajoutez-le au Toolbar par programmation.

Conclusion

Notez que vous n’avez pas besoin d’implémenter chacune de ces techniques dans votre application. Certains seront plus utiles à votre conception que d’autres. Maintenant que vous savez comment mettre en œuvre chacun d’eux, vous pouvez les choisir et les expérimenter.

J’espère que vous avez trouvé ce tutoriel utile. N’oubliez pas de le partager si vous l’avez aimé. Vous pouvez laisser vos commentaires et questions ci-dessous.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.