Tworzenie elastycznego interfejsu użytkownika z użyciem ConstraintLayout Zawiera Android Jetpack.

Wypróbuj sposób tworzenia wiadomości

Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z układów w funkcji Utwórz

Układ ograniczenia w tworzeniu wiadomości → .

ConstraintLayout umożliwia tworzenie dużych, złożonych układów z płaską hierarchią widoków. zagnieżdżonych grup widoków. Jest ona podobna do RelativeLayout ponieważ wszystkie widoki są rozmieszczone zgodnie z relacjami między poglądami rodzeństwa i układem nadrzędnym, ale jest bardziej elastyczny niż RelativeLayout w edytorze układów w Android Studio.

Wszystkie możliwości usługi ConstraintLayout są dostępne bezpośrednio w narzędzi wizualnych edytora układu, ponieważ interfejs API układu i edytor układów stworzone specjalnie dla siebie. Możesz utworzyć układ za pomocą ConstraintLayout przez przeciągnięcie zamiast edytowania Plik XML:

Ta strona pokazuje, jak utworzyć układ z elementem ConstraintLayout Android Studio 3.0 lub nowszy. Więcej informacji o Edytorze układów przeczytaj artykuł o tworzeniu interfejsu użytkownika w Edytorze układów.

Aby zobaczyć różne układy, które możesz utworzyć za pomocą ConstraintLayout: zobacz Projekt przykładów układu ograniczeń na GitHubie.

Omówienie ograniczeń

Aby określić pozycję widoku w widoku ConstraintLayout, należy dodać parametr co najmniej jedno ograniczenie poziome i jedno ograniczenie pionowe. Każde ograniczenie reprezentuje połączenie lub wyrównanie z innym widokiem, układem nadrzędnym niewiarygodna. Każde ograniczenie określa pozycję widoku w na osi pionowej lub poziomej. Każdy widok musi zawierać co najmniej jedno ograniczenie: ale często potrzebnych jest ich więcej.

Po upuszczeniu widoku do Edytora układów pozostaje on na tym samym miejscu, nawet jeśli nie ma ograniczeń. Ma to na celu wyłącznie ułatwienie edycji. Jeśli widok nie ma ograniczeń przy uruchamianiu układu na urządzeniu, jest on rysowany w pozycji [0,0] (w lewym górnym rogu).

Na ilustracji 1 układ wygląda dobrze w edytorze, ale nie ma orientacji pionowej. ograniczenie w widoku C. Gdy ten układ jest rysowany na urządzeniu, wyświetl widok C w poziomie. jest wyrównany z lewą i prawą krawędzią widoku A, ale jest widoczny u góry bo nie ma ograniczenia pionowego.

Rysunek 1. Edytor wyświetla widok C pod A, ale nie ma ograniczenia pionowego.

Rysunek 2. Widok C jest teraz ograniczony w pionie widok A.

Chociaż brak ograniczenia nie powoduje błędu kompilacji, Edytor wskazuje brakujące ograniczenia jako błąd na pasku narzędzi. Aby wyświetlić błędów i innych ostrzeżeń, kliknij Pokaż ostrzeżenia i błędy. Aby pomóc Ci uniknąć braku ograniczeń, Edytor układów automatycznie dodaje wraz z ograniczeniami Automatyczne łączenie i określanie ograniczeń funkcje zabezpieczeń.

Dodaj ConstraintLayout do swojego projektu

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

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

   Odlotowe

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

   Kotlin

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

2. Dodaj bibliotekę jako zależność na poziomie modułu build.gradle, tak jak w przykładzie poniżej. Co nowego może się różnić od przedstawionej w przykładzie.

   Odlotowe

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

   Kotlin

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

3. Na pasku narzędzi lub w powiadomieniu o synchronizacji kliknij Synchronizuj projekt przy użyciu Gradle Pliki.

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

Konwertowanie układu

Rysunek 3. Menu, na które należy przekonwertować układ ConstraintLayout

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ę Design (Projekt) w dolnej części okna edytora.
2. W oknie Drzewo komponentów kliknij układ prawym przyciskiem myszy i wybierz Konwertuj Układ Linearny na ConstraintLayout.

