Teraz, gdy biblioteka wsparcia projektowania Androida jest już dostępna, czy ktoś wie, jak zaimplementować za jej pomocą rozszerzone menu Fab, takie jak fab w aplikacji Inbox?
Powinien wyglądać tak:
Teraz, gdy biblioteka wsparcia projektowania Androida jest już dostępna, czy ktoś wie, jak zaimplementować za jej pomocą rozszerzone menu Fab, takie jak fab w aplikacji Inbox?
Powinien wyglądać tak:
Odpowiedzi:
Obecnie w Bibliotece projektu nie ma widżetu. Jedynym sposobem, aby to zrobić szybko i łatwo, jest użycie bibliotek innych firm.
Oczywiście możesz to zrobić również za pomocą Biblioteki projektu, ale będzie to ogromna praca i zajmie dużo czasu. Wspomniałem o kilku przydatnych bibliotekach, które mogą Ci w tym pomóc.
Używam czwartego.
źródło
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:
Teraz w swojej klasie java po prostu zdefiniuj wszystkie swoje FAB i wykonaj kliknięcie, jak pokazano poniżej:
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:Teraz zdefiniuj wyżej wymieniony wymiar wewnątrz res-> values-> dimens.xml, jak pokazano poniżej:
To wszystko nadzieja, że to rozwiązanie pomoże w przyszłości ludziom, którzy szukają prostego rozwiązania.
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:
Zrzut ekranu ma również tytuł z FAB, ponieważ wziąłem go z mojej przykładowej aplikacji prezentującej ingithub
źródło
Najpierw utwórz układy menu w pliku XML układu działania. Na przykład układ liniowy z orientacją poziomą i dołączanie TextView dla etykiety, a następnie pływającego przycisku akcji obok TextView.
Utwórz układy menu zgodnie ze swoimi potrzebami i liczbą.
Utwórz podstawowy pływający przycisk akcji i po jego kliknięciu zmień widoczność układów menu.
Sprawdź poniższy kod, aby uzyskać odniesienie i więcej informacji, sprawdź mój projekt z github
Projekt kasy z Github
To są animacje-
Otwieranie animacji menu FAB:
Animacja zamykania menu FAB:
Następnie w mojej aktywności po prostu użyłem animacji powyżej, aby pokazać i ukryć menu FAB:
Pokaż menu Fab:
Zamknij Fab Menu:
Oto klasa Activity -
Oto zrzuty ekranu
źródło
Jeszcze jedna biblioteka implementująca szybkie wybieranie z wytycznych Material Design:
https://github.com/leinardi/FloatingActionButtonSpeedDial
źródło
Kiedy próbowałem stworzyć coś podobnego do pływającego przycisku akcji w skrzynce odbiorczej, pomyślałem o stworzeniu własnego komponentu niestandardowego.
Byłby to prosty układ ramek o stałej wysokości (aby zawierał rozwinięte menu) zawierający przycisk FAB i 3 kolejne umieszczone pod FAB. kiedy klikniesz FAB, po prostu animujesz inne przyciski, aby tłumaczyć w górę spod FAB.
Jest kilka bibliotek, które to robią (na przykład https://github.com/futuresimple/android-floating-action-button ), ale zawsze jest fajniej, jeśli tworzysz to samodzielnie :)
źródło
layout_anchor
ilayout_anchorGravity
nie pracują dla mnieMożesz skorzystać z biblioteki FloatingActionMenu lub kliknąć tutaj, aby przejść do samouczka krok po kroku. Wynik samouczka:
źródło
Używam tej biblioteki, aby to zrobić: https://github.com/futuresimple/android-floating-action-button
Całkiem prosty w użyciu;)
źródło
layout_anchor
ilayout_anchorGravity
nie pracują dla mnieInna opcja dla tego samego wyniku z animacją ConstraintSet:
1) Umieść wszystkie animowane widoki w jednym układzie ConstraintLayout
2) Animuj go z takiego kodu (jeśli chcesz uzyskać więcej efektów, to zależy od ciebie ... to jest tylko przykład)
menuItem1 i menuItem2 to pierwszy i drugi FAB w menu, descriptionItem1 i descriptionItem2 to opis po lewej stronie menu, parentConstraintLayout to główny układ ConstraintLayout, który zawiera wszystkie animowane widoki, isMenuOpened to funkcja do zmiany flagi otwarte / zamknięte w stanie
Umieściłem kod animacji w pliku rozszerzenia, ale nie jest to konieczne.
źródło