Ta strona została przetłumaczona przez Cloud Translation API.

Utwórz elastyczny interfejs z użyciem ConstraintLayout Elementu Android Jetpack.

ConstraintLayout umożliwia tworzenie dużych, złożonych układów z płaską hierarchią widoku – bez zagnieżdżonych grup widoków. Podobny do RelativeLayout jest taki, że wszystkie widoki są układane zgodnie z zależnościami między widokami równorzędnymi i układem nadrzędnym, ale jest on bardziej elastyczny niż RelativeLayout i łatwiejszy w użyciu w edytorze układów w Android Studio.

Wszystkie możliwości ConstraintLayout są dostępne bezpośrednio w narzędziach wizualnych edytora układu, ponieważ interfejs API układu i edytor układu zostały stworzone specjalnie dla siebie. Możesz utworzyć układ w ConstraintLayout całkowicie, przeciągając go zamiast edytować plik XML.

Na tej stronie dowiesz się, jak utworzyć układ za pomocą ConstraintLayout w Android Studio 3.0 lub nowszym. Więcej informacji o edytorze układów znajdziesz w artykule Tworzenie interfejsu użytkownika w Edytorze układów.

Aby zobaczyć różne układy, które możesz utworzyć za pomocą ConstraintLayout, zapoznaj się z projektem Przykłady układów ograniczeń na GitHubie.

Omówienie ograniczeń

Aby określić położenie widoku w obszarze ConstraintLayout, dodaj co najmniej 1 ograniczenie w poziomie i 1 pionowo. Każde ograniczenie reprezentuje połączenie lub wyrównanie z innym widokiem, układem nadrzędnym lub niewidoczną wytyczką. Każde ograniczenie określa położenie widoku na osi pionowej lub poziomej. Każdy widok musi zawierać co najmniej 1 ograniczenie dla każdej osi, ale często niezbędne jest więcej.

Po upuszczeniu widoku w edytorze układów pozostaje on tam, gdzie go opuścisz, nawet jeśli nie ma żadnych ograniczeń. Ma to na celu wyłącznie ułatwienie edycji. Jeśli widok nie ma ograniczeń po uruchomieniu układu na urządzeniu, jest rysowany w pozycji [0,0] (lewym górnym rogu).

Na ilustracji 1 układ w edytorze wygląda dobrze, ale w widoku C nie ma ograniczenia pionowego. Gdy ten układ jest rysowany na urządzeniu, widok C jest ustawiany w poziomie do lewej i prawej krawędzi widoku A, ale wyświetla się u góry ekranu, ponieważ nie ma ograniczenia pionowego.

Rysunek 1. Edytor wyświetla widok C poniżej litery A, ale nie ma on ograniczenia pionowego.

Rysunek 2. Widok C jest teraz ograniczony w pionie poniżej widoku A.

Chociaż brak ograniczenia nie powoduje błędu kompilacji, Edytor układów wskazuje brakujące ograniczenia na pasku narzędzi jako błąd. Aby wyświetlić błędy i inne ostrzeżenia, kliknij Pokaż ostrzeżenia i błędy . Aby pomóc Ci uniknąć brakujących ograniczeń, Edytor układu automatycznie dodaje je za pomocą funkcji Automatyczne łączenie i określanie ograniczeń.

Dodaj ConstraintLayout do swojego projektu

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

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

Odlotowe

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

Kotlin

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

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

Odlotowy

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

Kotlin

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

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

Teraz możesz utworzyć układ w ConstraintLayout.

Konwertowanie układu

Rysunek 3. Menu do konwertowania układu na ConstraintLayout.

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

Otwórz układ w Android Studio i kliknij kartę Projekt u dołu okna edytora.
W oknie Drzewo komponentów kliknij układ prawym przyciskiem myszy i wybierz Konwertuj układ linearny na element ConstraintLayout.

Utwórz nowy układ

Aby utworzyć nowy plik układu ograniczeń, wykonaj te czynności:

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

Dodawanie i usuwanie ograniczenia

Aby dodać ograniczenie, wykonaj te czynności:

Film 1. Lewa strona widoku jest ograniczona do lewej strony elementu nadrzędnego.

Przeciągnij widok z okna Paleta do edytora.

Po dodaniu widoku w elemencie ConstraintLayout jest on wyświetlany w ramce ograniczającej z kwadratowymi uchwytami zmiany rozmiaru na rogach i okrągłymi uchwytami ograniczeń po każdej stronie.
Kliknij widok, aby go wybrać.
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ą. Zwróć uwagę, że podczas przeciągania uchwytu ograniczenia edytor układu wyświetla potencjalne kotwice połączenia i niebieskie nakładki.
- Kliknij jeden z przycisków Utwórz połączenie w sekcji Układ okna Atrybuty, jak widać na rysunku 4.
  
  Rysunek 4. Sekcja Układ w oknie Atrybuty umożliwia tworzenie połączeń.