Utwórz nowy układ

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

1. W oknie Projekt kliknij folder modułu i wybierz Plik > Nowe > XML > Układ XML.
2. Wpisz nazwę pliku układu i wpisz „androidx.constraintlayout.Widget.ConstraintLayout” dla katalogu głównego Tag.
3. Kliknij Zakończ.

Dodawanie i usuwanie ograniczenia

Aby dodać ograniczenie, wykonaj te czynności:

Film 1. Lewa strona widoku jest ograniczona do lewej. po stronie rodzica.

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

   Po dodaniu widoku w ConstraintLayout jest on wyświetlany w ramka ograniczająca z kwadratowymi uchwytami zmiany rozmiaru w każdym rogu i okrągłym uchwyty ograniczeń 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 . Zwróć uwagę, że podczas przeciągania uchwytu ograniczenia Edytor pokazuje potencjalne kotwice połączenia i niebieskie nakładki.

   • Kliknij jedną z opcji Utwórz połączenie. w sekcji Układ w oknie Atrybuty, jak widać na przykładzie. na rys. 4.

     

     Rysunek 4. Układ w oknie Atrybuty możesz tworzyć połączeń.

Po utworzeniu ograniczenia edytor nadaje mu domyślny margines, aby rozdzielić oba widoki.

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

• Każdy widok musi mieć co najmniej dwa ograniczenia: jedno poziome i jedno w branży.
• Ograniczenia możesz tworzyć tylko między uchwytem ograniczenia a kotwicą które znajdują się na tej samej płaszczyźnie. płaszczyzna pionowa – lewa i prawa strona boków – widoku można ograniczyć tylko do innej płaszczyzny pionowej, punkty odniesienia mogą ograniczać tylko do innych wartości bazowych.
• Każdego uchwytu ograniczenia można używać tylko w 1 ograniczeniu, ale tworzyć wiele ograniczeń z różnych widoków dla tego samego punktu zakotwiczenia.

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

• Kliknij ograniczenie, aby go wybrać, a następnie kliknij Usuń.

• Naciśnij klawisz Control (kliknij z naciśniętym klawiszem Command w systemie macOS) kotwica ograniczenia. Ograniczenie zmieni kolor na czerwony, wskazując, że można kliknąć jak widać na rysunku 5.

  

  Rysunek 5. Czerwone ograniczenie wskazuje który można kliknąć, aby go usunąć.

• W sekcji Układ w oknie Atrybuty kliknij kotwicę ograniczenia, jak widać na rysunku 6.

  

  Rysunek 6. Kliknij ograniczenie kotwicę, by ją usunąć.

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

Jeśli dodasz do widoku przeciwstawne ograniczenia, linie ograniczeń staną się jest zwinięty jak sprężyna, aby wskazać przeciwstawne siły, co widać na filmie 2. efekt jest najbardziej widoczny, gdy rozmiar widoku jest ustawiony na „stały”. lub „zawijaj treści”, W takim przypadku widok jest wyśrodkowany między ograniczeniami. Jeśli wolisz aby rozciągać widok tak, aby spełniał ograniczenia. zmień rozmiar na „Dopasuj ograniczenia”. Jeśli chcesz zachować bieżący rozmiar, ale przesunąć widok, aby nie był wyśrodkowany, dostosować efekt ograniczenia.

Możesz używać ograniczeń, aby osiągnąć różne typy działania układu, opisane w dalszej części tego artykułu.

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ład nadrzędny. Odległość od krawędzi możesz określić za pomocą marginesów.

Rysunek 7. Ograniczenie poziome, aby elementu nadrzędnego.

Pozycja zamówienia

Określ kolejność występowania dla dwóch widoków (pionowych lub pionowych). w poziomie.

Na rys. 8 obiekt B jest ograniczony, aby znajdował się zawsze po prawej stronie kąta A, a C to z ograniczeniem poniżej A. Ograniczenia te nie oznaczają jednak zgodności, więc B poruszają się w górę i w dół.

Rysunek 8. Poziomy i pionowy .

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 aby wyrównać oś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 wynosi zgodnie z marginesem ograniczonego widoku.

