Utwórz responsywny interfejs użytkownika za pomocą ConstraintLayout   Element Android Jetpack.

Brakujące ograniczenia nie powodują błędów kompilacji, ale edytor układu wskazuje je jako błędy na pasku narzędzi. Aby wyświetlić błędy i inne ostrzeżenia, kliknij Pokaż ostrzeżenia i błędy . Aby pomóc Ci uniknąć braku ograniczeń, edytor układu automatycznie dodaje ograniczenia za pomocą funkcji Autołączanie i wyprowadzanie ograniczeń.

Dodawanie ConstraintLayout do projektu

Aby użyć funkcji ConstraintLayout w projekcie, wykonaj te czynności:

1. Sprawdź, czy w pliku settings.gradle masz zadeklarowane repozytorium maven.google.com:

   Odlotowe

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. Dodaj bibliotekę jako zależność w pliku build.gradle na poziomie modułu, jak pokazano w tym przykładzie. Najnowsza wersja może się różnić od tej pokazanej w przykładzie.

   Groovy

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.0"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0")
   }
   

3. Na pasku narzędzi lub w powiadomieniu o synchronizacji kliknij Synchronizuj projekt z plikami Gradle.

Teraz możesz utworzyć układ za pomocą ConstraintLayout.

Konwertowanie układu

Aby przekonwertować istniejący układ na układ z ograniczeniami, wykonaj te czynności:

1. Otwórz układ w Android Studio i kliknij kartę Projekt na dole okna edytora.
2. W oknie Drzewo komponentów kliknij prawym przyciskiem myszy układ i kliknij Przekształc układ LinearLayout w ConstraintLayout.

Tworzenie nowego układu

Aby utworzyć nowy plik układu ograniczeń:

1. W oknie Projekt kliknij folder modułu i wybierz Plik > Nowy > XML > XML układu.
2. Wpisz nazwę pliku układu, a w polu Tag główny wpisz „androidx.constraintlayout.Widget.ConstraintLayout”.
3. Kliknij Zakończ.

Dodawanie i usuwanie ograniczeń

Aby dodać ograniczenie:

1. Przeciągnij widok z okna Paleta do edytora.

   Gdy dodasz widok do ConstraintLayout, pojawi się on w ramce z kwadratowymi uchwytami do zmiany rozmiaru w każdym rogu oraz okrągłym uchwytami ograniczającymi po każdej stronie.

2. Kliknij widok, aby go wybrać.
3. Wykonaj jedną z tych czynności:
   • Kliknij uchwyt ograniczenia i przeciągnij go do dostępnego punktu zakotwiczenia. Ten punkt może być krawędzią innego widoku, krawędzią układu lub wskazówką. Gdy przeciągasz uchwyt ograniczenia, w Edytorze układu pojawiają się potencjalne uchwyty połączenia i niebieskie nakładki.

   • Kliknij jeden z przycisków Utwórz połączenie w sekcji Układ w oknie Atrybuty, jak pokazano na rysunku 4.

     

     Rysunek 4. Sekcja Układ w oknie Atrybuty umożliwia tworzenie połączeń.

Gdy ograniczenie zostanie utworzone, edytor nada mu domyślny margines, aby oddzielić 2 widoki.

Podczas tworzenia ograniczeń pamiętaj o tych zasadach:

• Każdy widok musi mieć co najmniej 2 ograniczenia: jedno poziome i jedno pionowe.
• Ograniczenia możesz tworzyć tylko między uchwytem ograniczenia a punktem zakotwiczenia, które znajdują się na tej samej płaszczyźnie. Płaszczyzna pionowa – lewa i prawa strona widoku – może zostać ograniczona tylko do innej płaszczyzny pionowej, a linie odniesienia mogą być ograniczone tylko do innych punktów odniesienia.
• Każdy uchwyt ograniczenia może być używany tylko w przypadku 1 ograniczenia, ale do tego samego punktu zakotwiczenia możesz utworzyć wiele ograniczeń z różnych widoków.

Ograniczenie możesz usunąć, wykonując jedną z tych czynności:

• Kliknij ograniczenie, aby je zaznaczyć, a potem kliknij Usuń.

• Kliknij Control (Command w systemie macOS) kotwicę ogranicznika. Ograniczenie ma kolor czerwony, co wskazuje, że można je usunąć kliknięciem, jak pokazano na rysunku 5.

  

  Rysunek 5. Czerwone ograniczenie oznacza, że możesz je kliknąć, aby je usunąć.

• W sekcji Układ okna Atrybuty kliknij kotwicę ograniczenia, jak pokazano na ilustracji 6.

  

  Rysunek 6. Kliknij kotwicę ograniczenia, aby ją usunąć.

Jeśli dodasz do widoku przeciwstawne ograniczenia, linie ograniczeń zwiną się jak sprężyna, aby wskazać przeciwstawne siły, jak pokazano w filmie 2. Efekt jest najbardziej widoczny, gdy rozmiar widoku jest ustawiony na „stały” lub „zawijaj treść”, co oznacza, że widok jest wyśrodkowany między ograniczeniami. Jeśli chcesz, aby widok rozciągał się, aby spełniać ograniczenia, zmień rozmiar na „dopasuj do ograniczeń”. Jeśli chcesz zachować bieżący rozmiar, ale przesunąć widok tak, aby nie był wyśrodkowany, dostosuj odchylenie ograniczenia.

Za pomocą ograniczeń możesz uzyskać różne typy zachowania układu, jak opisano w następnych sekcjach.

Pozycja nadrzędna

Pozycja zamówienia

Wyrównanie

Wyrównanie do linii bazowej

Ogranicz do wytycznych

Ograniczenie do bariery

Dostosowywanie wartości domyślnej ograniczeń

Gdy dodasz ograniczenie po obu stronach widoku, a rozmiar widoku dla tego samego wymiaru będzie miał wartość „stały” lub „zawijaj treść”, widok zostanie wyśrodkowany między tymi dwoma ograniczeniami, a odchylenie będzie domyślnie równe 50%. Możesz dostosować 偏差 (bias) przez przeciąganie suwaka w oknie Atrybuty lub przez przeciąganie widoku, jak pokazano w filmie 3.

Jeśli zamiast tego chcesz, aby widok rozciągał się zgodnie z ograniczeniami, przełącz rozmiar na „Dopasuj ograniczenia”.

Dostosowywanie rozmiaru widoku

Możesz zmienić rozmiar widoku za pomocą uchwytów narożnych, ale ten rozmiar jest zakodowany na stałe – widok nie zmienia się w zależności od zawartości czy rozmiaru ekranu. Aby wybrać inny tryb określania rozmiaru, kliknij widok i otwórz okno Atrybuty po prawej stronie edytora.

U góry okna Atrybuty znajduje się kontroler widoku, który zawiera ustawienia kilku atrybutów układu, jak pokazano na rysunku 14. Jest to możliwe tylko w przypadku widoków w układzie z ograniczeniami.

Aby zmienić sposób obliczania wysokości i szerokości, kliknij symbole wskazane strzałką 3 na rysunku 14. Te symbole oznaczają tryb rozmiaru w następujący sposób. Kliknij symbol, aby przełączać się między tymi ustawieniami:

• Stały: w tym celu wskaż konkretny wymiar w polu tekstowym poniżej lub zmień rozmiar widoku w edytorze.
• Zawijanie treści: widok rozszerza się tylko do tego stopnia, aby zmieścić zawartość.
• layout_constrainedWidth

Ustaw wartość true, aby wymiar poziomy mógł się zmieniać z uwzględnieniem ograniczeń. Domyślnie widżet ustawiony na WRAP_CONTENTnie jest ograniczony przez ograniczenia.

