Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Deep dive into MotionLayout

2 622 vues

Publié le

Talk at DroidKaigi 2019 about MotionLayout

Abstract:
MotionLayout is a new ViewGroup focusing on animation, which is provided with the ConstraintLayout 2.0 library.
We provided this ViewGroup to allow developers to create complex animations in a declarative way, which existing Android animation framework, such as Layout Transition using TransitionManager, CoordinatorLayout or ObjectAnimator, didn't cover.
In this talk we will going to cover the topics from the getting started and how MotionLayout differs from the existing animations framework to the deep dive into how the MotionLayout works.

Following topics are going to be included:
- Getting started
- What is MotionLayout
- Highlights of the key usages
- What is the difference with the ways of animation Android framework provides
- Integration with the layout editor
- Where to use MotionLayout
- Real app examples
- Replacing existing animations in a declarative way
- Integration with other key Jetpack components
- How MotionLayout works internally
- Math behind the scenes
- Future plans

Publié dans : Logiciels
  • Soyez le premier à commenter

Deep dive into MotionLayout

  1. 1. Deep dive into MotionLayout John Hoford @johnhoford Nicolas Roard @camaelon Takeshi Hagikura @thagikura
  2. 2. ConstraintLayout 2.0
  3. 3. DroidKaigi 2019 ConstraintLayout 2.0 • Helpers, Virtual Layouts, MotionLayout • Announced at Google IO’18 • Built upon ConstraintLayout 1.1 • currently : alpha 3 • alpha 4 in a few weeks (?)
  4. 4. ConstraintSet Encapsulate all the rules for a layout Apply ConstraintSet to an existing layout Switch between multiple ConstraintSets Basic animation capabilities using TransitionManager
  5. 5. Droidkaigi 2019 Documentation • Medium Articles: • Introduction to MotionLayout part I http://bit.ly/2O4AmIz • Introduction to MotionLayout part II http://bit.ly/2uPuWbw • Introduction to MotionLayout part III http://bit.ly/2zRjCSj • Introduction to MotionLayout part IV http://bit.ly/2QqfJaF • GitHub: • https://github.com/googlesamples/android-ConstraintLayoutExamples
  6. 6. Motion Layout Basic Example
  7. 7. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motionLayout" app:layoutDescription=“@xml/scene" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height="64dp"/> </android.support.constraint.motion.MotionLayout>
  8. 8. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motionLayout" app:layoutDescription=“@xml/scene" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height="64dp"/> </android.support.constraint.motion.MotionLayout>
  9. 9. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" 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" />
  10. 10. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" 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" />
  11. 11. motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" 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" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp"
  12. 12. android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
  13. 13. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motionLayout" app:layoutDescription=“@xml/scene" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height="64dp"/> </android.support.constraint.motion.MotionLayout>
  14. 14. android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height=“64dp"/> </android.support.constraint.motion.MotionLayout>
  15. 15. android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height=“64dp"/> </android.support.constraint.motion.MotionLayout> <Button android:id=“@+id/run" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginEnd="8dp" android:text="Run" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" />
  16. 16. class BasicTransitionActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.motion) run.setOnClickListener { motionLayout.transitionToEnd() } } }
  17. 17. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" 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" />
  18. 18. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent"
  19. 19. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" <OnClick motion:target=“@id/run"/>
  20. 20. xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp"
  21. 21. xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" />
  22. 22. Motion Layout Components
  23. 23. MotionLayout MotionScene
  24. 24. layout/motion.xml MotionLayout View Helpers View Helpers
  25. 25. layout/motion.xml MotionLayout View Helpers View Helpers layout_description=“@xml/scene
  26. 26. xml/scene.xml MotionScene layout/motion.xml MotionLayout View Helpers View Helpers layout_description=“@xml/scene
  27. 27. xml/scene.xml MotionScene ConstraintSet ConstraintSet layout/motion.xml MotionLayout View Helpers View ConstraintView Helpers View Constraint layout_description=“@xml/scene
  28. 28. ConstraintSets
  29. 29. ConstraintSet ★ Encapsulate all the rules for a layout ★ Switch between multiple ConstraintSets
  30. 30. xml/ motion_scene.xml MotionScene ConstraintSet ConstraintSet View Constraint
  31. 31. xml/ motion_scene.xml MotionScene ConstraintSet ConstraintSet View Constraint <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" 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> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> </Constraint> </ConstraintSet> </MotionScene>
  32. 32. xml/ motion_scene.xml MotionScene ConstraintSet ConstraintSet View Constraint <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" 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> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> </Constraint> </ConstraintSet> </MotionScene>
  33. 33. xml/ motion_scene.xml MotionScene ConstraintSet ConstraintSet View Constraint <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" 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> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> </Constraint> </ConstraintSet> </MotionScene>
  34. 34. Interpolated Attributes • Position, Dimensions • Visibility & Alpha • Translation, Rotation, Scale, Elevation • Custom attributes
  35. 35. Custom Attributes • Extension to ConstraintSet • Define values for any attribute • Specify the type • Specify the setter name string color integer float dimension boolean
  36. 36. xml/ motion_scene.xml MotionScene ConstraintSet ConstraintSet View Constraint <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" 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"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet> </MotionScene>
  37. 37. <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" 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"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet> </MotionScene>
  38. 38. xml/scene.xml MotionScene ConstraintSet ConstraintSet layout/motion.xml MotionLayout View Helpers View ConstraintView Helpers View Constraint layout_description=“@xml/scene
  39. 39. xml/scene.xml MotionScene ConstraintSet ConstraintSet layout/motion.xml MotionLayout View Helpers View Constraint Transition Transition View Helpers View Constraint layout_description=“@xml/scene
  40. 40. Transitions
  41. 41. Transition Start End
  42. 42. xml/ motion_scene.xml MotionScene Transition Transition <MotionScene> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> <OnSwipe motion:touchAnchorId="@+id/top_image_container" motion:touchAnchorSide="bottom" motion:dragDirection="dragUp" /> </Transition> </MotionScene>
  43. 43. xml/ motion_scene.xml MotionScene Transition Transition <MotionScene> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> <OnSwipe motion:touchAnchorId="@+id/top_image_container" motion:touchAnchorSide="bottom" motion:dragDirection="dragUp" /> </Transition> </MotionScene>
  44. 44. xml/ motion_scene.xml MotionScene Transition Transition <MotionScene> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> <OnSwipe motion:touchAnchorId="@+id/top_image_container" motion:touchAnchorSide="bottom" motion:dragDirection="dragUp" /> </Transition> </MotionScene> Or OnClick
  45. 45. xml/scene.xml MotionScene ConstraintSet ConstraintSet layout/motion.xml MotionLayout View Helpers View Constraint Transition Transition View Helpers View Constraint layout_description=“@xml/scene
  46. 46. xml/scene.xml MotionScene ConstraintSet ConstraintSet layout/motion.xml MotionLayout View Helpers View Constraint Transition Transition KeyFrameSet ViewKeyPosition ViewKeyAttributes ViewKeyCycle View Helpers ViewKeyTimeCycle ViewKeyTrigger View Constraint layout_description=“@xml/scene
  47. 47. KeyFrameSets
  48. 48. KeyFrame
  49. 49. Transition Start End
  50. 50. Transition Start End Keyframe(s)
  51. 51. KeyPosition
  52. 52. <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" 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" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet>
  53. 53. <Transition> <KeyFrameSet> <KeyPosition motion:keyPositionType="pathRelative" motion:percentY="-0.25" motion:framePosition="50" motion:target="@id/button"/> </KeyFrameSet> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" 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> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> </Constraint> </ConstraintSet>
  54. 54. <Transition> <KeyFrameSet> <KeyPosition motion:keyPositionType="pathRelative" motion:percentY="-0.25" motion:framePosition="50" motion:target="@id/button"/> </KeyFrameSet> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" 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> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> </Constraint> </ConstraintSet>
  55. 55. KeyAttributes
  56. 56. <KeyFrameSet> <KeyAttribute android:scaleX="2" android:scaleY="2" android:rotation="-45" motion:framePosition="50" motion:target="@id/button" /> <KeyPosition motion:keyPositionType="pathRelative" motion:percentY="-0.3" motion:framePosition="50" motion:target="@id/button"/> </KeyFrameSet>
  57. 57. <KeyFrameSet> <KeyAttribute android:scaleX="2" android:scaleY="2" android:rotation="-45" motion:framePosition="50" motion:target="@id/button" /> <KeyPosition motion:keyPositionType="pathRelative" motion:percentY="-0.3" motion:framePosition="50" motion:target="@id/button"/> </KeyFrameSet>
  58. 58. KeyAttributes motion:transitionEasing motion:curveFit android:visibility android:alpha android:elevation android:rotation android:rotationX android:rotationY android:scaleX android:scaleY android:translationX android:translationY android:translationZ motion:transitionPathRotate motion:framePosition
  59. 59. KeyAttributes motion:transitionEasing motion:curveFit android:visibility android:alpha android:elevation android:rotation android:rotationX android:rotationY android:scaleX android:scaleY android:translationX android:translationY android:translationZ motion:transitionPathRotate motion:framePosition + Custom Attributes+ Custom Attributes <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#D81B60"/>
  60. 60. Sun example
  61. 61. Sunny
  62. 62. Start & End
  63. 63. Position <KeyPosition motion:framePosition="50" motion:percentY="0.1" motion:percentX="0.5" motion:keyPositionType="parentRelative" motion:target="@id/sun" motion:pathMotionArc="startHorizontal" />
  64. 64. Custom Color <KeyAttribute motion:framePosition="25" motion:target="@+id/background"> <CustomAttribute motion:attributeName="background" motion:customColorDrawableValue="#97C0FF" </KeyAttribute>
  65. 65. Time Cycles <KeyTimeCycle motion:framePosition="50" android:rotation="45" motion:target="@id/sun" motion:wavePeriod=".5" motion:waveShape="sin" />
  66. 66. Cycles
  67. 67. Key Cycles KeyTimeCycles & KeyCycles
  68. 68. Key Cycle interpolation <KeyTimeCycle motion:framePosition="34" android:translationX="0dp" motion:target="@id/button" motion:waveOffset="0dp" motion:wavePeriod="2" motion:waveShape="sin" />
  69. 69. Monotonic splines • Less prone to overshoot • Needs to be differentiable and Integrable Typical Spline Monotonic Spline
  70. 70. KeyCycle •Period - 1/pos across space •Offset - shifts the envelope •Attributes - set amplitude of wave
  71. 71. KeyCycles
  72. 72. KeyCycles Period
  73. 73. KeyCycles Value
  74. 74. KeyCycles offset
  75. 75. KeyCycles waveShape
  76. 76. KeyCycles multiple waves translationX translationY
  77. 77. KeyCycles multiple waves translationX translationY
  78. 78. KeyCycles multiple waves translationX translationY
  79. 79. KeyCycles imagination is the limit translationY rotation translationY rotation
  80. 80. Introducing CycleEditor • Explore the capabilities of KeyCycles • XML shown compatible with alpha3 • Features: • Graph multiple cycles • Simulate keyCycles effect on a button
  81. 81. KeyTimeCycle •Period - 1/s (Hz) •Offset - shifts the envelope •Attributes - set amplitude of wave Same attributes as KeyCycle
  82. 82. KeyTimeCycles Period (Hz) KeyTimeCycle Attribute translationX
  83. 83. KeyTimeCycles (KeyPosition) Change the KeyPosition
  84. 84. KeyTimeCycles (Attribute) Changing value of android:translationX
  85. 85. KeyTimeCycles Changing value of motion:waveOffset waveOffset
  86. 86. KeyTimeCycles Changing value of motion:waveShape
  87. 87. How can you use it?
  88. 88. Coordinator Layout Collapsible Toolbar From GitHub
  89. 89. DrawerLayout From GitHub
  90. 90. ViewPager From GitHub
  91. 91. New features in alpha 3
  92. 92. percentWidth percentHeight New in alpha3
  93. 93. Without percentWidth
  94. 94. With percentWidth
  95. 95. ImageView ImageView
  96. 96. ImageView ImageView
  97. 97. ImageView ImageView Center transition along X and Y
  98. 98. ImageView ImageView
  99. 99. ImageView ImageView Size transition
  100. 100. ImageView ImageView <KeyPosition motion:target="@id/top_image" motion:framePosition="90" motion:percentWidth="0" motion:percentX="0" motion:curveFit="linear" />
  101. 101. ImageView ImageView <KeyPosition motion:target="@id/top_image" motion:framePosition="90" motion:percentWidth="0" motion:percentX="0" motion:curveFit="linear" /> DeltaX is kept 0 until frame position 90
  102. 102. ImageView ImageView <KeyPosition motion:target="@id/top_image" motion:framePosition="90" motion:percentWidth="0" motion:percentX="0" motion:curveFit="linear" />
  103. 103. ImageView ImageView <KeyPosition motion:target="@id/top_image" motion:framePosition="90" motion:percentWidth="0" motion:percentX="0" motion:curveFit="linear" /> Delta width is kept 0 until frame position 90
  104. 104. MultiState New in alpha3
  105. 105. Transition Start End
  106. 106. Transition between states Start State 1State 2 State 3
  107. 107. Current state
  108. 108. Transition1
  109. 109. Transition1
  110. 110. Transition2
  111. 111. Transition3
  112. 112. X Unless define a transition between
  113. 113. KeyTrigger New in alpha3
  114. 114. <KeyFrameSet> <KeyTrigger motion:framePosition="10" motion:onPositiveCross="show" motion:target="@id/fab"/> <KeyTrigger motion:framePosition="20" motion:onNegativeCross="hide" motion:target="@id/fab"/> </KeyFrameSet>
  115. 115. <KeyFrameSet> <KeyTrigger motion:framePosition="10" motion:onPositiveCross="show" motion:target="@id/fab"/> <KeyTrigger motion:framePosition="20" motion:onNegativeCross="hide" motion:target="@id/fab"/> </KeyFrameSet>Calls FloatingActionButton.show() when it passes 10% and above
  116. 116. <KeyFrameSet> <KeyTrigger motion:framePosition="10" motion:onPositiveCross="show" motion:target="@id/fab"/> <KeyTrigger motion:framePosition="20" motion:onNegativeCross="hide" motion:target="@id/fab"/> </KeyFrameSet> Calls FloatingActionButton.hide() when it passes 20% and below
  117. 117. ConstraintLayout 2.0 alpha 4
  118. 118. Alpha 4 • Resize handling • View visibility • Attributes rename • Recyclerview
  119. 119. RecyclerView + MotionLayout
  120. 120. How it works • Handle Gesture • Provide a similar view • Add view to Placeholder in MotionLayout • Recompute bounds • Run transition
  121. 121. Handling new PlaceholderGestureHandler( motionLayout, recyclerView, view, viewType ) gestureHandler.onTouchEvent(event)
  122. 122. Basic start to end motion
  123. 123. Add size delay <KeyPosition motion:framePosition=“40” motion:percentX=“0” motion:percentWidth=“0” motion:percentHeight=“0” motion:target=“@id/rvItem” />
  124. 124. Add tilt <KeyAttribute motion:framePosition=“60” motion:rotationX=“-20” motion:target=“@id/rvItem” />
  125. 125. Wrap up
  126. 126. Droidkaigi 2019 Documentation • Medium Articles: • Introduction to MotionLayout part I http://bit.ly/2O4AmIz • Introduction to MotionLayout part II http://bit.ly/2uPuWbw • Introduction to MotionLayout part III http://bit.ly/2zRjCSj • Introduction to MotionLayout part IV http://bit.ly/2QqfJaF • GitHub: • https://github.com/googlesamples/android-ConstraintLayoutExamples
  127. 127. Droidkaigi 2019 Give us feedback! • Issue tracker: • http://issuetracker.google.com • ConstraintLayout component • Twitter • Nicolas Roard - @camaelon • John Hoford - @johnhoford • Takeshi Hagikura - @thagikura
  128. 128. Thanks! John Hoford @johnhoford Nicolas Roard @camaelon Takeshi Hagikura @thagikura

×