Możesz też zaznaczyć wszystkie widoki, które chcesz wyrównać, i kliknąć Wyrównaj na pasku narzędzi, aby wybrać typ wyrównania.

Rysunek 9. Wyrównanie w poziomie .

Rysunek 10. Przesunięcie w poziomie ograniczenie wyrównywania.

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, w którym chcesz ograniczenia i kliknij Pokaż punkt odniesienia. Potem kliknij tekst. i przeciągnij linię do innej.

Rysunek 11. Wyrównanie punktu odniesienia .

Ogranicz do wytycznych

Możesz dodać wskazówkę pionową lub poziomą, która pozwoli ograniczyć wyświetlono i jest niewidoczny dla użytkowników aplikacji. Możesz umieścić wytyczną w układzie na podstawie jednostek dp lub procentu względem do krawędzi układu.

Aby utworzyć wskazówkę, kliknij Wytyczne. na pasku narzędzi i kliknij Dodaj wytyczną pionową lub Dodaj Wytyczanie pozioma.

Przeciągnij przerywaną linię, aby zmienić jej położenie, i kliknij okrąg na krawędzi za pomocą której można przełączać tryb pomiaru.

Rysunek 12. Widok ograniczony do .

Ogranicz do bariery

Bariera, podobnie jak wytyczne, to niewidoczna linia, którą można ograniczać wyświetlenia, z tym że bariera nie definiuje własnej pozycji. Zamiast tego bariera zmienia się w zależności od pozycji zawartych w niej widoków. To jest przydatne, gdy chcesz ograniczyć widok do pewnego zestawu, a nie do jednego z konkretnego widoku.

Na przykład na ilustracji 13 widok C jest ograniczony do prawej strony Bariera. Bariera jest ustawiona na „end” (lub po prawej stronie, w tekście od lewej do prawej w widoku A i widoku B. Bariera przesuwa się w zależności od tego, czy po prawej stronie widoku A lub widoku B jest najdalej po prawej stronie.

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

1. Kliknij Wytyczne na pasku narzędzi, a następnie kliknij Dodaj barierę pionową lub Dodaj barierę poziomą.
2. W oknie Drzewo komponentów wybierz widoki, które mają się znajdować wewnątrz i przeciągnij je do komponentu bariery.
3. Wybierz barierę z drzewa komponentów, otwórz Atrybuty a następnie ustaw parametr barrierDirection.

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

Możesz też ograniczyć widoki wewnątrz bariery Bariera. W ten sposób można wyrównać 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ć „minimalne” dla bariery.

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

Dostosuj odchylenie ograniczenia

Po dodaniu ograniczenia po obu stronach widoku ten sam wymiar jest „stały” lub „zawijaj treść”, widok zostanie wyśrodkowany. między tymi dwoma ograniczeniami z domyślnie ustawionym odchyleniem wynoszącym 50%. Możesz dostosować przez przeciągnięcie suwaka odchylenia w oknie Atrybuty lub przez przeciągnięcie tak jak w filmie 3.

Jeśli zamiast tego chcesz, aby widok został rozciągnięty zgodnie z ograniczeniami, zmień rozmiar na „Dopasuj ograniczenia”.

Film 3. Dostosowywanie uprzedzeń ograniczenia.

Dostosowywanie rozmiaru widoku

Rysunek 14. Przy wybieraniu widoku Okno Atrybuty zawiera opcje dla: 1 format rozmiaru, 2 usuwanie ograniczeń, 3 tryb wysokości lub szerokości, 4 marże, Odchylenie ograniczenia 5. Możesz też zaznaczyć, ograniczeń w Edytorze układów, klikając je 6 Lista ograniczeń.

Możesz zmienić rozmiar widoku za pomocą uchwytów narożnych, ale powoduje to zakodowanie rozmiaru — widok nie zmienia rozmiaru w zależności od zawartości lub rozmiaru ekranu. Do wybierz inny tryb określania rozmiaru, kliknij widok i otwórz Atrybuty. po prawej stronie edytora.

W górnej części okna Atrybuty znajduje się inspektor widoku, zawiera elementy sterujące kilkoma atrybutami układu, jak widać na rysunku 14. To jest dostępne tylko w przypadku widoków w układzie ograniczeń.

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

• Stałe: określ konkretny wymiar w tym polu tekstowym lub zmiany rozmiaru widoku w edytorze.
• Zawijaj treść: widok można powiększyć o tyle, ile trzeba, treści.
• layout_restrictedSzerokość

Aby umożliwić zmianę wymiaru poziomego na true, ustaw go na i respektować ograniczenia. Domyślnie widżet ustawiony na WRAP_CONTENT nie podlega żadnym ograniczeniom.

• Dopasuj ograniczenia: widok jest maksymalnie rozwijany, aby po uwzględnieniu marż po uwzględnieniu marż. Musisz jednak może zmienić to zachowanie za pomocą poniższych atrybutów i wartości. Te są stosowane tylko wtedy, gdy ustawisz szerokość widoku na „dopasuj ograniczenia”:
  • 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 dopasowuje się do zawartości. Trzeba go użyć zarówno do wysokości, jak i szerokości, pozwala określić format rozmiaru.

.

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

Określ rozmiar jako współczynnik

Rysunek 15. Widok jest ustawiony na 16:9 szerokość na podstawie stosunku wysokości.

Możesz ustawić format widoku danych, np. 16:9, jeśli co najmniej jeden wymiary widoku danych są ustawione na „dopasowanie ograniczeń” (0dp). Aby włączyć funkcję i kliknij Przełącz ograniczenie współczynnika proporcji (objaśnienie) 1 na ilustracji 14) i wpisz wartość Współczynnik width:height w wyświetlonym danych wejściowych.

