Exploring MotionLayout

Talk exploring MotionLayout more in-depth from Chicago Roboto 2019.

Transcript

3. fun setTransitions() { // Create a new TransitionSet and inflate a transition from the resources val inSet = TransitionSet() val inflater = TransitionInflater.from(this) val transition = inflater .inflateTransition(R.transition.arc) // Add the inflated transition to the set and set duration and interpolator inSet.apply { addTransition(transition) duration = 380 // The shared element should not move in linear motion interpolator = AccelerateDecelerateInterpolator() // Set a listener to create a circular reveal when the transition has ended setListener { onTransitionEnd { reveal() } } } val outSet = TransitionSet() .apply { addTransition(transition) duration = 380 interpolator = AccelerateDecelerateInterpolator() startDelay = 200 } // Set the shared element transitions of the activity window.sharedElementEnterTransition = inSet window.sharedElementExitTransition = outSet window.sharedElementReturnTransition = outSet } fun reveal() { collapsingToolbarBackground.setBackgroundColor(Color.CYAN) val center = roundedImage.getCenter() // create the animator for this view (the start radius is zero) val anim = ViewAnimationUtils.createCircularReveal(collapsingToolbarBackground, center.first.toInt(), center.second.toInt(), 0f, collapsingToolbarBackground.width.toFloat()) .apply { duration = 400 } // make the view visible and start the animation collapsingToolbarBackground.visibility = View.VISIBLE anim.start() } fun hideView() { val center = roundedImage.getCenter() // create the animator for this view (the end radius is zero) ViewAnimationUtils.createCircularReveal(collapsingToolbarBackground, center.first.toInt(), center.second.toInt(), collapsingToolbarBackground.width.toFloat(), 0f) .apply { duration = 400 addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator?) { super.onAnimationEnd(animation) collapsingToolbarBackground.visibility = View.INVISIBLE } }) start() } }
6. minSDK = 18
9. Announced at I/O Alphas… Alpha 05
11. class MotionLayout: ConstraintLayout
13. https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d MotionScene ConstraintSet Constraint Transition OnClick OnSwipe KeyFrames & More MotionLayout Views
14. https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d MotionScene ConstraintSet Constraint //Describes the Constraints of a view
15. <ConstraintSet android:id="@+id/constraintset_start"> <Constraint android:id="@+id/animatedView"> <Layout android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" android:background="@color/colorPrimary" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" motion:layout_constraintVertical_bias="0.8" /> </Constraint> </ConstraintSet>
16. <ConstraintSet android:id="@+id/constraintset_start"> <Constraint android:id="@+id/animatedView"> <Layout android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" android:background="@color/colorPrimary" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" motion:layout_constraintVertical_bias="0.8" /> </Constraint> </ConstraintSet>
17. <ConstraintSet android:id="@+id/constraintset_start"> <Constraint android:id="@+id/animatedView"> <Layout 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"/> </Constraint> </ConstraintSet>
18. https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d MotionScene ConstraintSet Constraint //Describes the Constraints of a view Transition OnClick OnSwipe KeyFrames & More
19. https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d MotionScene ConstraintSet Constraint Transition OnClick OnSwipe KeyFrames & More MotionLayout Views
20. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/home_scene"> ... </androidx.constraintlayout.motion.widget.MotionLayout> activity_home.xml
21. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/home_scene"> ... </androidx.constraintlayout.motion.widget.MotionLayout> activity_home.xml
22. <MotionScene> <Transition motion:constraintSetStart="@layout/constraints_start" motion:constraintSetEnd="@layout/constraints_end" motion:duration="1000">> </Transition> </MotionScene> home_scene.xml
23. <MotionScene> <Transition motion:constraintSetStart="@layout/constraints_start" motion:constraintSetEnd="@layout/constraints_end" motion:duration="1000"> </Transition> </MotionScene> home_scene.xml
24. <MotionScene> <Transition motion:constraintSetStart="@layout/constraints_start" motion:constraintSetEnd="@layout/constraints_end" motion:duration="1000"> </Transition> <!-- Or you could have the ConstraintSets here --> </MotionScene> home_scene.xml
25. OnClick OnSwipe
26. <MotionScene> <Transition motion:constraintSetStart="@layout/constraints_start" motion:constraintSetEnd="@layout/constraints_end" motion:duration="1000"> <OnSwipe motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> </MotionScene> home_scene.xml
27. ⏳
30. motionLayout.setDebugMode( MotionLayout.DEBUG_SHOW_PATH )
32. motionLayout.setDebugMode( MotionLayout.DEBUG_SHOW_PROGRESS )
39. motion:framePosition
40. motion:framePosition
41. framePosition = 50
42. motion:motionTarget
43. motionTarget
44. motion:curveFit spline
45. motion:transitionEasing linear
47. keyPositionType
48. parentRelative
49. deltaRelative
50. pathRelative
51. KeyPosition KeyAttribute KeyCycle
52. KeyPosition
53. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:keyPositionType="pathRelative" motion:percentY="-0.3" motion:framePosition="50" motion:target="@id/button"/> </KeyFrameSet> </Transition> </MotionScene>
54. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50" motion:percentY="0.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
55. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50" motion:percentY="0.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
56. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50" motion:percentY="1.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
57. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50" motion:percentY="1.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
58. framePosition = 50
59. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50" motion:percentY="1.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
60. y *= 1.25
61. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50" motion:percentY="0.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
62. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50" motion:percentY="0.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
63. KeyAttribute
64. <Transition> <ConstraintSet /> <KeyFrameSet> <KeyAttribute android:scaleX="2" android:scaleY="2" android:rotation="-45" motion:framePosition="50" motion:motionTarget="@id/button" /> </KeyFrameSet> </Transition>
65. <Transition> <ConstraintSet /> <KeyFrameSet> <KeyAttribute android:scaleX="2" android:scaleY="2" android:rotation="-45" motion:framePosition="50" motion:motionTarget="@id/button" /> </KeyFrameSet> </Transition>
67. KeyCycle
72. 0 5 10 15 20 25 0 5 10 15 20 25 30 35 40 45 SIZE
73. <MotionScene <Transition> <ConstraintSet /> <KeyFrameSet> </KeyFrameSet> </Transition> </MotionScene>
74. <MotionScene <Transition> <ConstraintSet /> <KeyFrameSet> </KeyFrameSet> </Transition> </MotionScene>
75. <MotionScene <Transition> <ConstraintSet /> <KeyFrameSet> <KeyCycle motion:framePosition="100" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" android:translationY="50dp"/> </KeyFrameSet> </Transition> </MotionScene>
76. <MotionScene <Transition> <ConstraintSet /> <KeyFrameSet> <KeyCycle motion:framePosition="50" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" android:translationY="50dp"/> </KeyFrameSet> </Transition> </MotionScene>
77. <MotionScene <Transition> <ConstraintSet /> <KeyFrameSet> <KeyCycle motion:framePosition="50" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" android:translationY="50dp"/> </KeyFrameSet> </Transition> </MotionScene>
78. <MotionScene <Transition> <ConstraintSet /> <KeyFrameSet> <KeyCycle motion:framePosition="50" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" android:translationY="50dp"/> </KeyFrameSet> </Transition> </MotionScene>
79. <KeyFrameSet> <KeyCycle android:translationY="50dp" motion:framePosition="50" motion:motionTarget="@id/button" motion:waveOffset="3" motion:wavePeriod="1" motion:waveShape="sin" /> <KeyCycle android:translationY="90dp" motion:framePosition="100" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" /> </KeyFrameSet>
80. <KeyFrameSet> <KeyCycle android:translationY="50dp" motion:framePosition="50" motion:motionTarget="@id/button" motion:waveOffset="3" motion:wavePeriod="1" motion:waveShape="sin" /> <KeyCycle android:translationY="90dp" motion:framePosition="100" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" /> </KeyFrameSet>
81. <KeyFrameSet> <KeyCycle android:translationY="50dp" motion:framePosition="50" motion:motionTarget="@id/button" motion:waveOffset="3" motion:wavePeriod="1" motion:waveShape="sin" /> <KeyCycle android:translationY="90dp" motion:framePosition="100" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" /> </KeyFrameSet>
83. framePosition=50 0 - 50 50 - 100
84. <MotionScene <Transition> <ConstraintSet /> <KeyFrameSet> <KeyCycle motion:framePosition="50" motion:motionTarget="@id/button„ motion:wavePeriod="3" motion:waveOffset="1" motion:waveShape="sin" android:translationY="50dp"/> </KeyFrameSet> </Transition> </MotionScene>
85. wavePeriod
88. waveOffset
90. waveShape
91. − − − − − − − waveShape
100. KeyTimeCycle
101. <KeyFrameSet> <KeyTimeCycle android:translationY="50dp" android:rotation="180" motion:framePosition="50" motion:motionTarget="@id/button" motion:waveOffset="3" motion:wavePeriod="1" motion:waveShape="sin" /> <KeyTimeCycle android:translationY="90dp" motion:framePosition="100" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" /> </KeyFrameSet>
110. <ConstraintSet android:id="@+id/start" motion:pathMotionArc=”startVertical”> ... </ConstraintSet>
112. <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000" motion:motionInterpolator="linear" />
116. <View ... motion:layout_constraintTag=“ToolbarItems" />
117. <Transition> <KeyFrameSet> <KeyPosition motion:motionTarget="ToolbarItems" motion:percentY="1.25" /> </KeyFrameSet> </Transition>
119. <MotionScene> <Transition> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> </MotionScene>
120. <MotionScene> <Transition> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchRegionId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> </MotionScene>
122. <ConstraintSet android:id="@+id/state1"> <Constraint android:id="@id/view1"> <PropertySet motion:visibility=“gone"/> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/state2" motion:deriveConstraintsFrom="@id/state1"> </ConstraintSet>
123. <ConstraintSet android:id="@+id/state1"/> <ConstraintSet android:id="@+id/state2" motion:deriveConstraintsFrom="@id/state1"> </ConstraintSet>