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

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:

<android.support.design.widget.CoordinatorLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context="com.example.dominika.coordinator.MainActivity">

	<com.getbase.floatingactionbutton.FloatingActionButton
    	android:id="@+id/lib_fab"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:layout_gravity="bottom|end"
    	android:layout_margin="@dimen/fab_margin"
    	android:src="@android:drawable/ic_dialog_email"
    	app:layout_behavior="com.example.dominika.coordinator.FloatingButtonBehavior"
    	/>

	<com.example.dominika.coordinator.CustomView
    	android:id="@+id/customView"
    	android:layout_width="70dp"
    	android:layout_height="70dp"
    	android:layout_gravity="bottom|start"
    	android:layout_margin="@dimen/fab_margin"
    	/>
</android.support.design.widget.CoordinatorLayout>

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<FloatingActionButton> {
	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<CustomView> {
	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!