Maintenant que la bibliothèque de support de conception Android est sortie, est-ce que quelqu'un sait comment implémenter le menu Fab étendu avec elle, comme le fab sur l'application Inbox?
Devrait ressembler à ceci:
Maintenant que la bibliothèque de support de conception Android est sortie, est-ce que quelqu'un sait comment implémenter le menu Fab étendu avec elle, comme le fab sur l'application Inbox?
Devrait ressembler à ceci:
Réponses:
Actuellement, aucun widget n'est fourni dans la bibliothèque de conception. La seule façon de le faire rapidement et facilement est d'utiliser des bibliothèques tierces.
Vous pouvez évidemment le faire en utilisant la bibliothèque de conception, mais ce sera un travail énorme et nécessitera beaucoup de temps. J'ai mentionné quelques bibliothèques utiles, qui peuvent vous aider à atteindre cet objectif.
J'utilise le 4ème.
la source
Vous avez une meilleure approche pour implémenter le menu FAB animé sans utiliser de bibliothèque ou pour écrire un énorme code XML pour les animations. J'espère que cela aidera à l'avenir pour quelqu'un qui a besoin d'un moyen simple de le mettre en œuvre.
En utilisant simplement la
animate().translationY()
fonction, vous pouvez animer n'importe quelle vue vers le haut ou vers le bas, comme je l'ai fait dans mon code ci-dessous, vérifiez le code complet dans github . Si vous recherchez le même code dans kotlin, vous pouvez consulter le menu d' animation FAB du repo de code kotlin .définissez d'abord tous vos FAB au même endroit afin qu'ils se chevauchent, rappelez-vous en haut que le FAB doit être celui que vous voulez cliquer et en afficher les autres. par exemple:
Maintenant, dans votre classe java, définissez simplement tous vos FAB et effectuez le clic comme indiqué ci-dessous:
Utilisez le
animation().translationY()
pour animer votre FAB, je préfère que vous utilisiez l'attribut de cette méthode dans DP car seule l'utilisation d'un int affectera la compatibilité d'affichage avec une résolution plus élevée ou une résolution inférieure. comme indiqué ci-dessous:Définissez maintenant la dimension mentionnée ci-dessus dans res-> values-> dimens.xml comme indiqué ci-dessous:
C'est tout l'espoir que cette solution aidera les gens à l'avenir, qui recherchent une solution simple.
Si vous souhaitez ajouter une étiquette sur le FAB, prenez simplement un LinearLayout horizontal et placez le FAB avec textview comme étiquette, et animez les mises en page si vous rencontrez un problème en faisant cela, vous pouvez vérifier mon exemple de code dans github, j'ai géré toute la compatibilité descendante problèmes dans cet exemple de code. vérifier mon exemple de code pour FABMenu dans Github
pour fermer le FAB sur Backpress, remplacez onBackPress () comme indiqué ci-dessous:
La capture d'écran a également le titre avec le FAB, car je le prends de mon exemple d'application présent dans
la source
Commencez par créer les dispositions de menu dans le fichier xml de votre disposition d'activité. Par exemple, une mise en page linéaire avec une orientation horizontale et inclure un TextView pour l'étiquette puis un bouton d'action flottant à côté de TextView.
Créez les dispositions de menu selon vos besoins et votre numéro.
Créez un bouton d'action flottant de base et en cliquant dessus, modifiez la visibilité des dispositions de menu.
Veuillez vérifier le code ci-dessous pour la référence et pour plus d'informations, consultez mon projet depuis github
Commander un projet depuis Github
Ce sont les animations-
Animation d'ouverture du menu FAB:
Animation de fermeture du menu FAB:
Ensuite, dans mon activité, j'ai simplement utilisé les animations ci-dessus pour afficher et masquer le menu FAB:
Afficher le menu Fab:
Fermer le menu Fab:
Voici la classe d'activité -
Voici les captures d'écran
la source
Une autre bibliothèque mettant en œuvre le numéro abrégé à partir des directives de conception de matériaux:
https://github.com/leinardi/FloatingActionButtonSpeedDial
la source
Lorsque j'ai essayé de créer quelque chose de similaire au bouton d'action flottant de la boîte de réception, j'ai pensé à créer mon propre composant personnalisé.
Ce serait une simple mise en page de cadre avec une hauteur fixe (pour contenir le menu développé) contenant le bouton FAB et 3 autres placés sous le FAB. lorsque vous cliquez sur FAB, vous animez simplement d'autres boutons à traduire sous le FAB.
Il existe des bibliothèques qui font cela (par exemple https://github.com/futuresimple/android-floating-action-button ), mais c'est toujours plus amusant si vous le créez vous-même :)
la source
layout_anchor
etlayout_anchorGravity
ne travaillent pas pour moiVous pouvez utiliser la bibliothèque FloatingActionMenu ou cliquer ici pour un didacticiel étape par étape. Sortie du tutoriel:
la source
J'utilise cette bibliothèque pour ce faire: https://github.com/futuresimple/android-floating-action-button
Assez simple à utiliser;)
la source
layout_anchor
etlayout_anchorGravity
ne travaillent pas pour moiUne autre option pour le même résultat avec l'animation ConstraintSet:
1) Mettez toutes les vues animées dans un seul ConstraintLayout
2) Animez-le à partir d'un code comme celui-ci (si vous voulez plus d'effets, c'est à vous de décider ... ce n'est qu'un exemple)
menuItem1 et menuItem2 sont les premier et deuxième FAB dans le menu, descriptionItem1 et descriptionItem2 est la description à gauche du menu, parentConstraintLayout est la racine ConstraintLayout qui contient toutes les vues animées, isMenuOpened est une fonction pour changer le drapeau ouvert / fermé dans l'état
J'ai mis le code d'animation dans le fichier d'extension mais ce n'est pas nécessaire.
la source