Table des matières
FloatingActionButton (FAB) avec BottomAppBar – Le démarrage
Je me suis toujours demandé en utilisant flottantActionButton que je pouvais faire ce type d’animations avec ça. BottomAppBar a maintenant résolu ce problème. Vous pouvez animer votre FAB avec bottomAppBar.
Permettez-moi de vous montrer comment le faire!
1) Ajout de BottomAppBar:
Tout ce que vous avez à faire est de créer un nouveau projet et d’ajouter cette dépendance.
implementation 'com.google.android.material:material:1.1.0'
C’est conception matérielle dépendance qui vous permet d’implémenter de nouveaux composants matériels. BottomAppBar est l’un d’entre eux.
Je vous invite à parcourir la section des composants de material.io documentation pour plus de nouvelles choses à savoir!
Maintenant, après avoir ajouté cette dépendance, ouvrez votre activity_main.xml.
BottomAppBar fonctionne avec coordinatorLayout , transformez donc votre vue parent en coordinatorLayout comme ça.
Maintenant, dans le panneau de conception, vous verrez quelque chose comme ça.
Ne vous inquiétez pas, c’est parce que bottomAppBar est fourni avec le thème des composants matériels et dans votre projet par défaut votre thème est AppCompat.
Theme.AppCompat.Light.DarkActionBar
Sélectionner AppComponent et écris MaterialComponents au lieu.
Accédez à votre xml, bottomAppBar doit être là!
2) Ajout de FloatingActionButton (FAB)
J’utilise FAB qui vient avec un paquet de matériel, c’est-à-dire material.floatingactionbutton .
FAB montre en haut! Nous avons besoin qu’il soit au milieu de la bottomAppBar. Pour ce faire, définissez le app:layout_anchor attribut de flottantActionButton et référencer le id de bottomAppBar.
Vous verrez votre FAB se déplacer complètement au milieu de bottomAppBar.
La partie principale de cet article, vous ne pouvez pas animer votre bottomAppBar et FAB à partir de XML. Vous avez besoin de code pour y arriver.
1) FAB coulissant
Nous devons définir fabAlignmentMode de bottomAppBar. Par défaut, il est activé center . Afin d’animer FAB, je vais définir cet attribut par programmation.
Exécutez votre application!
Par défaut, bottomAppBar a fabAnimationMode mis à scale en xml. Vous pouvez le changer en slide pour avoir une expérience glissante de FAB!
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabAnimationMode="slide"/> Exécutez votre application.
2) BottomAppBar coulissant
Le comportement de BottomAppBar deviendrait slideUp et slidedown . Je vais le rendre très simple juste pour vous faire comprendre.
Exécutez votre application.
Vous pouvez jouer avec en appliquant différents scénarios. Vous pouvez également animer fab avec le coulissement bottomAppBar.
Je vous laisse ceci 😉 Vous auriez besoin de combiner le code ci-dessus.
