Pro Yearly is on sale from $80 to $50! »

MotionLayout 무릎까지 담궈보기

MotionLayout 무릎까지 담궈보기

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

354271902cd8ba2762d05b251dfa0f84?s=128

pluulove (노현석)

April 05, 2019
Tweet

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