Mam lepsze podejście do zaimplementowania animowanego menu FAB bez użycia żadnej biblioteki lub pisania ogromnego kodu XML dla animacji. mam nadzieję, że pomoże to w przyszłości komuś, kto potrzebuje prostego sposobu na wdrożenie tego.
Używając animate().translationY()funkcji, możesz animować dowolny widok w górę lub w dół, który zrobiłem w poniższym kodzie, sprawdź cały kod na githubie . Jeśli szukasz tego samego kodu w kotlin, możesz sprawdzić repozytorium kodu kotlin Animating FAB Menu .
najpierw zdefiniuj wszystkie swoje FAB w tym samym miejscu, aby zachodziły na siebie, pamiętaj, że na górze FAB powinno być takie, że chcesz kliknąć i pokazać inne. na przykład:
<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" />
Teraz w swojej klasie java po prostu zdefiniuj wszystkie swoje FAB i wykonaj kliknięcie, jak pokazano poniżej:
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();
}
}
});
Użyj animation().translationY()do animowania swojego FAB-a, wolę, abyś używał atrybutu tej metody w DP, ponieważ tylko użycie int wpłynie na zgodność wyświetlacza z wyższą lub niższą rozdzielczością. jak pokazano niżej:
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);
}
Teraz zdefiniuj wyżej wymieniony wymiar wewnątrz res-> values-> dimens.xml, jak pokazano poniżej:
<dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>
To wszystko nadzieja, że to rozwiązanie pomoże w przyszłości ludziom, którzy szukają prostego rozwiązania.
EDYTOWANE
Jeśli chcesz dodać etykietę na FAB, po prostu weź poziomy LinearLayout i umieść FAB z tekstem jako etykietą i animuj układy, jeśli znajdziesz jakiś problem, aby to zrobić, możesz sprawdzić mój przykładowy kod na githubie, przygotowałem całą wsteczną kompatybilność problemy w tym przykładowym kodzie. sprawdź mój przykładowy kod dla FABMenu w Github
aby zamknąć FAB na Backpress, zastąp onBackPress (), jak pokazano poniżej:
@Override
public void onBackPressed() {
if(!isFABOpen){
this.super.onBackPressed();
}else{
closeFABMenu();
}
}
Zrzut ekranu ma również tytuł z FAB, ponieważ wziąłem go z mojej przykładowej aplikacji prezentującej ingithub
