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

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.

Podstawowe wiadomości na temat ConstraintLayoutu znajdziesz w moim wcześniejszym artykule. Chociaż od jego napisania minęło trochę czasu, informacje dotyczące elementarnych kwestii są nadal aktualne. Tutaj przedstawiam kilka najważniejszych atutów tego rozwiązania.

Jak korzystać z ConstraintLayoutu w Androidzie?

Zanim zaczniesz odkrywać zalety tego layoutu w praktyce, musisz zrobić jedną rzecz. W utworzonym projekcie, w build.gradle dodaj zależność:

'implementation ‘androidx.constraintlayout:constraintlayout:2.0.4'

Gotowe! Możesz już korzystać z layoutu wraz ze wszystkimi użytecznymi komponentami.

Zajmijmy się teraz funkcjami, które są szczególnie godne Twojej uwagi. Poniżej tłumaczę też, co jeszcze poza tymi elementami sprawia, że ConstraintLayout cieszy się taką popularnością.

Struktura, która zwiększa wydajność

Głównym atutem ConstraintLayoutu jest jego płaska struktura. Co to oznacza? Brak zagnieżdżeń widoku. Przed pojawieniem się tego rozwiązania, żeby zbudować skomplikowany UI, który składał się z większej liczby elementów, musiałeś umieścić jeden layout w drugim. Ten sposób ma jednak kilka istotnych wad.

Przede wszystkim powoduje, że widok jest bardziej obciążony, co zmniejsza wydajność aplikacji. Przy zagnieżdżaniu nie masz też dostępu do innych elementów z dowolnego miejsca. W rezultacie nie zawsze można zbudować wszystkie zależności. ConstraintLayout sprawia, że te problemy znikają.

Funkcjonalny edytor graficzny – prosta budowa UI w ConstraintLayoucie

Ponadto Android Studio udostępnia programistom dobry edytor graficzny, zintegrowany z ConstraintLayoutem. Możesz w nim w łatwy sposób ustawiać zależności komponentów UI. Kiedyś, gdy pisałam artykuł o niestabilnej jeszcze wersji Android Studio 2.2 Preview, zgłaszałam uwagi, że nie wszystko działa, jak powinno.  Na szczęście z czasem zarówno edytor, jak i layout rozwinięto na tyle, aby można było sprawnie korzystać z nowych komponentów.

Grupy – łatwe zarządzanie widokami

Dzięki grupom możesz tworzyć powiązania pomiędzy elementami wewnątrz pliku XML. Grupa nie ma żadnego konkretnego umiejscowienia, stanowi natomiast spoiwo dla kilku elementów widoku. Każdej grupie nadajesz unikalne ID, co przydaje się np. wtedy, gdy chcesz ukryć wybrane widoki, w zależności od stanu aplikacji.

W przypadku innych layoutów, aby ukryć grupę widoków, trzeba było ją opakować w dodatkowy layout. Teraz wystarczy stworzyć komponent grupy wewnątrz widoku:

<androidx.constraintlayout.widget.Group
   android:id="@+id/emptyPickupPointsPlaceholderGroup"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:visibility="gone"
   app:constraint_referenced_ids="emptyPickupPointsResultPlaceholderTv, changeRadiusBtn" />

W ten prosty sposób zarządzasz kilkoma widokami jednocześnie, bezpośrednio z poziomu kodu. Odnosisz się wprost do ID grupy, jak do jednego widoku:

emptyPickupPointsPlaceholderGroup.visibility = View.GONE

Chains – ułatwienie przy edycji układu

ChainStyle to bardzo przydatny atrybut, który pomaga przy rozmieszczaniu widoków. Często się zdarza, że programista chce zarządzać układem składającym się z kilku komponentów, ustawionych w jednej linii. Za pomocą chainStyle można ustawić zależność horyzontalną bądź wertykalną.

Przykładowo, dzięki temu atrybutowi możesz przedstawić `app:layout_constraintVertical_chainStyle` w trybie:

  1. Packed: Wyświetlone elementy będą zgrupowane obok siebie.

Packed dependency

2. Spread: Elementy będą rozproszone w równych odległościach z uwzględnieniem granic widoku.

3. Spread_inside: Elementy będą maksymalnie rozproszone.

Bias do określania pozycji widoków

Atrybut chainStyle odgrywa kluczową rolę przy zarządzaniu widokami, ale czasem potrzeba czegoś więcej. Warto wiedzieć, że w połączeniu z tym ustawieniem można dostosować pozycję widoków w linii. Pomocny tutaj będzie atrybut ustawiający, czyli bias. Jego również możesz określić na dwa sposoby – horyzontalnie lub wertykalnie (np. `app:layout_constraintVertical_bias`).

W tym przypadku określasz wartość od 0.0 do 1.0, gdzie 0.0 pozycjonuje widoki na początku obszaru roboczego, a 1.0 określa jego koniec.

Opisane powyżej funkcje są w moim odczuciu najbardziej przydatne. W dużym stopniu ułatwiają budowanie UI i często z nich korzystam na co dzień.

Dlaczego jeszcze warto stosować ConstraintLayout?

Choćby dlatego, że istnieją np. takie opcje, jak Automatyczne powiązania (Autoconnect). Zdają się one na algorytm środowiska i dopasowują bazowe constrainty. Należy jednak pamiętać, że nie zawsze korzystanie z nich daje oczekiwane rezultaty. Dlatego przy stosowaniu tej funkcji trzeba liczyć się z tym, że konieczne będzie wprowadzanie ręcznych zmian.

Nowości godne uwagi

Na koniec warto też wspomnieć, że ConstraintLayout jest wciąż rozwijany, a w nowszych wersjach pojawiają się kolejne drobne usprawnienia. Znikają też zgłaszane wcześniej problemy.

W ostatnim czasie pojawiły się następujące zmiany:

  • określenia parametrów android:layout_width i android:layout_height można pomijać (są opcjonalne), a `wrap_content` to teraz wartość domyślna,
  • wsparcie ujemnych wartości marginesów,
  • rozbudowa opcji wyrównania baseline (top/bottom).

To jedne z kluczowych nowości, ale jest ich o wiele więcej. Duża część usprawnień dotyczy też MotionLayoutu – narzędzia bardzo pomocnego przy animacjach. To jednak na tyle obszerny temat, że zasługuje na oddzielny artykuł.

 

Wprowadzenie ConstraintLayoutu zoptymalizowało pracę programistów.  Nie tylko w mniejszym stopniu obciąża on system, ale daje też szereg nowych możliwości. Od momentu, kiedy ten layout pojawił się po raz pierwszy, uległ on wielu modyfikacjom i teraz można już śmiało stwierdzić, że sprawdza się w 100%. Ustawienie go jako domyślnego rozwiązania w AndroidStudio nie powinno, więc nikogo dziwić.

 

 

Dominika - portrait

Dominika Zięba

Android Developer

Dowiedz się więcej

Wycena projektu

Opowiedz nam o swoim projekcie i napisz, jak możemy Ci pomóc.

Dlaczego warto rozwijać z nami projekty?

Logo Mobile Trends Awards

Mobile Trends Awards 2021

Wygrana w kategorii
ŻYCIE CODZIENNE

Nagroda Legalnych Bukmacherów

Nagroda Legalnych Bukmacherów 2019

Najlepsza aplikacja mobilna

Mobile Trends Awards logo

Mobile Trends Awards 2023

Wygrana w kategorii
MCOMMERCE ROZWÓJ

23

opinie klientów

Clutch logo