Jeśli zarówno szerokość, jak i wysokość mają wartość „Dopasuj ograniczenia”, możesz kliknąć Przełącz ograniczenie współczynnika proporcji, aby wybrać wymiar, który jest oparty na jego współczynnik proporcji. Inspektor widoku wskazuje, który wymiar jest ustawiony jako przez połączenie odpowiednich krawędzi linią ciągłą.

Jeśli na przykład ustawisz obie strony na „dopasowanie ograniczeń”, Kliknij pozycję Przełącz Ograniczenie współczynnika proporcji dwukrotnie, by ustawić szerokość jako stosunek wysokości. Całkowity rozmiar zależy od wysokości widoku, którą można zdefiniować w jak widać na rysunku 15.

Dostosowywanie marginesów widoku

Aby wyświetlenia były równomiernie rozmieszczone, kliknij Marża. na pasku narzędzi i wybierz domyślny margines dla każdego widoku, który dodasz do układ. Wszelkie zmiany wprowadzane w domyślnym marginesie będą miały zastosowanie tylko do wyświetleń od tej pory.

Margines każdego widoku możesz kontrolować w oknie Atrybuty przez klikając liczbę w wierszu odpowiadającym każdemu z ograniczeń. Na rys. 14 objaśnienie 4 pokazuje dolny margines: 16dp.

Rysunek 16. Margines na pasku narzędzi. Przycisk

Wszystkie marże dostępne w narzędziu to 8 dp, dzięki czemu możesz wyrównać liczbę wyświetleń zgodnie z zaleceniami Material Design na temat siatki kwadratowej 8 dp.

Sterowanie grupami liniowymi za pomocą łańcucha

Rysunek 17. Poziomy łańcuch z dwóch widoków.

Łańcuch to grupa widoków danych połączonych ze sobą dwukierunkowymi ograniczeń pozycji. Widoki w łańcuchu mogą być rozproszone: w pionie lub poziomie.

Rysunek 18. Przykłady każdej sieci stylu.

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

