MotionLayout 무릎까지 담궈보기

DroidKnights 2019에서 발표한 "MotionLayout 무릎까지 담궈보기" 자료 입니다.

Transcript

1. .PUJPO-BZPVU
   ޖܺө૑
   ׸Ӏࠁӝ 4QFBLFS ֢അࢳ
2. Pluu Dev. Index. 01 Intro 02 03 04 What’s MotionLayout MotionLayout Components MotionLayout Alpha 3 05 Future 06 Summary
3. Pluu Dev. Intro.
4. Pluu Dev. • MotionLayout җ ݅թ • MotionLayout ਵ۽ গפݫ੉࣌ ੘ࢿೞӝ • MotionLayout੄ ӝ؀х Intro. ߊ಴ܳ ా೧ࢲ ৈ۞࠙੉ ঳ਸ ࣻ ੓ח Ѫ
5. Pluu Dev. • ConstraintLayout ӝࠄ ࣗѐ • ConstraintLayout 2.0 ࣗѐ Intro. ׮ܖ૑ ঋח ࠗ࠙
6. Pluu Dev. द੘ೞӝ੹ী. MotionLayout
7. Pluu Dev. द੘ೞӝ੹ী. motionlayout motionlayout medium motionlayout onclick motionlayout sample motionlayout example motionlayout interpolator motionlayout customattribute motionlayout textsize MotionLayout
8. Pluu Dev. What’s MotionLayout.
9. Pluu Dev. MotionLayout. • ConstraintLayout 2.0 ࠗఠ ୶о • Google I/O 2018ীࢲ ࣗѐ • ConstraintLayout੄ ࢲ࠳ ௿ېझ • গפݫ੉࣌ী ઺੼ਸ ك ࢜۽਍ ViewGroup • XMLਸ ࢎਊೞৈ ࢶ঱੸ ߑध ੿੄ (MotionScenes) • ICS (API 14) ഐജ API 18+ (JellyBean MR2) Pluu Dev.
10. Pluu Dev. MotionLayout. Release Note Announce Google I/O ‘18 Alpha 01 June 26 2018 Alpha 02 August 9 2018 Alpha 03 December 21 2018
11. Pluu Dev. MotionLayout. Release Note Announce Google I/O ‘18 Alpha 01 June 26 2018 Alpha 02 August 9 2018 Alpha 03 December 21 2018 Alpha 04 a few weeks
12. Pluu Dev. Basic of MotionLayout.
13. Pluu Dev. Basic Example.
14. Pluu Dev. Basic Example Layout. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_scene"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" /> </android.support.constraint.motion.MotionLayout>
15. Pluu Dev. Basic Example Layout. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_scene"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" /> </android.support.constraint.motion.MotionLayout>
16. Pluu Dev. Basic Example MotionScene. <?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:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint
17. Pluu Dev. xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" Basic Example Pluu Dev. MotionScene. Pluu Dev.
18. Pluu Dev. motion:touchAnchorSide="right" /> </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"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> Basic Example 1 Pluu Dev. 2 MotionScene.
19. Pluu Dev. motion:touchAnchorSide="right" /> </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"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> Basic Example 1 Pluu Dev. 2 MotionScene.
20. Pluu Dev. </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> Basic Example Pluu Dev. 1 2 MotionScene.
21. Pluu Dev. </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> Basic Example Pluu Dev. 1 2 MotionScene.
22. Pluu Dev. Basic Example Layout. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_scene"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" /> </android.support.constraint.motion.MotionLayout>
23. Pluu Dev. Basic Example Layout + Click. <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" /> <Button android:id="@+id/run" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" android:text="Run" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </android.support.constraint.motion.MotionLayout>
24. Pluu Dev. Basic Example Layout + Click. class DemoActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.motion) run.setOnClickListener { motionLayout.transitionToEnd() } } }
25. Pluu Dev. Basic Example Layout + Click.
26. Pluu Dev. Basic Example MotionScene + Click. xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" Pluu Dev.
27. Pluu Dev. Basic Example MotionScene + Click. xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> <OnClick motion:target="@id/run" /> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint Pluu Dev.
28. Pluu Dev. Basic Example MotionScene + Click.
29. Pluu Dev. MotionLayout Components.
30. Pluu Dev. MotionLayout Structure. MotionLayout <View> <View> <View> <View> <View> <Helper> MotionScene StateSet State Variant ConstraintSet Constraint CustomAttribute Transition OnClick OnSwipe KeyFrameSet KeyPosition KeyAttributes CustomAttribute KeyCycle CustomAttribute KeyTimeCycle CustomAttribute KeyTrigger layout/motion.xml layout_description ="@xml/scene" xml/scene.xml
31. Pluu Dev. MotionLayout MotionScene. • MotionLayout੄ ӝמ਷ ߹ب੄ XML ౵ੌ (MotionScene)ী ੿੄ • ӝઓ layout ࠁ׮ ਋ࢶ ࣽਤܳ о૗ MotionScene
32. Pluu Dev. MotionLayout ConstraintSet. ۨ੉ইਓ੄ ઁড ઑѤਸ ஭ङച ConstraintSet Constraint CustomAttribute MotionScene
33. Pluu Dev. MotionLayout ConstraintSet. <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"
34. Pluu Dev. <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" MotionLayout ConstraintSet. Pluu Dev.
35. Pluu Dev. 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> MotionLayout ConstraintSet. Pluu Dev.
36. Pluu Dev. ConstraintSets Interpolated Attributes. • Position, Dimensions • Visibility & Alpha • Translation, Rotation, Scale, Elevation • Custom Attributes
37. Pluu Dev. ConstraintSets Custom Attributes. • ConstraintSet ੿ࠁܳ ୊ܻ • ੐੄੄ attributeী ੐੄੄ ч ੸ਊ • Type / Setter ੿੄ string color integer float dimension boolean
38. Pluu Dev. <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet> </MotionScene> ConstraintSets Custom Attributes. Start End
39. Pluu Dev. <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet> </MotionScene> ConstraintSets Custom Attributes. Start End ConstraintSets Custom Attributes.
40. Pluu Dev. MotionLayout Transitions. MotionScene • Scene੄ Stateܳ ੿੄ • constraintSetStart (ConstraintSet/layout) • constraintSetEnd • interpolator • duration • staggered (0f~1f) : ૑ো ੿بܳ ੿੄ Transition
41. Pluu Dev. MotionLayout Transitions. <MotionScene> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" /> </Transition> </MotionScene>
42. Pluu Dev. MotionLayout Transitions. <MotionScene> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" /> </Transition> </MotionScene>
43. Pluu Dev. MotionLayout Transitions. <MotionScene> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" /> </Transition> </MotionScene>
44. Pluu Dev. MotionLayout Transitions. <MotionScene> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" /> </Transition> </MotionScene> MotionScene Transition OnSwipe OnClick
45. Pluu Dev. MotionLayout KeyFrameSets. • ਤ஖ ч ژח ࣘࢿ чী ੸ਊ • ੹ജೞח द੼ਸ ૑੿ • ࠂࣻ ConstraintSetsࠁ׮ оߺ׮ KeyFrameSet KeyPosition KeyAttributes CustomAttribute KeyCycle CustomAttribute KeyTimeCycle CustomAttribute KeyTrigger Transition MotionScene
46. Pluu Dev. MotionLayout KeyFrameSets. Start End
47. Pluu Dev. MotionLayout KeyFrameSets. Start End KeyFrame(s)
48. Pluu Dev. <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button"> <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet> </MotionScene> MotionLayout KeyPosition.
49. Pluu Dev. <MotionScene> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000" motion:interpolator="linear"> <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"> <CustomAttribute MotionLayout KeyPosition.
50. Pluu Dev. <MotionScene> <Transition> <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> </Transition> </MotionScene> MotionLayout KeyAttributes.
51. Pluu Dev. • motion:transitionEasing • motion:curveFit • motion:transitionPathRotate • motion:framePosition MotionLayout KeyAttributes. • android:visibility • android:alpha • android:elevation • android:rotation • android:rotationX • android:rotationY • android:scaleX • android:scaleY • android:translationX • android:translationY • android:translationZ
52. Pluu Dev. + Custom Attributes <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#9999FF" /> • customColorValue • customColorDrawableValue • customIntegerValue • customFloatValue • customStringValue • customDimension • customBoolean MotionLayout KeyAttributes.
53. Pluu Dev. MotionScene ConstraintSet Constraint CustomAttribute Transition OnClick OnSwipe KeyFrameSet KeyPosition KeyAttributes CustomAttribute KeyCycle CustomAttribute KeyTimeCycle CustomAttribute KeyTrigger StateSet State Variant OnSwipe dragDirection touchAnchorId touchAnchorSide maxVelocity maxAcceleration moveWhenScrollAtTop CustomAttribute customColorValue customIntegerValue customFloatValue customStringValue customDimension customBoolean attributeName KeyAttribute framePosition target transitionEasing curveFit progress [view properties] Custom Attributes KeyPosition deltaRelative pathRelative parentRelative percentX percentY framePosition target transitionEasing curveFit drawPath sizePercent View KeyCycle framePosition target waveShape wavePeriod waveOffset transitionPathRotate progress [view properties] Custom Attributes
54. Pluu Dev. MotionLayout Alpha 3.
55. Pluu Dev. MotionLayout. Alpha3 दрী ٮۄ
 ਑૒੉ח
 ઱ӝܳ ੿੄ percentWidth / percentHeight ૑ਗ গפݫ੉࣌ ૓೯ ࢚ടী ٮۄ ௒ߔਸ प೯ оמ Image
 Filter
 Button saturation, contr ast, warmth and crossfade. onTransitionStarted onTransitionTrigger Transition
 Listener KeyTime
 Cycle Key
 Position Key
 Trigger
