Material Design Archives

W momencie, gdy na rynek wszedł Android Lollipop nastąpił pewien przełom. Google udostępniło nam obszerną bibliotekę Android Design Support Library, ułatwiającą tworzenie aplikacji zgodnych z zasadami Material Design. Tworzenie interfejsu użytkownika zgodnie z tymi wytycznymi wprowadza nasze oprogramowanie na wyższy poziom pod względem wyglądu oraz interakcji użytkownika z aplikacją. Material Design skupia się między innymi na tworzeniu pięknych animacji, wyglądzie elementów, ale przede wszystkim na spójności wszystkich komponentów. Nic więc dziwnego, że został również wprowadzony CoordinatorLayout. Layout ten, to nowy rodzaj kontenera, który jest FrameLayout’em dodatkowo wspartym o możliwość tworzenia zależności między elementami będącymi jego dziećmi. Jak stosować CoordinatorLayout? Wykorzystanie CoordinatorLayout nie jest niczym skomplikowanym. Wystarczy do niego wrzucić widoki, które ma zawierać kontener, jak w każdym innym przypadku. Następnie należy nadać odpowiednim z nich właściwe zachowania. Poniżej przedstawiony jest przykład tworzenia zależność 2 komponentów, których zachowanie ma przypominać działanie FloatingActionButtona zależne od pojawiającego się SnackBar’a. Jednym z komponentów jest FAB z open source’owej biblioteki, drugim z kolei własny prosty widok, któremu nadane zostało podobne zachowanie. Dodanie biblioteki W pierwszym kroku musimy dodać w gradle bibliotekę Support Design Library: compile 'com.android.support:design:23.1.1' Tworzenie layoutu Następnie musimy stworzyć nasz layout w XML z 2 komponentami. Finalny plik wygląda tak: Interesującą nas tutaj rzeczą jest nadanie widokowi lib_fab zachowania: app:layout_behavior="com.example.dominika.coordinator.FloatingButtonBehavior" Aby było to możliwe, musimy zrobić następny krok, czyli zdefiniować zachowanie komponentu wykorzystywanego z zewnętrznej biblioteki. Nadawanie widokowi zachowania Odbywa się to poprzez stworzenie nowej klasy. W pierwszej kolejności należy zwrócić uwagę, że klasa musi dziedziczyć po Behavior class. Natomiast, w celu umożliwienia nadania zachowania poprzez plik .xml konieczne jest stworzenie konstruktora z dwoma argumentami: Context i AttributeSet. public class FloatingButtonBehavior extends CoordinatorLayout.Behavior { public FloatingButtonBehavior(Context context, AttributeSet attributeSet) { } } Kolejnym krokiem, jest nadpisanie metody layoutDependsOn() i zdefiniowanie jakich zdarzeń chcemy nasłuchiwać. W tym przypadku interesuje nas pojawiający się SnackBar. @Override public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) { return dependency instanceof Snackbar.SnackbarLayout; } Następnie musimy nadpisać metodę onDependentViewChanged(), czyli określić co ma się stać z naszym widokiem, gdy dojdzie do nasłuchiwanego zdarzenia. W naszym przypadku, widok któremu nadajemy zachowanie będzie przesuwał się zależnie od SnackBar’a. W metodzie tej możemy odczytać aktualny stan widoku zależnego. Naszym celem jest przesunięcie widoku do góry, dokładnie o wysokość elementu od którego zależy dlatego też musimy dokonać translacji wzdłuż osi Y: @Override public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) { float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight()); child.setTranslationY(translationY); return true; } } Jednocześnie istotnym w tym miejscu elementem jest wartość zwracana. Wartością tą, powinno być true zawsze, gdy widok zmienia swoją pozycję na ekranie. Tak stworzone zachowanie, możemy już ustawić na widoku poprzez plik .xml. Nadawanie zachowania poprzez adnotację Poza nadawaniem zależności w pliku .xml, w momencie gdy mamy do czynienia z własnym widokiem, możemy nadać mu domyślne, stworzone przez nas zachowanie. Odbywa się to w bardzo przejrzysty sposób, poprzez dodanie adnotacji. W tym celu stworzona została podobna klasa definiująca zachowanie widoku. Jednakże, aby możliwe było stworzenie adnotacji należy dodać konstruktor nieprzyjmujący argumentów: public class CustomBehavior extends CoordinatorLayout.Behavior { public CustomBehavior() {} Gdy klasa określająca reakcję widoku jest gotowa, wystarczy dodać adnotację do własnego widoku: @CoordinatorLayout.DefaultBehavior(CustomBehavior.class) public class CustomView extends View { I to wszystko! W ten sposób każdy stworzony przez nas widok CustomView, automatycznie posiada zdefiniowane zachowanie. Rezultat można zobaczyć poniżej: CoordinatorLayout to Layout umożliwiający dodatkowo tworzenie zależności między jego dziećmi. Jest więc to kolejny z trafionych elementów, który wchodzi w skład biblioteki Android Design Support Library. Jak widać, cały proces nie jest skomplikowany i wymaga jedynie przypilnowania kilku zasad. Najlepiej oczywiście zrozumieć pisząc samemu, więc zachęcam, przetestujcie CoordinatorLayout sami!

Android Small Talks: CoordinatorLayout, czyli jeden z atutów Android Design Support Library

Wycena projektu

Dlaczego warto rozwijać z nami projekty?

Android Small Talks: CoordinatorLayout, czyli jeden z atutów Android Design Support Library

Udostępnij

Wycena projektu

Dlaczego warto rozwijać z nami projekty?