ConstraintLayout — co to jest, ograniczenia i płaska hierarchia

Czym jest ConstraintLayout?

ConstraintLayout — to ViewGroup z biblioteki AndroidX ConstraintLayout, przeznaczona do tworzenia elastycznych i wydajnych interfejsów za pomocą deklaratywnych ograniczeń. W przeciwieństwie do LinearLayout, które ustawia elementy w jednej linii, lub RelativeLayout, pozycjonującego względem sąsiadów, ConstraintLayout pozwala przypiąć każdy element względem dowolnych innych elementów i rodzica jednocześnie.

Biblioteka została ogłoszona na Google I/O 2016 jako rozwiązanie przyspieszające renderowanie złożonych ekranów. Kluczowym problemem, który rozwiązuje ConstraintLayout, jest zagnieżdżanie layoutów. Każda zagnieżdżona ViewGroup dodaje co najmniej dwa przebiegi measure i jeden przebieg layout. Ekran z 4 poziomami zagnieżdżenia wykonuje 8 przebiegów measure; ConstraintLayout z tą samą funkcjonalnością — tylko 2 przebiegi. Według danych Google (Android Performance Blog, 2017), zastąpienie trzech zagnieżdżonych LinearLayout jednym ConstraintLayout skraca czas onMeasure o 40%.

Obecna wersja ConstraintLayout 2.1.4 stabilnie działa na Android 2.3+ (API 9) przez AndroidX. W wersji 2.0 pojawiło się pozycjonowanie okrężne, Flow (automatyczne zawijanie elementów) i obsługa MotionLayout. ConstraintLayout jest niezbędny do zrozumienia nowoczesnego programowania na Androida — jest używany w Jetpack Compose jako podstawowa koncepcja modyfikatorów, w domyślnych szablonach Android Studio i w Material Design 3.

Jak działa płaska hierarchia

Płaska hierarchia ConstraintLayout oznacza, że wszystkie widoki potomne znajdują się na jednym poziomie zagnieżdżenia. Zamiast umieszczać element A w LinearLayout, a LinearLayout w RelativeLayout, wszystkie elementy przypina się bezpośrednio do nadrzędnego ConstraintLayout lub do siebie nawzajem za pomocą atrybutów. Daje to: mniejsze zużycie pamięci (każda ViewGroup to obiekt w Java heap), przyspieszenie przebiegu layout (mniej wywołań rekurencyjnych), bardziej przewidywalne zachowanie przy zmianie rozmiaru ekranu.

System ograniczeń: przypięcia, bias i marginesy

Ograniczenie — to połączenie między krawędzią jednego widoku (lub jego środkiem) a krawędzią innego widoku lub rodzica. Każdy widok może mieć do 8 ograniczeń: lewe, górne, prawe, dolne, startowe, końcowe, bazowe i środkowe. Minimalnie do pozycjonowania wystarczą dwa prostopadłe ograniczenia (np. górne + lewe).

Format atrybutu: app:layout_constraint[Źródło]_to[Cel]Of="[id]" — gdzie Źródło to przypinana krawędź (Left, Right, Top, Bottom, Start, End, Baseline), Cel to krawędź celu. Przykład: app:layout_constraintTop_toBottomOf="@+id/header" oznacza „górna granica bieżącego elementu jest przypięta do dolnej granicy elementu header". Do przypięcia do rodzica używane jest id parent.

Bias (przesunięcie) — parametr działający przy przeciwnych ograniczeniach (left + right lub top + bottom). Wartość od 0 do 1: 0 — dociśnięty do lewej/górnej krawędzi, 0.5 — wyśrodkowany, 1 — do prawej/dolnej. Atrybuty: layout_constraintHorizontal_bias (0.0–1.0) i layout_constraintVertical_bias. Margines określa się standardowymi android:layout_margin*, ale ograniczenie i margines działają niezależnie: margines to odstęp od ograniczenia, a nie od sąsiedniego widoku.

Pozycjonowanie procentowe

Od ConstraintLayout 1.1+ dostępna jest obsługa rozmiarów procentowych przez layout_constraintWidth_percent i layout_constraintHeight_percent. Wartość 0.3 oznacza 30% szerokości/wysokości rodzica. W połączeniu z bias pozwala to tworzyć adaptacyjne layouty bez programowania.

Chains i Guidelines: łańcuchy i prowadnice

Chain (łańcuch) — to grupa dwóch lub więcej widoków połączonych dwustronnymi ograniczeniami (A przypięty do B, B do A). Łańcuchy automatycznie rozmieszczają przestrzeń między elementami w jednym z trybów: spread (równomiernie, z uwzględnieniem marginesów), spread_inside (równomiernie, skrajne elementy bez odstępu od krawędzi), packed (elementy dociśnięte do siebie ze wspólnym bias). Tryb określa atrybut app:layout_constraintHorizontal_chainStyle lub layout_constraintVertical_chainStyle.

Guideline (prowadnica) — pomocniczy widok, niewidoczny w czasie wykonania, ale wyznaczający linię do przypięcia. Guideline może być poziomy lub pionowy, pozycjonowany w dp, procentach (app:layout_constraintGuide_percent) lub z odstępem od krawędzi (app:layout_constraintGuide_begin/end). Guidelines są niezastąpione w adaptacyjnych layoutach — na przykład do podziału ekranu na dwie równe połowy niezależnie od rozmiaru urządzenia.