56. Pluu Dev. MotionLayout. Alpha3 ࢜܂ѱ XML ੿੄ ConstraintSet ࣻ੿ೡ ৔৉݅ ੿੄ • <Layout> : Layout ઁড ҙ۲ ࣘࢿ • <PropertySet> : visibility, alpha, progress • <Transform> : scale, translation, rotation, pivot, elevation • <Motion> : easing, arc motion, etc.
57. Pluu Dev. MotionLayout. New XML Format for ConstraintSet <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginTop="100dp" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" android:rotation="45" /> <Constraint android:id="@+id/button"> <Transform motion:rotation="45" /> </Constraint> Before After
58. Pluu Dev. KeyCycle in alpha 3.
59. Pluu Dev. KeyCycle Basic. PathRotate alpha elevation rotation rotationX rotationY scaleX scaleY translationX translationY translationZ progress
60. Pluu Dev. KeyCycles KeyCycle. <KeyCycle motion:framePosition="34" android:translationX="0dp" motion:target="@id/button" motion:waveOffset="0dp" motion:wavePeriod="2" motion:waveShape="sin"> • Period : Wave ઱ӝ • Offset : ࢚؀ ࠁ੿ч • Shape : Wave ౵ഋ ഋక (sin, cos, …)
61. Pluu Dev. Period Value Offset KeyCycle Attribute.
62. Pluu Dev. waveShape multiple KeyCycle Attribute.
63. Pluu Dev. KeyCycle Funny.
64. Pluu Dev. KeyCycle CycleEditor.
65. Pluu Dev. CycleEditor Run. 1. Java Compile 2. Run https://github.com/googlesamples/android-ConstraintLayoutExamples
66. Pluu Dev. percentWidth / percentHeight in alpha 3.
67. Pluu Dev. Youtube Style Blueprint. Start End
68. Pluu Dev. Without percentWidth. <KeyFrameSet> <KeyAttribute android:alpha="0" motion:framePosition="75" motion:target="@id/recyclerview_front" /> <KeyAttribute android:alpha="0.10" motion:framePosition="90" motion:target="@id/image_clear" /> <KeyAttribute android:alpha="0.10" motion:framePosition="90" motion:target="@id/image_play" /> </KeyFrameSet>
69. Pluu Dev.
70. Pluu Dev. Youtube Style ImageView Blueprint. ImageView
71. Pluu Dev. Youtube Style ImageView Blueprint. ImageView Transition X and Y
72. Pluu Dev. Youtube Style ImageView Blueprint. ImageView Add KeyFrame + Percent Width
73. Pluu Dev. <KeyFrameSet> <KeyPosition motion:curveFit="linear" motion:framePosition="90" motion:percentWidth="0" motion:percentX="0" motion:target="@id/top_image" /> <KeyPosition motion:curveFit="linear" motion:framePosition="90" motion:percentWidth="0" motion:target="@id/top_image_container" /> <KeyPosition motion:curveFit="linear" motion:framePosition="90" motion:percentWidth="0" motion:target="@id/recyclerview_container" /> … </KeyFrameSet> With percentWidth.
74. Pluu Dev. <KeyFrameSet> <KeyPosition motion:curveFit="linear" motion:framePosition="90" motion:percentWidth="0" motion:percentX="0" motion:target="@id/top_image" /> <KeyPosition motion:curveFit="linear" motion:framePosition="90" motion:percentWidth="0" motion:target="@id/top_image_container" /> <KeyPosition motion:curveFit="linear" motion:framePosition="90" motion:percentWidth="0" motion:target="@id/recyclerview_container" /> … </KeyFrameSet> With percentWidth. 90% ө૑ ਤ஖ / և੉ܳ ߸҃ਸ ߑ૑
75. Pluu Dev. MultiState in alpha 3.
76. Pluu Dev. Transition. Start End
77. Pluu Dev. Multi Transition. Start State1 State2 State3
78. Pluu Dev. Multiple States Example.
79. Pluu Dev. Multiple States Example. Start
80. Pluu Dev. Multiple States Example. Transition 1
81. Pluu Dev. Multiple States Example. Transition 2
82. Pluu Dev. Multiple States Example. Transition 3
83. Pluu Dev. Multiple States Example. ੿੄غ૑ ঋ਷ Transition਷ ޷ز੘
84. Pluu Dev. KeyTrigger in alpha 3.
85. Pluu Dev. KeyTrigger Example. <KeyFrameSet> <KeyTrigger motion:framePosition="10" motion:onPositiveCross="show" motion:target="@id/fab"/> <KeyTrigger motion:framePosition="20" motion:onNegativeCross="hide" motion:target="@id/fab"/> </KeyFrameSet>
86. Pluu Dev. KeyTrigger Example. <KeyFrameSet> <KeyTrigger motion:framePosition="10" motion:onPositiveCross="show" motion:target="@id/fab"/> <KeyTrigger motion:framePosition="20" motion:onNegativeCross="hide" motion:target="@id/fab"/> </KeyFrameSet> 10ࠁ׮ ழ૕ ҃਋ FloatingActionButton.show() ഐ୹
87. Pluu Dev. KeyTrigger Example. <KeyFrameSet> <KeyTrigger motion:framePosition="10" motion:onPositiveCross="show" motion:target="@id/fab"/> <KeyTrigger motion:framePosition="20" motion:onNegativeCross="hide" motion:target="@id/fab"/> </KeyFrameSet> 20ࠁ׮ ੘ই૕ ҃਋ FloatingActionButton.hide() ഐ୹
88. Pluu Dev. Troubleshooting MotionLayout.
89. Pluu Dev. Troubleshooting MotionScene ੸ਊ ޙઁ. Success Fail
90. Pluu Dev. public class MotionLayout { ... HashMap<View, MotionController> mFrameArrayList = new HashMap(); ... private void setupMotionViews() { if (!this.mSetup) { if (VERSION.SDK_INT < 18 || !this.isInLayout()) { ... int n = this.getChildCount(); this.mFrameArrayList.clear(); int layoutWidth; for(layoutWidth = 0; layoutWidth < n; ++layoutWidth) { View v = this.getChildAt(layoutWidth); Pluu Dev. Troubleshooting Layout Depth.
91. Pluu Dev. Troubleshooting ఫझ౟ ௼ӝ ߸҃. Fail Fail
92. Pluu Dev. 1. Resources ஂٙ 2. അ੤ ఫझ౟ ࢎ੉ૉ৬ ׮ܲ૑ ࠺Ү 3. TextView ղࠗ ೙٘ Null ୊ܻ 4. requestLayout() ഐ୹ 5. invalidate() ഐ୹ Troubleshooting TextView#setTextSize(). https://android.googlesource.com/platform/frameworks/base/+/jb-mr0-release/core/java/android/widget/ TextView.java#2244 1. Resources ஂٙ 2. അ੤ ఫझ౟ ࢎ੉ૉ৬ ׮ܲ૑ ࠺Ү 3. TextView ղࠗ ೙٘ Null ୊ܻ 4. requestLayout() ഐ୹ 5. invalidate() ഐ୹
93. Pluu Dev. Troubleshooting ఫझ౟ ௼ӝ ߸҃ ೧Ѿ. Scale/Pivot ഝਊ autoSizeTextType="uniform"
94. Pluu Dev. CollapsibleToolbar ۨ੉ইਓ јन ޙઁ.
95. Pluu Dev. Troubleshooting CollapsibleToolbar + NestedScrollView. زदী ࢎਊद, Viewо ౓ח(?) അ࢚ ??!! - Progressח 0~1 ࢎ੉۽ ஂٙ
96. Pluu Dev. Troubleshooting ೧Ѿ?! ইצ ೧Ѿ?! . RecyclerView MotionLayout Not Official
97. Pluu Dev. Troubleshooting btnChange.setOnClickListener { textView.text = buildString { for (value in 0..Random.nextInt(10)) { append(value) } } } ۨ੉ইਓ јन ޙઁ.
98. Pluu Dev. Troubleshooting ࡅܲ ۪؊݂ਸ ਤ೧ࢲ View৬ п Viewী ࢸ੿ػ MotionControllerਸ ੐द ੷੢೧ࢲ ࢎਊ ೧Ѿߨ) MotionLayout#setupMotionViews() ೣࣻܳ ഐ୹೧ MotionControllerо ୡӝചغب۾ ୊ܻ Not Official ۨ੉ইਓ јन ޙઁ.
99. Pluu Dev. MotionLayout Flow. Load Motion Scene onTouchEvent() Update Progress Find Transition invalidate() Setup MotionViews Not Official
100. Pluu Dev. MotionLayout setupMotionViews(). Cache Child Views + Controller Apply ConstraintSet Setup Controller Controller ୡӝച ೙ਃ android.support.constraint.motion.MotionController#setupMotionViews Not Official
101. Pluu Dev. Fixed, ۨ੉ইਓ јन ޙઁ. btnChange.setOnClickListener { textView.text = buildString { for (value in 0..Random.nextInt(10)) { append(value) } } motionLayout.setTransition(R.id.start, R.id.end) } Transition ୡӝച Not Official Troubleshooting
102. Pluu Dev. Elevation ޙઁ. elevation਷ Android 5.0ࠗఠ ୶о Samsung 4.x ীࢲ 100% Crash ೧Ѿߨ) Samsung 4.xܳ ನӝೞח Ѫ MotionLayoutীࢲ API 21 ࠙ӝ୊ܻ X Issue Tracker > ConstraintLayout 2.0.0-alpha2 broke compatability java.lang.RuntimeException: Unable to start activity ComponentInfo{twitter.com.constraintlayoutrepro/ twitter.com.constraintlayoutrepro.MainActivity}: java.lang.UnsupportedOperationException: Can't convert to dimension: type=0x3 … Caused by: java.lang.UnsupportedOperationException: Can't convert to dimension: type=0x3 at android.content.res.TypedArray.getDimension(TypedArray.java: 399) at android.support.constraint.ConstraintSet.populateConstraint(Cons traintSet.java:2392) at android.support.constraint.ConstraintSet.fillFromAttributeList(Con straintSet.java:2191) at android.support.constraint.ConstraintSet.load(ConstraintSet.java: 2160) … Pluu Dev. Troubleshooting
103. Pluu Dev. Pluu Dev. Future. MotionEditor / Alpha4
104. Pluu Dev. Motion Editor. in Android Dev Summit '18
105. Pluu Dev. reddit We have paused the development of the Motion Editor temporarily as we are focusing on Marble. That said, a lot of the work we put in for 3.5 will directly benefit the Motion Editor, as it shares a lot of code / infrastructure with the other design tools. https://www.reddit.com/r/androiddev/comments/av3lhx/were_on_the_engineering_team_for_android_studio/ at Feb 28
106. Pluu Dev. Future. Alpha4 • Resize handling • View visibility • Attributes rename • RecyclerView + MotionLayout https://www.slideshare.net/hagikuratakeshi/deep-dive-into-motionlayout
107. Pluu Dev. RecyclerView. • Handle Gesture • Provide a similar view • Add view to Placeholder in MotionLayout • Recompute bounds • Run transition https://www.slideshare.net/hagikuratakeshi/deep-dive-into-motionlayout
108. Pluu Dev. Handling. new PlaceholderGestureHandler(
 motionLayout, recyclerView, view, viewType ) gestureHandler.onTouchEvent(event) https://www.slideshare.net/hagikuratakeshi/deep-dive-into-motionlayout
109. Pluu Dev. Summary.
110. Pluu Dev. Pros. Cons. • ఠ஖ܳ ੉ਊೠ Layout গפݫ੉࣌ ୊ܻ
 ੘স դ੉بо ծ׮ (Start/End о ઓ੤द) • গפݫ੉࣌ী ؀ೠ ӝ؀х!! • ই૒ Alpha ߡ੹ / ੿ध ߡ੹਷ ࠛైݺ • MotionLayout Editor ੄ ࠗ੤ • Best Practices ࠗ੤ • ࠗ੗োझ۞਍ ز੘ (CollapsibleToolbar)
111. Pluu Dev. Showcase. https://twitter.com/chrisbanes/status/ 1029619278863945728 https:// proandroiddev.com/the- motion-knight- b8f84052dd17 https://github.com/faob- dev/ MotionLayoutMenuA https://twitter.com/ riggaroo/status/ 1100360450435358721
112. Pluu Dev. • ViewGroupী ࣘೠ ੗ध View੄ 
 গפݫ੉࣌ਸ ੸ਊೞҊ रਸ ٸ • ࢎਊ੗৬ ࢚ഐ ੘ਊਸ ా೧ UI ਃࣗী
 গפݫ੉࣌ਸ ੸ਊೞҊ रਸ ٸ ঱ઁ ࢎਊೡө?
113. Pluu Dev. Choice Animation. MotionLayout Complex coordinated layout? Gesture to Animation? Physics Interruptible? Gesture to Animation? Transitions Shared element? window content? Animated Vector Drawable Vector graphic animation? View Animations Window Animation View Property Animator View Properties? Value Animator Custom animation? Object Animator General purpose property animation Get Animated (Android Dev Summit '18)
114. Pluu Dev. ଵҊ. • droidcon SF 2018 - MotionLayout & ConstraintLayout 2.0 • DroidKaigi 2019 - Deep dive into MotionLayout • Medium Articles • Introduction to MotionLayout part I • Introduction to MotionLayout part II • Introduction to MotionLayout part III • Introduction to MotionLayout part IV
115. Pluu Dev. ଵҊ. • Youtube • AndroidDevSummit - Get Animated • AndroidDevSummit - ConstraintLayout Deep Dive • droidcon SF 2018 - MotionLayout & ConstraintLayout 2.0 • droidcon NYC 2018 - Constraint-ly motion ~*~ making your app dance with With ConstraintLayout • GitHub • https://github.com/googlesamples/android-ConstraintLayoutExamples • https://github.com/Pluu/DroidKnights-2019-MotionLayout-Sample
116. Pluu Dev. END. Pluu pluulove@gmail.com http://pluu.github.io pluulove