Kliknij i wspomóż mnie :)

Wstęp

MotionLayout to świetne narzędzie dostępne dla programistów Androida w paczce ConstraintLayout 2.0.0. Pisałem o nim m.in. na stronie Akademia Androida i u iteo.

Animowany Bottom Sheet na Akademi Androida:

Akademia Androida

Animowany landing page aplikacji:

iteo - MotionLayout

Temat

O MotionLayout pisałem już bardzo dużo o podstawach i o bardzo zaawansowanych rzeczach.

Można znaleźć także mnóstwo świetnych artykułów i poradników na ten temat. W moim uznaniu dotychczas jeden z najbardziej wyczerpujących i dokładnych wpisów to ten:

Complex UI/Animations on Android — featuring MotionLayout

Ja zamierzam teraz wyciągnąć 5 najważniejszych informacji jakie każdy powinien mieć w głowie by pracować z MotionLayout łatwiej i szybciej.

1 - Wydzielaj kod sceny do <Layout>, <PropertySet>, <Transform>, ...

Jest to pierwsza rada i najważniejsza. Nauczyłem się tego na samym końcu jako efekt poszukiwań redukowania ilości kodu.

Niestety pracując z MotionLayout dużo kodu xml trzeba kopiować. Można to znacznie jednak zredukować dzieląc atrybuty na bloki.

Najważniejszym atrybutem jest:

• deriveConstraintsFrom="..."

Pozwala on na skopiowanie wszystkich Constraint z już istniejącego ConstraintSet.

Kod z wykorzystaniem powyższych bloków może wyglądać tak:

2 - Używaj flagi app:moitonProgress i app:motionDebug

Ta rada jest krótka i konkretna. Za każdym razem kiedy budujesz scenę to w edytorze widoku dołącz ją, ustaw progress i debug.

• app:motionProgress="0"

Sterując wartościami w zakresie 0 - 1 możemy podejrzeć stan sceny w danym momencie animacji bez budowania całego projektu i uruchamiania aplikacji.

• app:motionDebug="SHOW_ALL"

Ta flaga z kolei pokazuje na ekranie wszystkie najważniejsze informacje: o stanie, danym przejściu, wartości progress i fps.

Znacznie ułatwia kontrolowanie co dzieje się w tym momencie z naszą animacją w czasie działania aplikacji.

Na koniec warto także narysować scieżki po jakich poruszają się elementy w scenie

• app:showPaths="true"

3 - Ustaw najważniejsze Transition na samej górze sceny

Tak na prawdę sam tytuł mówi większość. W scenie MotionLayout można mieć ustawione kilka przejść czyli bloków Transition

Tym jednak, który będzie zaaplikowany w edytorze widoku i dodany domyślnie do całej sceny jest ten pierwszy. Niech kod pokaże:

4 - Monitoruj logi

Ta wskazówka może wydawać się zbyt oczywista. Jednak mało kiedy patrzymy w logcat jeżeli chodzi o widoki.

Okazuje się, że twórcy MotionLayout zatroszczyli się również o ten aspekt i kiedy nasza scena nie działa to pierwsze co to powinniśmy sprawdzić czy tam nie wyrzuca jakichś błędów lub ostrzeżeń.

Przykładowe błędy i informacje mogą wyglądać tak:

5 - Używaj pathMotionArc

Do zakrzywiania ścieżki ruchu MotionLayout udostępnia takie narzędzie jak <KeyFrameSet>.

Według mnie powinno być ono używane wtedy kiedy chcemy określić ścieżkę, której nie da się w prosty sposób wyrazić funkcją.

Do prostych zakrzywień / wykrzywień drogi ruchu warto korzystać z

• motion:pathMotionArc=”startHorizontal”

Zastosowanie tego parametru do Constraint. Wygładzi przejście na wzór funkcji wykładniczej.

Wszyscy mówią o MotionLayout!

Chyba nie trzeba mówić jak długo programiści Androida czekali na takie narzędzie, które pozwoli w pełni zrealizować ich kreatywność i chęć tworzenia prawdziwie animowanych widoków.

Poniżej zamieszczam jeszcze klika źródeł o których myślę, że wnoszą bardzo dużo do tego tematu:

Advanced & Practical MotionLayout

Swipe right on Motion Layout

What's New in ConstraintLayout (Google I/O'19)

Dziękuję Ci za przeczytanie tego materiału 😀 Jeżeli spodobało Ci się to o czym piszę, możesz sprawdzić więcej materiałów na blogu lub udostępnić znajomym. Będzie mi bardzo miło 😊