1. Rozłóż: wyświetlenia są równomiernie rozłożone po zastosowaniu marży. pod uwagę. Jest to ustawienie domyślne.
2. Rozmieszczone wewnątrz: pierwszy i ostatni widok są dołączane do elementu na każdym końcu łańcucha, a pozostałe są równomiernie rozkładany.
3. Ważone: gdy łańcuch jest ustawiony jako rozłożony lub rozszerzony w środku, możesz wypełnić pozostałe miejsce, ustawiając jedną lub więcej wyświetlenia do „dopasowania ograniczeń” (0dp). Domyślnie ten pokój jest równomiernie rozłożony na każdy widok z ustawionym ustawieniem „dopasowania ograniczeń”, ale możesz przypisać wagę każdemu widokowi za pomocą layout_constraintHorizontal_weight i Atrybuty layout_constraintVertical_weight. Działa to tak samo jak layout_weight w układ liniowy: widok o największej wartości wagi zajmuje najwięcej miejsca, wyświetlenia o tej samej wadze uzyskają taką samą ilość miejsca.
4. Spakowane: wyświetlenia są zsumowane po uwzględnieniu marż. . Możesz dostosować odchylenie całego łańcucha – w lewo, w prawo, w górę lub w dół—przez zmianę „głowicy łańcucha” i rozpoznawać możliwe uprzedzenia.

Głowa sieci widok – skrajny lewy widok w poziomym łańcuchu, (w układzie od lewej do prawej) oraz widok z góry w pionie – definiuje styl łańcucha w pliku XML. Możesz jednak przełączać się między trybami rozproszone, Rozpowszechnione w obrębie i pakowane, wybierając dowolny widok łańcucha i klikając przycisk łańcucha widoczną pod widokiem.

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

1. Wybierz wszystkie widoki, które chcesz uwzględnić w łańcuchu.
2. Kliknij prawym przyciskiem myszy jeden z widoków.
3. Wybierz Sieci.
4. 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, więc możesz tworzyć elastyczne układy siatki.
• Łańcuch działa prawidłowo tylko wtedy, gdy każdy koniec łańcucha jest ograniczony inny obiekt na tej samej osi, jak widać na rysunku 14.
• Łańcuch ma orientację pionową lub poziomą, ale użycie jednego nie wyrównuje widoków w tym kierunku. Aby osiągnąć właściwą pozycję w każdym widoku w łańcuchu obejmują inne ograniczenia, takie jak ograniczeniami 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 na żądane pozycje w Edytorze układów i kliknij Wnioskuj ograniczenia. aby automatycznie tworzyć ograniczenia.

Wnioskowanie ograniczeń skanuje układ, aby określić najskuteczniejszy zestaw. ograniczeń dla wszystkich widoków. Ogranicza widoki do ich bieżących pozycji a jednocześnie zapewnia elastyczność. Konieczna może być zmiana w zależności od rozmiaru i orientacji ekranu.

Automatyczne łączenie z grupą nadrzędną to osobna funkcja, którą możesz włączyć. Kiedy gdy dodasz widoki podrzędne do elementu nadrzędnego, tworzy co najmniej dwa ograniczenia dla każdego widoku danych po dodaniu ich do – ale tylko wtedy, gdy ograniczenie widoku jest odpowiednie układ. Automatyczne łączenie nie nakłada ograniczeń na inne widoki w układzie.

Automatyczne łączenie jest domyślnie wyłączone. Aby je włączyć, kliknij Włącz Automatyczne łączenie z użytkownikiem nadrzędnym na pasku narzędzi edytora układu.

Animacje klatek kluczowych

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

ConstraintSet to prostszy obiekt, który reprezentuje ograniczenia, marginesy i dopełnienie wszystkich elementów podrzędnych ConstraintLayout Gdy zastosujesz ConstraintSet do wyświetlono ConstraintLayout, układ aktualizuje ograniczenia wszystkie jego dzieci.

Aby utworzyć animację przy użyciu ConstraintSet, określ 2 układy stanowiących początkową i końcową klatkę kluczową animacji. Następnie można wczytać ConstraintSet z drugiego pliku klatki kluczowej i zastosuj go do wyświetlono ConstraintLayout.

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

Poniższy przykładowy kod pokazuje, jak animować przeniesienie pojedynczego przycisku do do dołu 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 wyświetlania wiązania może zastąpić Połączenia: findViewById(). Zapewnia też bezpieczeństwo typów podczas kompilacji w przypadku kodu, który wchodzi w interakcje z widokami. Rozważ użycie powiązania widoku zamiast findViewById()

Dodatkowe materiały

ConstraintLayout jest używany w Słonecznik aplikację w wersji demonstracyjnej.