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:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab3"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_btn_speak_now" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_menu_camera" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab1"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_dialog_map" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_dialog_email" />
Maintenant, dans votre classe java, définissez simplement tous vos FAB et effectuez le clic comme indiqué ci-dessous:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab1 = (FloatingActionButton) findViewById(R.id.fab1);
fab2 = (FloatingActionButton) findViewById(R.id.fab2);
fab3 = (FloatingActionButton) findViewById(R.id.fab3);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(!isFABOpen){
showFABMenu();
}else{
closeFABMenu();
}
}
});
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:
private void showFABMenu(){
isFABOpen=true;
fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55));
fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105));
fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155));
}
private void closeFABMenu(){
isFABOpen=false;
fab1.animate().translationY(0);
fab2.animate().translationY(0);
fab3.animate().translationY(0);
}
Définissez maintenant la dimension mentionnée ci-dessus dans res-> values-> dimens.xml comme indiqué ci-dessous:
<dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>
C'est tout l'espoir que cette solution aidera les gens à l'avenir, qui recherchent une solution simple.
ÉDITÉ
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:
@Override
public void onBackPressed() {
if(!isFABOpen){
this.super.onBackPressed();
}else{
closeFABMenu();
}
}
La capture d'écran a également le titre avec le FAB, car je le prends de mon exemple d'application présent dans
