Ich habe einen besseren Ansatz erhalten, um das animierende FAB-Menü ohne Verwendung einer Bibliothek zu implementieren oder großen XML-Code für Animationen zu schreiben. Ich hoffe, dies wird in Zukunft jemandem helfen, der einen einfachen Weg benötigt, dies umzusetzen.
Mit der animate().translationY()Funktion können Sie jede Ansicht nach oben oder unten animieren, wie ich es in meinem folgenden Code getan habe . Überprüfen Sie den vollständigen Code in Github . Wenn Sie in Kotlin nach demselben Code suchen, können Sie das Kotlin-Code-Repo- Animations-FAB-Menü auschecken .
Definieren Sie zuerst alle Ihre FABs an derselben Stelle, damit sie sich überlappen. Denken Sie daran, dass das FAB oben sein sollte, dass Sie klicken und andere anzeigen möchten. z.B:
<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" />
Definieren Sie jetzt in Ihrer Java-Klasse einfach alle Ihre FABs und führen Sie den Klick wie unten gezeigt aus:
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();
}
}
});
Verwenden Sie das animation().translationY(), um Ihr FAB zu animieren. Ich bevorzuge, dass Sie das Attribut dieser Methode in DP verwenden, da nur die Verwendung eines int die Anzeigekompatibilität mit höherer oder niedrigerer Auflösung beeinträchtigt. Wie nachfolgend dargestellt:
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);
}
Definieren Sie nun die oben genannte Dimension in res-> values-> dimension.xml wie folgt:
<dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>
Das ist alles Hoffnung, dass diese Lösung den Menschen in Zukunft helfen wird, die nach einer einfachen Lösung suchen.
BEARBEITET
Wenn Sie eine Beschriftung über dem FAB hinzufügen möchten, nehmen Sie einfach ein horizontales LinearLayout und fügen Sie das FAB mit der Textansicht als Beschriftung ein. Animieren Sie die Layouts, wenn Sie Probleme damit haben. Sie können meinen Beispielcode in github überprüfen. Ich habe die gesamte Abwärtskompatibilität behandelt Probleme in diesem Beispielcode. Überprüfen Sie meinen Beispielcode für FABMenu in Github
Um das FAB bei Backpress zu schließen, überschreiben Sie onBackPress () wie unten gezeigt:
@Override
public void onBackPressed() {
if(!isFABOpen){
this.super.onBackPressed();
}else{
closeFABMenu();
}
}
Der Screenshot hat auch den Titel mit dem FAB, da ich ihn aus meiner Beispiel-App ingithub nehme
