Weiß jemand, wie die erweiterte Fab-Menübibliothek implementiert wird, wie die Fab on Inbox-App, nachdem die Android Design Support Library veröffentlicht wurde?
Sollte so aussehen:
Weiß jemand, wie die erweiterte Fab-Menübibliothek implementiert wird, wie die Fab on Inbox-App, nachdem die Android Design Support Library veröffentlicht wurde?
Sollte so aussehen:
Antworten:
Derzeit ist in der Designbibliothek kein Widget verfügbar. Nur so geht das schnell und einfach ist die Verwendung von Bibliotheken von Drittanbietern.
Sie können dies natürlich auch mit der Designbibliothek tun, aber es wird eine große Arbeit sein und viel Zeit erfordern. Ich habe einige nützliche Bibliotheken erwähnt, die Ihnen dabei helfen können.
Ich benutze den 4..
quelle
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:
Definieren Sie jetzt in Ihrer Java-Klasse einfach alle Ihre FABs und führen Sie den Klick wie unten gezeigt aus:
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:Definieren Sie nun die oben genannte Dimension in res-> values-> dimension.xml wie folgt:
Das ist alles Hoffnung, dass diese Lösung den Menschen in Zukunft helfen wird, die nach einer einfachen Lösung suchen.
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:
Der Screenshot hat auch den Titel mit dem FAB, da ich ihn aus meiner Beispiel-App ingithub nehme
quelle
Erstellen Sie zunächst die Menülayouts in der XML-Datei Ihres Aktivitätslayouts. Zum Beispiel ein lineares Layout mit horizontaler Ausrichtung und einer Textansicht für die Beschriftung und einer schwebenden Aktionsschaltfläche neben der Textansicht.
Erstellen Sie die Menülayouts nach Bedarf und Nummer.
Erstellen Sie eine schwebende Basisaktionsschaltfläche und ändern Sie durch Klicken darauf die Sichtbarkeit der Menülayouts.
Bitte überprüfen Sie den folgenden Code als Referenz und für weitere Informationen überprüfen Sie mein Projekt von Github
Kassenprojekt von Github
Dies sind die Animationen
Eröffnungsanimation des FAB-Menüs:
Abschlussanimation des FAB-Menüs:
Dann habe ich in meiner Aktivität einfach die obigen Animationen verwendet, um das FAB-Menü ein- und auszublenden:
Fab-Menü anzeigen:
Fab-Menü schließen:
Hier ist die Aktivitätsklasse -
Hier sind die Screenshots
quelle
Eine weitere Bibliothek, die die Kurzwahl gemäß den Richtlinien für das Materialdesign implementiert :
https://github.com/leinardi/FloatingActionButtonSpeedDial
quelle
Als ich versuchte, etwas zu erstellen, das der schwebenden Aktionsschaltfläche im Posteingang ähnelt, dachte ich darüber nach, eine eigene benutzerdefinierte Komponente zu erstellen.
Es wäre ein einfaches Rahmenlayout mit fester Höhe (um ein erweitertes Menü zu enthalten), das die FAB-Schaltfläche und 3 weitere unter dem FAB enthält. Wenn Sie auf FAB klicken, animieren Sie einfach andere Schaltflächen, um sie unter dem FAB zu übersetzen.
Es gibt einige Bibliotheken, die das tun (zum Beispiel https://github.com/futuresimple/android-floating-action-button ), aber es macht immer mehr Spaß, wenn Sie es selbst erstellen :)
quelle
layout_anchor
undlayout_anchorGravity
arbeiten nicht für michSie können die FloatingActionMenu-Bibliothek verwenden oder hier klicken, um eine schrittweise Anleitung zu erhalten. Ausgabe des Tutorials:
quelle
Ich benutze diese Bibliothek, um dies zu tun: https://github.com/futuresimple/android-floating-action-button
Ziemlich einfach zu bedienen;)
quelle
layout_anchor
undlayout_anchorGravity
arbeiten nicht für michEine weitere Option für dasselbe Ergebnis mit ConstraintSet-Animation:
1) Fügen Sie alle animierten Ansichten in ein ConstraintLayout ein
2) Animieren Sie es aus Code wie diesem (wenn Sie weitere Effekte wünschen, liegt es an Ihnen ... dies ist nur ein Beispiel)
menuItem1 und menuItem2 sind die ersten und zweiten FABs im Menü, descriptionItem1 und descriptionItem2 ist die Beschreibung links vom Menü. parentConstraintLayout ist das Stamm-ConstraintLayout, das alle animierten Ansichten enthält. isMenuOpened ist eine Funktion zum Ändern des offenen / geschlossenen Flags im Status
Ich habe Animationscode in die Erweiterungsdatei eingefügt, aber es ist nicht notwendig.
quelle