Po utworzeniu ograniczenia edytor nadaje domyślny margines, który oddziela oba widoki.

Podczas tworzenia ograniczeń pamiętaj o tych regułach:

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óry korzysta z tej samej płaszczyzny. 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 go wybrać, a następnie kliknij Usuń.
Kliknij z naciśniętym klawiszem Control (Command w macOS) kotwicę ograniczenia. 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ąć.

Film 2. Dodawanie ograniczenia, które jest sprzeczne z istniejącym.

Jeśli dodasz w widoku przeciwstawne ograniczenia, linie te zostaną zwinięte jak sprężyna, co wskazuje przeciwne siły, jak widać na 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 zamiast tego chcesz, aby widok rozciągał się zgodnie z ograniczeniami, przełącz rozmiar na „Dopasuj ograniczenia”. Jeśli chcesz zachować bieżący rozmiar, ale przesunąć widok tak, aby nie był wyśrodkowany, dostosuj odchylenie ograniczenia.

Korzystając z ograniczeń, możesz osiągnąć różne typy działania układu zgodnie z opisem w kolejnych sekcjach.

Pozycja nadrzędna

Ogranicz bok widoku do odpowiadającej mu krawędzi układu.

Na ilustracji 7 lewa strona widoku jest połączona z lewą krawędzią układu nadrzędnego. Odległość od krawędzi możesz określić za pomocą marginesów.

Rysunek 7. Ograniczenie poziome dla zasobu nadrzędnego.

Pozycja zamówienia

Określ kolejność wyświetlania dwóch widoków (pionowych lub poziomych).

Na ilustracji 8 obiekt B jest zawsze ograniczony do prawej strony, a C – poniżej A. Ograniczenia te nie oznaczają jednak wyrównania, więc wskaźnik B może się swobodnie przesuwać w górę lub w dół.

Rysunek 8. Ograniczenie poziome i pionowe.

Wyrównanie

Wyrównuje krawędź widoku do tej samej krawędzi innego widoku.

Na ilustracji 9 lewa strona punktu B jest wyrównana z lewą stroną A. Jeśli chcesz wyrównać środki widoku, utwórz blokadę po obu stronach.

Wyrównanie możesz odsunąć, przeciągając widok do wewnątrz od ograniczenia. Na przykład na ilustracji 10 widać pozycję B z wyrównaniem przesunięcia 24 dp. Przesunięcie jest określane przez margines widoku ograniczonego.

Możesz też wybrać wszystkie widoki, które chcesz wyrównać, a następnie kliknąć Wyrównaj na pasku narzędzi, by wybrać typ wyrównania.

Rysunek 9. Ograniczenie wyrównania w poziomie.

Rysunek 10. Ograniczenie odsunięcia wyrównania w poziomie.

Wyrównanie punktu odniesienia

Wyrównuje linię bazową tekstu widoku do linii bazowej tekstu w innym widoku.

Na ilustracji 11 pierwszy wiersz tekstu B jest wyrównany z tekstem w punkcie A.

Aby utworzyć ograniczenie punktu odniesienia, kliknij prawym przyciskiem myszy widok tekstu, który chcesz ograniczyć, a następnie kliknij Pokaż punkt odniesienia. Następnie kliknij linię bazową tekstu i przeciągnij ją do innego punktu odniesienia.

Rysunek 11. Ograniczenie wyrównania punktu odniesienia.

Ogranicz do wytycznych

Możesz dodać pionową lub poziomą wskazówkę, która pozwala ograniczyć liczbę wyświetleń i jest niewidoczna dla użytkowników aplikacji. Możesz umieścić wytyczną w układzie na podstawie jednostki dp lub wartości procentowej względem krawędzi układu.

Aby utworzyć wskazówkę, kliknij Wskazówki na pasku narzędzi, a następnie kliknij Dodaj wskazówkę pionową lub Dodaj wytyczne poziome.

Przeciągnij przerywaną linię, aby zmienić jej położenie, i kliknij kółko na krawędzi wytycznych, aby przełączyć tryb pomiaru.

Rysunek 12. Widok ograniczony do wytycznych.

Ogranicz do bariery

Bariera, podobnie jak wytyczne, to niewidoczna linia, do której można ograniczyć widoki, z wyjątkiem bariery, które nie mają określonej własnej pozycji. Położenie bariery zmienia się zależnie od pozycji zawartych w niej widoków. Jest to przydatne, gdy chcesz ograniczyć widok do określonego zestawu widoków, a nie do jednego.

