MotionLayout : Animation Magic

Transcript

1. MotionLayout @code_wizard https:/ /github/kioko https:/ /thomaskioko.com Thomas Kioko Android Engineer Constraint Layout 2.0
2. BUT FIRST …
3. AbsoluteLayout FrameLayout RelativeLayout CoordinatedLayout … LinearLayout Take me Back
4. Other Layouts R.I.P
5. Constraint 1.1
6. Chains Circular Constraints Helpers Barries ConstraintLayout 1.1
7. ConstraintLayout 2.0
8. There’s more …
9. ConstraintLayout 2.0
10. Will I be able to control robots? 2.0… Why?
11. Will it take me to the moon? 2.0… Why?
12. “ “ “ “ MotionLayout
13. Bring your UI back from the dead Animations
14. ConstraintSet Constraint MotionScene Events Transition KeyFrames Key Concepts
15. Let’s Cook Some Code
16. Gradle Dependency dependencies{ … implementation 'androidx.constraintlayout:constraintlayout: 2.0.0-alpha2' }
17. - Improvments on Support Library - Backward compatibility. Btw … AndroidX released with JetPack
18. The UI
19. A few minutes later…. …..
20. Movie UI -1- Define The Layouts
21. activity_movie_detail.xml <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/motion_layout_movie_detail” … > … </androidx.constraintlayout.widget.ConstraintLayout >
22. Let’s dance -2- Switch to MotionLayout
23. activity_movie_detail.xml <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motion_layout_movie_detail” … > … </androidx.constraintlayout.motion.widget.MotionLayout>
24. xml/ scene_movie.xml <MotionScene … > </MotionScene> -3- Define TheScene
25. - Start: constraintSetStart - End: constraintSetEnd ConstraintSets 2 States Types
26. xml/ scene_movie.xml <MotionScene … > <ConstraintSet android:id=“@+id/start”> … </ConstraintSet> <ConstraintSet android:id=“@+id/end”> … </ConstraintSet> </MotionScene> -4- Add ConstraintSet
27. xml/ scene_movie.xml <MotionScene … > <Transition app:constraintSetEnd="@id/end" app:constraintSetStart="@id/start”> </Transition> ….. </MotionScene> -5- Add Transition
28. Reusing Constraints .Have the same Id as the widgets. . Rewrite Constraints Constraint
29. xml/ scene_movie.xml <MotionScene … > <Transition … </Transition> <Constraint app:constraintSetStart="@id/start”> <Constraint android:id="@+id/iv_backdrop" android:layout_width="wrap_content" android:layout_height=“280dp” app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </Constraint> </MotionScene> -6- Add Constraint Start
30. xml/ scene_movie.xml <MotionScene … > <Transition … </Transition> <Constraint app:constraintSetStart="@id/end”> <Constraint android:id="@+id/iv_backdrop" android:layout_width="wrap_content" android:layout_height=“30dp” app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </Constraint> </MotionScene> -7- Add Constraint End
31. xml/ scene_movie.xml -8- Add Other Constraints
32. .onClick The Trigger . onSwipe Transition Events
33. xml/scene_movie.xml <MotionScene … > <Tranision> <OnSwipe app:dragDirection="dragUp" app:touchAnchorId="@id/recycler_view_episodes" app:touchAnchorSide=“top” /> </Transition> </MotionScene> -9- Add Event
34. Prepare for Landing
35. Let’s up MotionScene & the Layout -10- Last Line (I Think ..)
36. layout/movie_detail_activity.xml -11- Add Event <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motion_layout_movie_detail” app:layoutDescription="@xml/scene_movie_detail” … > … </androidx.constraintlayout.motion.widget.MotionLayout>
37. …
39. The End
40. CustomAttributes . Position KeyFrames . KeyTimeCycle . What Next? MotionLayout Editor .
41. @code_wizard The End. https://github.com/kioko https://thomaskioko.com