• Ograniczenia dopasowania: widok rozszerza się tak bardzo, jak to możliwe, aby spełniać ograniczenia po obu stronach, uwzględniając marginesy widoku. Możesz jednak zmodyfikować to zachowanie za pomocą tych atrybutów i wartości. Te atrybuty działają tylko wtedy, gdy ustawisz szerokość widoku na „dopasuj do ograniczeń”:
  • layout_constraintWidth_min

    Spowoduje to ustawienie wymiaru dp na potrzeby minimalnej szerokości widoku.

  • layout_constraintWidth_max

    W przypadku maksymalnej szerokości widoku używa się wymiaru dp.

  Jeśli jednak dany wymiar ma tylko 1 ograniczenie, widok rozszerza się, aby dopasować zawartość. Użycie tego trybu w przypadku wysokości lub szerokości pozwala też ustawić współczynnik rozmiaru.

Określ rozmiar jako współczynnik

Jeśli co najmniej 1 z wymiarów widoku jest ustawiony na „ograniczenia dopasowania” (0dp), możesz ustawić rozmiar widoku na określony współczynnik, np. 16:9. Aby włączyć ten współczynnik, kliknij Przełącz ograniczenie współczynnika proporcji (objaśnienie 1 na ilustracji 14) i wpisz wartość width:height w wyświetlonych danych wejściowych.

Jeśli zarówno szerokość, jak i wysokość mają ustawione „Dopasuj do ograniczeń”, możesz kliknąć Przełącz ograniczenie formatu, aby wybrać, który wymiar ma być dostosowywany do współczynnika drugiego. Inspektor widoku wskazuje, który wymiar jest ustawiony jako współczynnik, łącząc odpowiednie krawędzie linią ciągłą.

Jeśli np. dla obu stron ustawisz „Dopasuj do ograniczeń”, kliknij dwukrotnie Przełącz ograniczenie współczynnika proporcji, aby ustawić szerokość jako współczynnik wysokości. Cały rozmiar zależy od wysokości widoku, którą można zdefiniować w dowolny sposób, jak widać na rysunku 15.

Dostosowywanie marginesów widoku

Aby wyrównać widoki, na pasku narzędzi kliknij Margines , aby wybrać domyślne marginesy dla każdego widoku, który dodajesz do układu. Wszelkie zmiany domyślnej marży mają zastosowanie tylko do widoków dodanych od tego momentu.

Możesz kontrolować marżę w przypadku każdego widoku w oknie Atrybuty, klikając liczbę w wierszu, który reprezentuje dany warunek. Na ilustracji 14 objaśnienie 4 pokazuje dolny margines ustawiony na 16 dp.

Rysunek 16. Przycisk Margin na pasku narzędzi.

Wszystkie marginesy oferowane przez narzędzie są wielokrotnościami 8 dp, aby ułatwić dopasowanie widoków do zaleceń dotyczących siatki kwadratowej o wymiarach 8 dp w ramach Material Design.

Sterowanie grupami liniowymi za pomocą łańcucha

Łańcuch to grupa widoków połączonych ze sobą dwukierunkowymi ogranicznikami pozycji. Widoki w łańcuchu mogą być rozmieszczone pionowo lub poziomo.

Łańcuchy można stylizować na jeden z tych sposobów:

1. Spread: widoki są równomiernie rozłożone po uwzględnieniu marż. Jest to ustawienie domyślne.
2. Rozprowadź wewnątrz: pierwsze i ostatnie wyświetlenia są przypisane do ograniczeń po obu końcach łańcucha, a pozostałe są równomiernie rozłożone.
3. Ważone: gdy łańcuch jest ustawiony jako rozłożony lub rozciągnięty w środku, możesz wypełnić pozostałą przestrzeń, ustawiając dla jednego lub większej liczby widoków „dopasowanie ograniczeń” (0dp). Domyślnie przestrzeń jest równomiernie rozdzielana między wszystkie widoki danych, dla których ustawiono „ograniczenia zgodności”, ale możesz przypisać wagę każdemu widokowi za pomocą atrybutów layout_constraintHorizontal_weight i layout_constraintVertical_weight. Działa to tak samo jak layout_weight w układzie liniowym: widok o najwyższej wartości wagi zajmuje najwięcej miejsca, a widoki o tej samej wadze zajmują tyle samo miejsca.
4. Zpakowane: widoki są pakowane po uwzględnieniu marż. Możesz dostosować ustawienie całego łańcucha – w lewo lub w prawo, w górę lub w dół – przez zmianę ustawienia widoku „głowy” łańcucha.