Na przykład na ilustracji 13 widok C jest ograniczony do prawej strony bariery. Bariera jest ustawiona na „koniec” (lub po prawej stronie w układzie od lewej do prawej) w widokach A i B. Bariera porusza się w zależności od tego, czy prawa strona widoku A czy widoku B jest najdalej z prawej strony.

Aby utworzyć barierę, wykonaj następujące czynności:

Kliknij Wskazówki na pasku narzędzi, a następnie Dodaj barierę pionową lub Dodaj barierę poziomą.
W oknie Drzewo komponentów wybierz widoki wewnątrz bariery i przeciągnij je do komponentu bariery.
Wybierz barierę z drzewa komponentów, otwórz okno Atrybuty , a następnie ustaw barrierDirection.

Teraz możesz utworzyć ograniczenie z innego widoku prowadzącego do bariery.

Możesz też ograniczyć widoki wewnątrz bariery. Dzięki temu możesz wyrównać ze sobą wszystkie widoki, nawet jeśli nie wiesz, który widok jest najdłuższy, a który najwyższy.

Można też umieścić wytyczną wewnątrz bariery, aby zapewnić jej „minimalne” położenie.

Rysunek 13. Widok C jest ograniczony do bariery, która przesuwa się zależnie od pozycji i rozmiaru widoku A oraz widoku B.

Dostosuj odchylenie ograniczenia

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ć odchylenie, przeciągając suwak odchylenia w oknie Atrybuty lub przeciągając widok, tak jak w filmie 3.

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

Film 3. Dostosowywanie uprzedzeń ograniczenia.

Dostosowywanie rozmiaru widoku

Rysunek 14. Podczas wybierania widoku okno Atrybuty zawiera opcje kontroli współczynnika rozmiaru 1, 2 usuwania ograniczeń, 3 trybu wysokości lub szerokości, 4 marginesy i 5 odchylenia ograniczenia. W edytorze układu możesz też zaznaczyć poszczególne ograniczenia, klikając je na liście ograniczeń 6.

Za pomocą narożnych uchwytów możesz zmieniać rozmiar widoku, 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.

W górnej części okna Atrybuty znajduje się inspektor widoku, który zawiera opcje dla kilku atrybutów układu, tak jak to widać na ilustracji 14. Ta funkcja jest dostępna tylko w przypadku widoków z układem ograniczeń.

Możesz zmienić sposób obliczania wysokości i szerokości, klikając symbole oznaczone objaśnieniem 3 na rysunku 14. Te symbole przedstawiają tryb rozmiaru w następujący sposób. Aby przełączać się między tymi ustawieniami, kliknij ten symbol:

Stały: określ konkretny wymiar w poniższym polu tekstowym lub zmień rozmiar widoku w edytorze.
Zawijaj treść: widok rozwija się w stopniu niezbędnym do dopasowania zawartości.

layout_restrictedSzerokość

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

Ograniczenia dopasowania: widok jest w miarę możliwości rozwijany, aby spełnić ograniczenia po obu stronach, uwzględniając jego marże. Możesz jednak zmienić to działanie za pomocą poniższych atrybutów i wartości. Te atrybuty będą działać tylko wtedy, gdy ustawisz szerokość widoku na „pasuj do ograniczeń”:
- layout_constraintSzerokość_min
  Spowoduje to ustawienie wymiaru dp na potrzeby minimalnej szerokości widoku.
- layout_constraintWidth_max
  Pobiera to wymiar dp dla maksymalnej szerokości widoku.
Jeśli jednak dany wymiar ma tylko jedno ograniczenie, widok rozwija się do zawartości. Użycie tego trybu do wysokości lub szerokości pozwala też określić współczynnik rozmiaru.

Uwaga: nie możesz użyć match_parent w żadnym widoku danych w ConstraintLayout. Zamiast tego użyj „ograniczeń dopasowania” (0dp).

Określ rozmiar jako współczynnik

Rysunek 15. Widok jest ustawiony na format 16:9, a szerokość jest określana na podstawie współczynnika wysokości.

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ść ustawione na „ograniczenia dopasowania”, możesz kliknąć Przełącz ograniczenie współczynnika proporcji, aby wybrać wymiar, który ma być uzależniony od współczynnika drugiego współczynnika. Inspektor widoku wskazuje, który wymiar jest ustawiony jako współczynnik, łącząc odpowiednie krawędzie linią ciągłą.

Jeśli na przykład dla obu stron ustawisz „dopasowanie 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 ustawić równomierny odstęp między widokami, kliknij Marża na pasku narzędzi i wybierz domyślny margines dla każdego widoku dodanego do układu. Wszelkie zmiany wprowadzane w domyślnym marginesie będą miały zastosowanie tylko do widoków, które dodasz od tej chwili.

