Получил лучший подход для реализации анимационного меню FAB без использования какой-либо библиотеки или для написания огромного XML-кода для анимации. надеюсь, это поможет в будущем тому, кому нужен простой способ реализовать это.
Просто используя animate().translationY()функцию, вы можете анимировать любое представление вверх или вниз, как я сделал в своем коде ниже, проверьте полный код в github . Если вы ищете тот же код в kotlin, вы можете проверить kolin код репо Animating FAB Menu .
сначала определите все ваши FAB в одном и том же месте, чтобы они перекрывали друг друга, помните, что в верхней части FAB должно быть то, что вы хотите щелкнуть и показать другие. например:
<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" />
Теперь в вашем Java-классе просто определите все ваши FAB и выполните щелчок, как показано ниже:
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();
}
}
});
Используйте animation().translationY()для анимации вашего FAB, я предпочитаю использовать атрибут этого метода в DP, так как только использование int повлияет на совместимость дисплея с более высоким или более низким разрешением. как показано ниже:
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);
}
Теперь определите вышеупомянутое измерение внутри res-> values-> dimensions.xml, как показано ниже:
<dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>
Это все надежда, что это решение поможет людям в будущем, которые ищут простое решение.
отредактированный
Если вы хотите добавить метку поверх FAB, то просто возьмите горизонтальную LinearLayout и поместите FAB с textview в качестве метки, и анимируйте макеты, если обнаружите какую-либо проблему, делающую это, вы можете проверить мой пример кода в github, я обработал всю обратную совместимость проблемы в этом примере кода. проверьте мой пример кода для FABMenu в Github
чтобы закрыть FAB на Backpress, переопределите onBackPress (), как показано ниже:
@Override
public void onBackPressed() {
if(!isFABOpen){
this.super.onBackPressed();
}else{
closeFABMenu();
}
}
Снимок экрана также имеет название с FAB, потому что я взял его из моего примера приложения в ingithub
