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

Przykłady Motion Layout

Ten dokument zawiera przykłady użycia narzędzia MotionLayout. Każdy przykład obejmuje film przedstawiający ruch oraz odpowiedni kod sceny i układów ruchu.

Ruch podstawowy

Ten przykład zawiera pojedynczy widok, który możesz dotknąć i przeciągnąć w celu przesunięcia w poziomie.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 1. Przeciąganie widoku.

Atrybut niestandardowy – backgroundColor

Ten przykład jest podobny do przykładu Ruch podstawowy. Oprócz podstawowego ruchu kolor tła widoku zmienia się wraz z jego przesuwaniem.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 2. Przeciąganie widoku w czasie, gdy zmienia się kolor jego tła.

ImageFilterView – przejście obrazu

Ten przykład pokazuje, jak zmienić wartość nasycenia elementu ImageFilterView.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 3. Przeciąganie obrazu, by zmienić jego nasycenie.

Pozycja klatki kluczowej

W tym przykładzie użyto elementu <KeyFrameSet>, aby zmienić położenie na osi Y widoku podczas ruchu.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 4. Przeciąganie widoku i zmiana jego pozycji na osi Y.

Interpolacja klatek kluczowych

Ten przykład korzysta z przykładu Pozycja klatki kluczowej przez dodanie rotacji i skalowania do przejścia w widoku.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 5. Przeciąganie widoku i zmienianie jego pozycji na osi Y, obrotu oraz skali.

Cykl klatki kluczowej

W tym przykładzie dodano elementy <KeyCycle>, by dodać do widoku ruch fali.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 6. Przeciąganie widoku falami przy jednoczesnym zmianie jego koloru.

Układ koordynatora (1/2)

Ten przykład dodaje element MotionLayout do istniejącego elementu AppBarLayout, aby dodać ruch do paska aplikacji. Przykład dokładnie opisano we wprowadzeniu do Motion Layout (część III).

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 7. przewijanie treści podczas rozwijania paska aplikacji;

Układ koordynatora (2/2)

Ten przykład dodaje element MotionLayout do istniejącego elementu AppBarLayout, aby dodać ruch do paska aplikacji.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 8. Przewijanie treści podczas rozwijania paska aplikacji i przesuwania się tekstu w pasku aplikacji i z niego.

Układ szuflady (1/2)

Ten przykład pokazuje, jak dodać ruch do elementu DrawerLayout. Ten przykład opisano szczegółowo we wprowadzeniu do Motion Layout (część III).

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 9. Rozwiń „Układ szuflady”.

Układ szuflady (2/2)

Ten przykład pokazuje, jak dodać ruch do elementu DrawerLayout.

Wyświetl plik XML układu.
Wyświetl plik XML MotionScene dla głównej treści.
Wyświetl plik XML menu MotionScene.

Rysunek 10. Rozwijamy „Układ rysunku” z animowanym tekstem menu.

Panel boczny

Ten przykład pokazuje, jak wyświetlić panel boczny podczas przeciągania w prawo głównego obszaru treści.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 11. Wyświetlam panel boczny przez przeciągnięcie głównej zawartości.

Paralaksa

Ten przykład pokazuje tło paralaksy, w którym różne warstwy tła poruszają się z różną prędkością.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 12. Efekt paralaksy w obrazie nagłówka.

ViewPager

Ten przykład pokazuje, jak dodać ruch podczas przesuwania między kartami ViewPager. Przykład dokładnie opisano we wprowadzeniu do Motion Layout (część III).

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 13. Efekt paralaksy w obrazie nagłówka podczas przesuwania obiektu „ViewPager”.

ViewPager – Lottie

Ten przykład pokazuje, jak dodać ruch podczas przesuwania między kartami ViewPager.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 14. Obraz pokazujący efekt Lottie w obrazie nagłówka podczas przesuwania „ViewPager”.

Złożone ruchy (1/3)

W tym przykładzie połączono elementy z poprzednich przykładów, aby zademonstrować złożony ruch.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 15. Łączenie efektów w celu uzyskania złożonego ruchu.

Złożone ruchy (2/3)

W tym przykładzie połączono elementy z poprzednich przykładów, aby zademonstrować złożony ruch.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 16. Łączenie efektów w celu uzyskania złożonego ruchu.

Złożone ruchy (3/3)

W tym przykładzie połączono elementy z poprzednich przykładów, aby zademonstrować złożony ruch.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 17. Łączenie efektów w celu uzyskania złożonego ruchu.

Przejście fragmentu (1/2)

Ten przykład pokazuje, jak używać elementu MotionLayout do przechodzenia między fragmentami.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 18. Przejście fragmentów.

Przejście fragmentu (2/2)

Ten przykład pokazuje, jak używać elementu MotionLayout do przechodzenia między fragmentami.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 19. Przejście fragmentów.

Ruch jak w YouTube

Ten przykład pokazuje, jak przełączać się między widokiem kompaktowym a pełnoekranowym z dodatkowymi treściami.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 20. Przenoszenie fragmentów przebiega podobnie jak w YouTube.

Wyzwalacz

Ten przykład pokazuje, jak wyświetlić i ukryć pływający przycisk polecenia, gdy przejście przekracza próg postępu.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 21. Wyświetlaj i ukrywaj pływający przycisk polecenia.

Wielostanowe

Ten przykład pokazuje, jak używać stanu do określania, który ruch zastosować.

Wyświetl plik XML układu.
Wyświetl MotionScene (XML).

Rysunek 22. Różne ruchy w zależności od stanu.