Margines każdego widoku możesz kontrolować w oknie Atrybuty. Aby to zrobić, kliknij liczbę w wierszu odpowiadającym danemu ograniczeniu. Na ilustracji 14 objaśnienie 4 pokazuje dolny margines ustawiony na 16 dp.

Rysunek 16. przycisku Margines na pasku narzędzi.

Wszystkie marże dostępne w narzędziu to formaty o wartości 8 dp, które pozwalają dopasować wyświetlane widoki do zalecanych w Material Design.

Sterowanie grupami liniowymi za pomocą łańcucha

Rysunek 17. Poziomy łańcuch z dwoma widokami.

Łańcuch to grupa widoków danych połączonych ze sobą za pomocą dwukierunkowych ograniczeń pozycji. Widoki w ramach łańcucha mogą być rozłożone w pionie lub poziomie.

Rysunek 18. Przykłady stylów poszczególnych sieci.

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

Rozłożenie: wyświetlenia są równomiernie rozkładane po uwzględnieniu marż. Jest to ustawienie domyślne.
Rozłożone wewnątrz: pierwszy i ostatni widok są przymocowane do ograniczeń na każdym końcu łańcucha, a pozostałe są równomiernie rozłożone.
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 rozłożona między widokami, w przypadku 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 z najwyższą wartością wagi zajmuje najwięcej miejsca, a widoki o tej samej wadze otrzymują tę samą ilość miejsca.
Spakowany: wyświetlenia są sumowane po uwzględnieniu marż. Możesz dostosować odchylenie całego łańcucha – w lewo, w prawo, w górę lub w dół – zmieniając odchylenie widoku ł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 widokami rozproszone, rozprzestrzenione w środku i spakowane, wybierając dowolny widok w łańcuchu i klikając przycisk łańcucha widoczny pod widokiem.

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

Wybierz wszystkie widoki, które chcesz uwzględnić w łańcuchu.
Kliknij prawym przyciskiem myszy jeden z widoków.
Wybierz Sieci.
Wybierz Wyśrodkuj w poziomie lub Wyśrodkuj w pionie.

Film 4. Tworzę poziomy łańcuch.

Oto kilka kwestii, o których warto pamiętać, gdy używasz sieci:

Widok może być częścią zarówno poziomego, jak i pionowego łańcucha, dzięki czemu możesz tworzyć elastyczne układy siatki.
Łańcuch działa prawidłowo tylko wtedy, gdy każdy koniec łańcucha jest ograniczony do innego obiektu na tej samej osi, jak pokazano na ilustracji 14.
Nawet jeśli łańcuch ma orientację pionową lub poziomą, użycie takiego łańcucha nie spowoduje wyrównania 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 ich w układzie, możesz przenieść każdy widok w odpowiednie pozycje w edytorze układów, a potem kliknąć Wnioskowanie ograniczeń , aby automatycznie utworzyć ograniczenia.

Wnioskowanie ograniczeń skanuje układ, aby określić najskuteczniejszy zestaw ograniczeń we wszystkich widokach. Ogranicza widoki do ich aktualnych pozycji, zapewniając przy tym elastyczność. Aby układ działał zgodnie z oczekiwaniami na różnych rozmiarach i orientacjach ekranu, może być konieczne wprowadzenie poprawek.

Automatyczne łączenie z grupą nadrzędną to osobna funkcja, którą możesz włączyć. Gdy jest on włączony i dodasz do elementu nadrzędnego widoki podrzędne, ta funkcja automatycznie tworzy co najmniej 2 ograniczenia dla każdego widoku podczas dodawania ich do układu, ale tylko wtedy, gdy ograniczenie widoku do układu nadrzędnego jest uzasadnione. Automatyczne łączenie nie nakłada ograniczeń na inne widoki w układzie.

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

Animacje klatek kluczowych

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

ConstraintSet to prostszy obiekt, który reprezentuje ograniczenia, marginesy i dopełnienie wszystkich elementów podrzędnych w obrębie ConstraintLayout. Gdy zastosujesz obiekt ConstraintSet do wyświetlanego elementu 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 wczytać obiekt ConstraintSet z drugiego pliku klatki kluczowej i zastosować go do wyświetlanego elementu ConstraintLayout.

Uwaga: animacje ConstraintSet animują tylko rozmiar i pozycję elementów podrzędnych. Nie animują innych atrybutów, takich jak kolor.

Ten przykładowy kod pokazuje, jak animować przesunięcie 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>

Uwaga: w Android Studio 3.6 lub nowszym funkcja wiązania widoku może zastąpić wywołania findViewById(). Zapewnia też bezpieczeństwo podczas kompilacji w przypadku kodu wchodzącego w interakcję z widokami. Rozważ użycie powiązania widoku zamiast findViewById().

Dodatkowe materiały

ConstraintLayout jest używany w aplikacji demonstracyjnej Sunflower.