Conseguí un mejor enfoque para implementar el menú FAB de animación sin usar ninguna biblioteca o escribir un enorme código xml para animaciones. Espero que esto ayude en el futuro para alguien que necesita una forma simple de implementar esto.
Simplemente usando la animate().translationY()función, puede animar cualquier vista hacia arriba o hacia abajo como hice en mi código a continuación, verifique el código completo en github . En caso de que esté buscando el mismo código en kotlin, puede consultar el repositorio de código de kotlin Animating FAB Menu .
Primero defina todas sus FAB en el mismo lugar para que se superpongan entre sí, recuerde que la FAB debe ser que desea hacer clic y mostrar otra. p.ej:
<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" />
Ahora en su clase de Java simplemente defina todos sus FAB y realice el clic como se muestra a continuación:
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();
}
}
});
Use el animation().translationY()para animar su FAB, prefiero que use el atributo de este método en DP ya que solo usar un int afectará la compatibilidad de la pantalla con una resolución más alta o más baja. Como se muestra abajo:
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);
}
Ahora defina la dimensión mencionada anteriormente dentro de res-> valores-> dimens.xml como se muestra a continuación:
<dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>
Eso es todo, espero que esta solución ayude a las personas en el futuro, que están buscando una solución simple.
EDITADO
Si desea agregar una etiqueta sobre el FAB, simplemente tome un LinearLayout horizontal y coloque el FAB con la vista de texto como etiqueta, y anime los diseños si encuentra algún problema al hacer esto, puede verificar mi código de muestra en github, me he encargado de toda la compatibilidad con versiones anteriores problemas en ese código de muestra. compruebe mi código de muestra para FABMenu en Github
para cerrar la FAB en Backpress, anule onBackPress () como se muestra a continuación:
@Override
public void onBackPressed() {
if(!isFABOpen){
this.super.onBackPressed();
}else{
closeFABMenu();
}
}
La captura de pantalla también tiene el título con el FAB, porque lo tomo de mi aplicación de muestra actual ingithub
