Android Studio zawiera edytor projektu wizualnego dla typu układu MotionLayout, co ułatwia tworzenie i podglądanie animacji.
Edytor ruchu udostępnia prosty interfejs do manipulowania elementami z biblioteki MotionLayout, która stanowi podstawę animacji w aplikacjach na Androida. Bez Androida Studio tworzenie i modyfikowanie tych elementów wymaga ręcznego edytowania ograniczeń w plikach zasobów XML. Edytor ruchu może jednak wygenerować ten kod XML za Ciebie, obsługując stany początkowe i końcowe, klatki kluczowe, przejścia i osie czasu.
ConstraintLayout
Aby rozpocząć korzystanie z Edytora ruchu:
- Utwórz ConstraintLayout.
- W edytorze układu kliknij prawym przyciskiem myszy podgląd.
- Kliknij Convert to MotionLayout (Konwertuj na MotionLayout), jak pokazano poniżej.
Po przekonwertowaniu przez Android Studio elementu ConstraintLayout na MotionLayout do katalogu zawierającego plik XML zostanie dodany plik MotionScene (.xml
z rozszerzeniem _scene
dołączonym do nazwy pliku układu).
Element MotionLayout
staje się układem głównym i pojawia się w interfejsie Edytora ruchu. Układ zawiera już punkt początkowy ConstraintSet
, punkt końcowy ConstraintSet
i przejście od punktu początkowego do punktu końcowego.
Za pomocą grafiki przeglądowej możesz wybrać ConstraintSet
lubTransition
oraz komponenty w panelu wyboru.
Następnie możesz edytować ograniczenia i atrybuty początku lub końca w ConstraintSet
taki sam sposób, jak w przypadku ConstraintLayout
.
Jeśli chcesz dodać do wykresu więcej elementów, możesz użyć ikon tworzenia, aby szybko dodać gesty ConstraintSet
, Transition
lub OnClick
/OnSwipe
.
Aby dodać klatkę kluczową, najpierw kliknij strzałkę Przejście:
Następnie w panelu osi czasu Przejście kliknij prawy górny róg i wybierz KeyPosition:
Otworzy się okno, w którym możesz ustawić atrybuty klatki kluczowej.
Możesz też dodać do przejścia obsługę zdarzeń OnClick
i OnSwipe
w panelu atrybutów.
Otworzy się okno, w którym możesz ustawić atrybuty kliknięcia, takie jak komponenty docelowe i kierunek przeciągania.
Edytor ruchu umożliwia wyświetlanie podglądu animacji na powierzchni projektu. Gdy wybierzesz animację, kliknij Odtwórz
nad osią czasu, aby wyświetlić podgląd animacji.