ConstraintLayout, czyli jednak nie tak prędko…

ConstraintLayout, czyli jednak nie tak prędko…
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, 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:

App preview in Android Studio

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.

Dependencies in layout - Android Studio view

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.

Size segment in Android Studio

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.

Dowiedz się więcej

5 powodów, dla których warto budować UI w ConstraintLayoucie

ConstraintLayout to popularne rozwiązanie, z którego twórcy aplikacji na Androida korzystają na co dzień. I nie bez powodu! Jeśli dopiero zaczynasz przygodę z programowaniem, poznaj najważniejsze zalety tego layoutu. Dzięki temu szybciej zrozumiesz jego działanie, a budowa aplikacji stanie się łatwiejsza.
Przeczytaj

Android Small Talks: Wstrzykiwanie zależności poprzez Daggera 2

Wstrzykiwanie zależności jest wzorcem projektowym, którego głównym zadaniem jest uwolnienie naszego kodu od zależności. Jak wszyscy na pewno zdajemy sobie sprawę, kod, który ma minimalną ilość zależności jest zdecydowanie łatwiejszy do zarządzania oraz zmiany. Łatwiej jest też taki kod wykorzystać i przetestować.
Przeczytaj

Jak wykorzystać feature flags, żeby zyskać większą kontrolę nad aplikacją?

Chyba każdy, kto zajmuje się budową oprogramowania może opowiedzieć kilka historii o niedziałających funkcjach. Starannie tworzymy aplikacje z niewielkich elementów, stosujemy zaawansowane wzorce architektury, ale i tak czasem coś odmawia posłuszeństwa. Skutkuje to błędami, a nawet awarią systemu. Wtedy sytuację może uratować feature toggling. Sprawdź, jak wdrożyć feature flags i zwiększ stabilność swojej aplikacji.
Przeczytaj

Wycena projektu

Sprawdź, jak wykorzystujemy naszą wiedzę w praktyce i stwórz z nami swój projekt.

Dlaczego warto rozwijać z nami projekty?

Logo Mobile Trends Awards

Mobile Trends Awards 2017

Nominacja w kategorii
M-COMMERCE

17

opinii klientów

Clutch logo
Logo Legalni bukmacherzy

Nagroda Legalnych Bukmacherów 2019

Najlepsza aplikacja mobilna

60+

zrealizowanych projektów