MotionLayout
to typ układu, który pomaga zarządzać ruchem i animacją widżetu w aplikacji.
MotionLayout
jest podklasą
ConstraintLayout
i opiera się na bogatym
możliwości układu graficznego. W ramach biblioteki ConstraintLayout
, MotionLayout
jest dostępna jako biblioteka pomocy.
MotionLayout
wypełnia lukę między przejściami układu a złożonym ruchem
różne funkcje, oferując połączenie różnych funkcji z animacją właściwości.
platformy,
TransitionManager
i
CoordinatorLayout
.
Oprócz opisu przejścia między układami w MotionLayout
możesz też:
ani animować właściwości układu. Dodatkowo wspiera też
szybko wyszukiwane słowa
przejścia. Oznacza to, że można natychmiast wyświetlić dowolny punkt przejścia
tylko na podstawie pewnych warunków, np. sterowania dotykowego. MotionLayout
obsługuje też
klatki kluczowe, które pozwalają w pełni dostosować przejścia do Twoich potrzeb.
Funkcja MotionLayout
jest w pełni deklaratywna, co oznacza, że możesz opisać dowolne przejścia w języku:
nawet w formacie XML.
Uwagi dotyczące projektu
MotionLayout
służy do przenoszenia i animowania elementów interfejsu oraz zmieniania ich rozmiaru, za pomocą których
interakcji użytkowników, np. przycisków i pasków tytułu. Nie używaj ruchu w aplikacji jako:
nieuzasadniony efekt specjalny. Pokaż użytkownikom, czym jest Twoja aplikacja
co robię. Więcej informacji o projektowaniu aplikacji z ruchem ruchomym znajdziesz w
Sekcja Material Design Zrozumienie
ruchu.
Rozpocznij
Aby zacząć używać narzędzia MotionLayout
w projekcie, wykonaj te czynności.
-
Dodaj zależność
ConstraintLayout
:, aby użyćMotionLayout
w projekcie, dodaj parametrConstraintLayout
2.0 zależność odbuild.gradle
. Jeśli używasz AndroidaX, dodaj parametr tę zależność: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") }
-
Utwórz plik
MotionLayout
:MotionLayout
jest podklasą klasyConstraintLayout
, więc możesz przekształcić dowolną istniejąceConstraintLayout
wMotionLayout
przez zastępując nazwę klasy w pliku zasobów układu, jak widać w pliku następujące przykłady:AndroidX
<!-- before: ConstraintLayout --> <androidx.constraintlayout.widget.ConstraintLayout .../> <!-- after: MotionLayout --> <androidx.constraintlayout.motion.widget.MotionLayout .../>
Biblioteka pomocy
<!-- before: ConstraintLayout --> <android.support.constraint.ConstraintLayout .../> <!-- after: MotionLayout --> <android.support.constraint.motion.MotionLayout .../>
Oto pełny przykład pliku
MotionLayout
, który definiuje układ widoczny na ilustracji 1:AndroidX
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </androidx.constraintlayout.motion.widget.MotionLayout>
Biblioteka pomocy
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </android.support.constraint.motion.MotionLayout>
-
Utwórz MotionScene: w poprzednim
MotionLayout
przykładowy atrybutapp:layoutDescription
odwołuje się do scenę ruchu. Scena ruchu to plik zasobów XML. W<MotionScene>
pierwiastek, scena ruchu zawiera wszystkie opisy odpowiadającego mu układu. Aby oddzielić informacje o układzie od ruchu opisy, każdy elementMotionLayout
odwołuje się do osobnego ruchu scena. Definicje w scenie animacji mają pierwszeństwo przed podobnymi definicje:MotionLayout
.Oto przykładowy plik ze scenami ruchu, który opisuje podstawowy obraz poziomy ruch na ilustracji 1:
<?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
Uwaga:
-
<Transition>
zawiera podstawową definicję ruchu.-
motion:constraintSetStart
imotion:constraintSetEnd
to odwołania do między punktami końcowymi ruchu. Te punkty końcowe są zdefiniowane w sekcji<ConstraintSet>
elementów później w scenie ruchu. -
motion:duration
określa liczbę milisekund który jest potrzebny do ukończenia ruchu.
-
-
<OnSwipe>
umożliwia utworzenie sterowania dotykowego dla ruchu.-
motion:touchAnchorId
odnosi się do widoku, który użytkownik może przesuń palcem i przeciągnij. -
motion:touchAnchorSide
oznacza widok jest przeciągany z prawej strony. -
motion:dragDirection
oznacza postęp. kierunku przeciągania. Przykład:motion:dragDirection="dragRight"
oznacza postęp rośnie w miarę przeciągania widoku w prawo.
-
-
<ConstraintSet>
gdzie definiuje się różne ograniczenia opisujące ruch. W tym przykładzie jeden<ConstraintSet>
jest zdefiniowany dla każdego punktu końcowego ruchu. Te punkty końcowe są wyśrodkowane w pionie za pomocą:app:layout_constraintTop_toTopOf="parent"
iapp:layout_constraintBottom_toBottomOf="parent"
W poziomie punkty końcowe znajdują się po lewej i prawej stronie ekranu.
Bardziej szczegółowe omówienie różnych elementów sceny ruchu , zobacz Przykłady MotionLayout.
-
Atrybuty interpolowane
W pliku scen ruchu elementy ConstraintSet
mogą zawierać dodatkowe
które są interpolowane podczas przejścia. Oprócz pozycji i
granicy, następujące atrybuty są interpolowane przez funkcję MotionLayout
:
alpha
visibility
elevation
rotation
,rotationX
,rotationY
translationX
,translationY
,translationZ
scaleX
,scaleY
Atrybuty niestandardowe
W polu <Constraint>
możesz użyć elementu <CustomAttribute>
, aby określić
przejście dla atrybutów, które nie są powiązane tylko z pozycją lub View
.
<Constraint android:id="@+id/button" ...> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60"/> </Constraint>
Pole <CustomAttribute>
zawiera 2 osobne atrybuty:
- Pole
motion:attributeName
jest wymagane i musi pasować do obiektu z użyciem metody getter i metody ustawiania. Metoda pobierania i ustawiająca muszą pasować do konkretnego wzorca. Dla: np.backgroundColor
jest obsługiwany, ponieważ widok zawiera MetodygetBackgroundColor()
isetBackgroundColor()
. - Drugi atrybut, który musisz podać, zależy od typu wartości. Wybierz spośród
tych obsługiwanych typów:
motion:customColorValue
za kolorymotion:customIntegerValue
w przypadku liczb całkowitychmotion:customFloatValue
w przypadku liczby zmiennoprzecinkowejmotion:customStringValue
– ciągi tekstowemotion:customDimension
dla wymiarówmotion:customBoolean
dla wartości logicznych
Przy określaniu atrybutu niestandardowego określ wartości punktów końcowych zarówno na początku, jak i
na końcu <ConstraintSet>
elementów.
Zmiana koloru tła
Kontynuując poprzedni przykład, załóżmy, że chcesz zmienić kolory widoku. jako część jego ruchu, jak widać na rysunku 2.
Dodaj element <CustomAttribute>
do każdego elementu ConstraintSet
, tak jak na ilustracji
ten fragment kodu:
<ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet>
Dodatkowe atrybuty MotionLayout
Oprócz atrybutów z poprzedniego przykładu atrybut MotionLayout
ma inne
atrybutami, które możesz określić:
app:applyMotionScene="boolean"
wskazuje, czy chcesz zastosować scenę ruchu. Domyślna wartość tego atrybutu totrue
.app:showPaths="boolean"
wskazuje, czy ścieżki animacji mają być wyświetlane jako jest aktywny. Domyślna wartość tego atrybutu tofalse
.app:progress="float"
pozwala wprost określić postęp przejścia. Ty może używać dowolnej wartości zmiennoprzecinkowej z zakresu0
(początek przejścia) do1
(koniec przejścia).app:currentState="reference"
umożliwia określenie konkretnego elementuConstraintSet
.app:motionDebug
umożliwia wyświetlanie dodatkowych informacji na temat debugowania ruchu. Możliwe wartości to"SHOW_PROGRESS"
,"SHOW_PATH"
oraz"SHOW_ALL"
.
Dodatkowe materiały
Więcej informacji o funkcji MotionLayout
znajdziesz w tych materiałach:
- Zaawansowany Android w Kotlin 03.2: animacja w MotionLayout
- Przykłady MotionLayout
- Przykłady MotionLayout/ConstraintLayout w GitHub
- Wprowadzenie do MotionLayout (część I)
- Wprowadzenie do MotionLayout (część II)
- Wprowadzenie do MotionLayout (część III)
- Wprowadzenie do MotionLayout (część IV)