L'année dernière, Google a lancé Material Design et il est devenu évident que le mouvement et l'animation seraient deux des fonctionnalités les plus remarquables des applications Android modernes. Mais Google n'a pas fourni aux développeurs de solution facile 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 de l'intégration.
Au cours de cette année, cependant, lors de l'entrée / sortie de Google dans Google, 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 tutoriel, je vais vous montrer comment implémenter les techniques de défilement décrites dans les spécifications de Google Material Design. Avant de commencer, vous devez vous familiariser avec les régions à défilement disponibles dans une application Android. Dans l'image suivante, vous pouvez voir qu'il y a quatre régions.
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 auparavant appelée barre d’action. C'est maintenant une vue plus personnalisable avec les mêmes fonctionnalités.
Onglet / barre de recherche
Cette région facultative est utilisée pour afficher les onglets qui catégorisent le contenu de votre application. Pour en savoir plus sur l'utilisation des onglets et sur les différentes manières de les afficher dans les spécifications de Google Material Design. Lorsque cela vous convient, vous pouvez également l'utiliser dans la navigation latérale de Google..
Espace flexible
C’est ici que vous pouvez afficher des images ou des barres d’application étendues.
En ce qui concerne les techniques de défilement, ce sont la barre d’outils et la barre d’onglet / barre de recherche qui répondent lorsque le contenu de votre application défile.
2. Configuration du projet
Pour suivre, vous devriez utiliser la dernière version d'Android Studio. Vous pouvez l'obtenir sur le site Web Android Developer. Pour essayer ces techniques de défilement, je vous recommande de créer un nouveau projet (avec un niveau d'API minimum de 15), car la présentation de votre application changera de manière significative..
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 Android Design, qui inclut les nouvelles classes dont nous avons besoin pour ce tutoriel..
Avec la deuxième dépendance, vous obtenez la dernière version de RecyclerVoir. La version listée dans l'article officiel sur la création de listes ne sera pas utile cette fois.
Ensuite, vous allez avoir besoin de données factices pour essayer ces techniques et remplir le RecyclerVoir. Vous pouvez les implémenter vous-même ou copier l’implémentation à partir du Activité initiale classe dans le projet de démarrage.
3. Technique de défilement 1
Cette technique masque la zone de la barre d’outils lors du défilement du contenu de votre application. Vous pouvez voir la technique en action dans la vidéo suivante.
Pour cette 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 sans douleur si vous tirez parti des nouvelles classes. Modifions le comme suit:
Dans cette nouvelle mise en page, vous pouvez voir que:
la Disposition relative est remplacé par un Coordonnateur
la Barre d'outils est enveloppé dans un AppBarLayout
la Barre d'outils et RecyclerVoir reçu quelques attributs supplémentaires
Quelles sont ces nouvelles classes?
Coordonnateur
Cette mise en page est un nouveau conteneur et un suralimenté FrameLayout qui fournit un niveau supplémentaire de contrôle des événements tactiles entre les vues enfants.
AppBarLayout
Cette disposition est un autre nouveau conteneur, conçu spécifiquement pour implémenter un grand nombre des fonctionnalités du concept de barre d’application 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 allons parler, est la Coordonnateur classe. Cette classe spéciale peut recevoir des événements depuis et transmettre des événements à ses vues enfant afin qu'elles répondent correctement. Il est conçu pour être utilisé comme vue conteneur racine..
Pour activer cette technique, le app: layout_behavior attribut indique quelle vue déclenchera les événements dans le Barre d'outils. Dans ce cas, c'est le RecyclerVoir.
le app: layout_scrollFlags attribut du Barre d'outils indique à la vue comment réagir.
app: layout_scrollFlags = “scroll | enterAlways"
le app: layout_scrollFlags attribut peut avoir quatre valeurs possibles, qui peuvent être combinées pour créer l’effet souhaité:
faire défiler
Cet indicateur doit être défini pour toutes les vues nécessitant un défilement hors écran. Les vues qui n'utilisent pas cet indicateur restent épinglées en haut de l'écran..
entrer toujours
Cet indicateur garantit que tout défilement vers le bas rendra cette vue visible, permettant ainsi au retour rapide modèle.
enterAlwaysCollapsed
Quand une vue a déclaré un minHeight et si vous utilisez ce drapeau, la vue n’entre que dans sa hauteur minimale (réduite), ne s’agrandissant à sa hauteur maximale que lorsque la vue défilante a atteint son sommet..
exitUntilCollapsed
Cet indicateur provoque le défilement de la vue hors é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 voir cette technique en action.
4. Technique de défilement 2
Cette technique fait défiler la barre d'outils en dehors de l'écran tandis que la région 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 vue à côté de la Barre d'outils, à l'intérieur de AppBarLayout.
le TabLayout La vue fournit une disposition horizontale pour afficher les onglets. Vous pouvez ajouter un nombre quelconque d’onglets à l’aide des touches nouvel onglet méthode et définir son mode de comportement en utilisant le setTabMode. Commençons par remplir les onglets.
En modifiant la valeur de la app: layout_scrollFlags attribut, et l'ajout et la suppression de la Barre d'outils 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 écran.
Regardez les 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 mentionnée au début de ce didacticiel. 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. 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 Barre d'outils est enveloppé dans un CollapsingToolBarLayout et les deux éléments sont mis dans le AppBarLayout.
le app: layout_scrollFlags attribut est déplacé de la Barre d'outils au CollapsingToolBarLayout, parce que ce conteneur est maintenant en charge de répondre aux événements de défilement.
Un nouvel attribut, app: layout_collapseMode, a été ajouté à la Barre d'outils. Cet attribut garantit que le Barre d'outils 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, en dessous de la RecyclerVoir.
A quoi servent ces nouvelles classes?
CollapsingToolBarLayout
Ceci est une nouvelle vue, conçue spécifiquement pour emballer le Barre d'outils et implémenter une barre d'application qui s'effondre. Lorsque vous utilisez le CollapsingToolBarLayout classe, vous devez accorder une attention particulière aux attributs suivants:
application: contentScrim
Cet attribut spécifie la couleur à afficher quand il est complètement réduit.
Ces attributs spécifient les marges du titre développé. Ils sont utiles si vous envisagez d’utiliser le setDisplayHomeAsUpEnabled méthode dans votre activité et remplissez les nouveaux espaces créés autour du titre.
FloatingActionButton
Le bouton d'action flottante est un composant important des applications Material Design. Vous pouvez maintenant 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 flottante 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 à la place du Barre d'outils. Jetez un coup d'œ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 le mode étendu 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: fond attribut a été retiré de la AppBarLayout. Parce que le ImageView va remplir cet espace, il n'y a pas besoin d'avoir une couleur de fond.
le app: expandTitleMarginStart et app: expandTitleMarginEnd les attributs ont été supprimés, car nous n'utilisons pas le setDisplayHomeAsUpEnabled méthode dans l'activité.
Un ImageView était ajouté avant la Barre d'outils. Ceci est important pour éviter que le AppBarLayout montre une partie de l'image à la place de la couleur primaire lorsqu'elle est réduite.
Vous avez peut-être aussi remarqué que le ImageView a la app: layout_collapseMode attribut. La valeur de l'attribut est définie sur parallaxe mettre en œuvre le défilement parallaxe. En outre, 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.
7. Technique de défilement 5
Pour cette technique de défilement, l’espace flexible est recouvert par le contenu de l’application et défile à 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 application: contentScrim attribut a été remplacé par le Android: fond attribut. Nous faisons cela, car la couleur de fond doit correspondre à la couleur Barre d'outils couleur de fond joliment disparue.
le Android: fond attribut a été ajouté à la Barre d'outils.
le app: behavior_overlapTop attribut a été ajouté à la RecyclerVoir. C'est l'attribut le plus important pour cette technique de défilement, car il 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 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 la liste. Barre d'outils. Pour résoudre ce problème, vous pouvez créer un Affichage et l'ajouter à la Barre d'outils par programmation.
TextView text = new TextView (this); text.setText (R.string.title_activity_technique5); text.setTextAppearance (this, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse); toolbar.addView (text);
Conclusion
Notez que vous n'avez pas besoin de mettre en œuvre chacune de ces techniques dans votre application. Certains seront plus utiles à votre conception que d'autres. Maintenant que vous savez comment les implémenter, 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 cela vous a plu. Vous pouvez laisser des commentaires et des questions ci-dessous.
Share
Accentsconagua