Widok „head” łańcucha – widok skrajnie od lewej w łańcuchu poziomym (w układzie od lewej do prawej) i widok skrajny w pionie w łańcuchu pionowym – definiuje styl łańcucha w pliku XML. Możesz jednak przełączać się między opcjami rozproszenie, rozproszenie wewnątrz i zbiorzone, wybierając dowolny widok w łańcuchu i klikając przycisk , który pojawi się pod widokiem.

Aby utworzyć łańcuch, wykonaj te czynności, jak pokazano w filmie 4:

1. Wybierz wszystkie widoki, które mają być uwzględnione w łańcuchu.
2. Kliknij prawym przyciskiem myszy jeden z widoków.
3. Wybierz Sieć.
4. Wybierz Do środka poziomo lub Do środka pionowo.

Oto kilka kwestii, które warto wziąć pod uwagę podczas tworzenia łańcuchów:

• Widok może być częścią łańcucha poziomego i pionowego, dzięki czemu możesz tworzyć elastyczne układy siatki.
• Łańcuch działa prawidłowo tylko wtedy, gdy każdy jego koniec jest ograniczony do innego obiektu na tej samej osi, jak pokazano na rysunku 14.
• Chociaż orientacja łańcucha jest pionowa lub pozioma, korzystanie z niego nie powoduje wyrównywania widoków w tym kierunku. Aby umieścić odpowiednie położenie każdego widoku w łańcuchu, uwzględnij inne ograniczenia, takie jak ograniczenia wyrównania.

Automatycznie twórz ograniczenia

Zamiast dodawać ograniczenia do każdego widoku podczas umieszczania go w układzie, możesz przenieść każdy widok w wybrane miejsca w Edytorze układu, a następnie kliknąć Wnioskowanie ograniczeń , aby utworzyć ograniczenia automatycznie.

Wnioskowanie ograniczeń skanuje układ, aby określić najbardziej skuteczny zestaw ograniczeń dla wszystkich widoków. Ogranicza widoki do ich aktualnych pozycji, zapewniając przy tym elastyczność. Może być konieczne wprowadzenie poprawek, aby układ działał elastycznie zgodnie z zamierzeniami na różnych rozmiarach i orientacjach ekranu.

Automatyczne łączenie z grupą nadrzędną to osobna funkcja, którą możesz włączyć. Gdy ta funkcja jest włączona i dodasz widoki podrzędne do widoku nadrzędnego, automatycznie utworzy ona co najmniej 2 ograniczenia dla każdego widoku podczas dodawania go do układu – ale tylko wtedy, gdy jest to odpowiednie dla widoku nadrzędnego. Autoconnect nie tworzy ograniczeń dla innych widoków w schemacie.

Automatyczne łączenie jest domyślnie wyłączone. Aby go włączyć, na pasku narzędzi Edytora układu kliknij Włącz automatyczne połączenie z elementem nadrzędnym .

Animacje klatek kluczowych

W elemencie ConstraintLayout możesz animować zmiany rozmiaru i pozycji elementów za pomocą tagów ConstraintSet i TransitionManager.

ConstraintSet to lekki obiekt, który reprezentuje ograniczenia, marginesy i wypełnienie wszystkich elementów podrzędnych w ConstraintLayout. Gdy zastosujesz ConstraintSet do wyświetlanego ConstraintLayout, układ zaktualizuje ograniczenia wszystkich jego elementów podrzędnych.

Aby utworzyć animację przy użyciu ConstraintSet, określ 2 pliki układu, które będą działać jako początkowa i końcowa klatka kluczowa animacji. Następnie możesz załadować ConstraintSet z drugiego pliku klatki kluczowej i zastosować go do wyświetlanego ConstraintLayout.

Ten przykład kodu pokazuje, jak animować przenoszenie pojedynczego przycisku na dół ekranu.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<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">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<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">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Dodatkowe materiały

ConstraintLayout jest używany w aplikacji demonstracyjnej Sunflower.