Przeglądając ostatnimi czasy nowinki ze świata Androida, trafiłam na pojęcie ConstraintLayout. Jest to nowy dostarczony przez Androida i Google layout, wspierający wersje Androida aż od API 9. Wczytując się w możliwości, jakie ma dawać, stwierdziłam, że sprawdzę, jak zachowuje się nowy Layout Builder i jak wygląda posługiwanie się ConstraintLayoutem.
Ten artykuł dotyczy Android Studio 2.2 Preview i ConstraintLayoutu 1.0.0-alpha2. Jeśli chcesz się dowiedzieć więcej o tym, jakie korzyści i funkcje oferuje aktualna wersja ConstraintLayoutu (2021), przeczytaj mój nowszy artykuł.
Przygotowanie do korzystania z ConstraintLayoutu
Aby możliwe było używanie ConstraintLayoutu do budowy aplikacji na Androida, pierwszym wymogiem jest posiadanie niestabilnej jeszcze, wersji AndroidStudio 2.2 Preview 2. Następnie, by móc posługiwać się nowym rodzajem layoutu należy w utworzonym projekcie w build.gradle dodać zależność:
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha2'W tym momencie, gdy tworzony jest nowy Layout, można swobodnie wpisać ConstraintLayout jako element główny widoku. Wraz z nowym layoutem w AndroidStudio 2.2 mamy do czynienia z nowym edytorem graficznym, który ma umożliwić tworzenie widoków w prosty sposób. Gdy przejdziemy do zakładki ‘Design’ naszego layoutu, ujrzymy zarówno klasyczny widok layoutu, jak i drugi widok z granatowym tłem, wyraźniej prezentujący stworzone powiązania widoków:
Czym są powiązania widoków i jak stworzyć zależności między widokami?
ConstraintLayout umożliwia trochę podobnie, jak RelativeLayout, stworzenie powiązań między widokami layout’u. Regułami, które określają położenie, charakterystycznymi dla nowego layout’u są: layout_constraintSIDE_toSIDEof, layout_constraintBaseline_toBaselineOf.
Wielkim atutem ma być nowy edytor do tworzenia layoutów, gdzie stworzenie tego typu zależności, jest możliwe w sekundę poprzez przeciągnięcie myszki. Wystarczy daną krawędź widoku, powiązać z drugą krawędzią, widoku, którym chcemy ograniczyć umiejscawiany element. W prosty sposób możliwe jest wyrównanie tekstów linii, poprzez powiązanie layout_constraintBaseline_toBaselineOf.
W rezultacie layout.xml jest generowany na podstawie stworzonych powiązań, a przykładowy element z charakterystycznymi dla ConstraintLayoutu parametrami możecie zobaczyć poniżej:
<EditText
android:layout_width="215dp"
android:layout_height="47dp"
android:inputType="textPersonName"
android:text="Katarzyna"
android:ems="10"
android:id="@+id/nameEt"
app:layout_constraintLeft_toRightOf="@+id/nameTv"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:layout_constraintBaseline_toBaselineOf="@+id/nameTv" />Kolejną nowością jest segment umożliwiający łatwe definiowanie rozmiarów oraz marginesów widoku. Segment umożliwia płynne przełączanie się między rozmiarami any_size, wrap_content oraz własnym definiowaniem elementów.
Wnioski, czyli co umożliwia ConstraintLayout
Założeniami ConstraintLayoutu jest umożliwienie sprawnego tworzenia zależności poprzez edytor, który jest w stanie wyszukać powiązania automatycznie, redukcja zagnieżdżeń widoków oraz ułatwienie osiągnięcia zamierzonych rezultatów, bez tworzenia skomplikowanych kombinacji w layoutach. Warto wspomnieć, że nowy layout jest w pełni kompatybilny z istniejącymi już rodzajami layoutów.
Niestety jak się okazuje, nie wszystko jeszcze działa zgodnie z założeniami. Sam edytor czasami potrafi w podglądzie rozrzucać nasze widoki, co sprawia że layout nie jest przejrzysty i może być ciężko tworzyć widok, posługując się jedynie edytorem, bez własnoręcznego tworzenia pliku .xml. Co gorsza, po próbach stworzenia prostego layoutu z kilkoma zależnościami, nie udało się osiągnąć zamierzonego efektu. Wygląda więc na to, że pozostało jeszcze trochę pracy, by umożliwić sprawne korzystanie z ConstraintLayout.