Według danych Google I/O 2017, łańcuchy z spread_inside są o 15–20% wydajniejsze niż zagnieżdżone LinearLayout z weight, ponieważ unikają podwójnego przebiegu measure, niezbędnego do obliczenia weight.

Barrier, Group i wirtualni pomocnicy

Barrier (bariera) — wirtualny widok, który dynamicznie dostosowuje swoją pozycję do rozmiaru grupy elementów. W przeciwieństwie do Guideline o stałej pozycji, Barrier jest „przesuwany" przez najszerszy element grupy. Na przykład, jeśli masz nagłówek i opis o nieznanej długości, Barrier przypięty do prawej krawędzi najszerszego tekstu pozwala umieścić ikonę tuż za nimi. Atrybuty: app:barrierDirection (left, right, top, bottom, start, end) i app:constraint_referenced_ids (lista id oddzielona przecinkami).

Group — wirtualny kontener zarządzający widocznością kilku widoków jednocześnie. Zamiast wywoływać setVisibility dla każdego elementu osobno, wystarczy zmienić widoczność jednej Group. Group nie wpływa na pozycjonowanie — tylko na widoczność. Flow — wirtualny pomocnik do tworzenia „płynnych" layoutów: elementy automatycznie przenoszą się do nowego wiersza/kolumny przy braku miejsca, jak tekst w akapicie. Flow obsługuje wrapMode: none, chain i aligned.

Te narzędzia (Barrier, Group, Flow, Guideline) nazywane są wirtualnymi pomocnikami, ponieważ nie są widokami w klasycznym sensie — nie zajmują miejsca w hierarchii i nie uczestniczą w focusie ani zdarzeniach dotykowych. Ich celem jest uproszczenie utrzymania złożonych layoutów bez dodawania zagnieżdżonych kontenerów.

Przykłady: XML i Kotlin

Przykład 1: Podstawowy formularz z ograniczeniami

Prosty formularz logowania z polem email, hasłem i przyciskiem. Wszystkie elementy są przypięte do parent, z wyjątkiem przycisku — znajduje się on pod polem hasła. Użyto płaskiej hierarchii — wszystkie trzy elementy na jednym poziomie.

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/email_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="32dp"
        android:layout_marginHorizontal="16dp" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/password_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/email_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginHorizontal="16dp" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/password_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="24dp"
        android:layout_marginHorizontal="16dp"
        android:text="Zaloguj się" />

</androidx.constraintlayout.widget.ConstraintLayout>

Wszystkie elementy mają szerokość 0dp (match_constraint), czyli rozciągają się od start do end ograniczenia z uwzględnieniem marginesu poziomego. To odpowiednik match_parent z odstępami, ale bez zagnieżdżania.

Przykład 2: Łańcuch z spread_inside

Trzy przyciski, równomiernie rozmieszczone w poziomie z odstępami od krawędzi. Łańcuch spread_inside umieszcza skrajne przyciski na krawędziach, a środkowy — na środku między nimi.

<Button
    android:id="@+id/btn_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_center"
    android:text="Lewy" />

<Button
    android:id="@+id/btn_center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_left"
    app:layout_constraintRight_toLeftOf="@+id/btn_right"
    android:text="Środek" />

<Button
    android:id="@+id/btn_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_center"
    app:layout_constraintRight_toRightOf="parent"
    android:text="Prawy" />

Łańcuch tworzy się automatycznie, gdy elementy mają dwustronne ograniczenia. Tryb spread_inside ustawia się na dowolnym elemencie łańcucha przez app:layout_constraintHorizontal_chainStyle="spread_inside". Pozwala to uniknąć używania LinearLayout z weightSum i layout_weight.

Przykład 3: Guideline dla symetrycznego layoutu

Tworzenie dwóch równych kolumn przez pionową Guideline na 50%. Lewy element jest przypięty do lewej krawędzi parent i prawą krawędzią do guideline; prawy — lewą krawędzią do guideline i do prawej krawędzi parent.

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/gl_midpoint"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<TextView
    android:id="@+id/left_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/gl_midpoint"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

<TextView
    android:id="@+id/right_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/gl_midpoint"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

Guideline z procentem 0.5 automatycznie dostosowuje się do szerokości ekranu. Na tablecie i telefonie proporcje kolumn pozostaną 50/50. Dla nomenklatury lewej/prawej używaj atrybutów start/end dla zgodności z RTL.

Porównanie: ConstraintLayout vs LinearLayout vs RelativeLayout

Tabela porównawcza trzech głównych ViewGroup do programowania na Androida: ConstraintLayout, LinearLayout i RelativeLayout. Kryteria: elastyczność, wydajność, złożoność kodu i obszary zastosowania.

Według danych Android Vitals (Google, 2025), aplikacje używające ConstraintLayout jako głównego kontenera wykazują średnio o 18% mniej jank-klatek podczas renderowania złożonych ekranów w porównaniu z aplikacjami na zagnieżdżonych LinearLayout. W IT Sectr przeszliśmy na ConstraintLayout jako standard dla wszystkich układów XML w 2018 roku — skróciło to średnią głębokość hierarchii ekranów z 4.2 do 1.8 poziomu i przyspieszyło tworzenie nowych formularzy o 25%.