MotionLayout in 5min

Transcript

1. 5෼ͰΘ͔Δ MotionLayout ! https://twitter.com/itometeam " https://github.com/itome # https://medium.com/@itometeam potatotips #55 Takeshi Tsukamoto
2. 1min MotionLayoutͱ͸ʁ
3. 1min MotionLayoutͱ͸ʁ ɾӈͷΑ͏ͳΞχϝʔγϣϯ͕؆୯ʹ࣮૷Ͱ͖Δ ɾConstraintLayout2.0.0͔Βಋೖ ɾConstraintLayoutͱಉ༷ʹϨΠΞ΢τΛ૊ΜͰɺ ɹMotionSceneͱ͍͏ΞχϝʔγϣϯఆٛϑΝΠϧΛ ɹΛࢦఆ͢Δ͚ͩͰ࣮૷Ͱ͖Δ
4. 2min MotionLayoutͷ࢖͍ํ
5. 5 2min MotionLayout࢖͍ํ εϫΠϓͰҠಈ͢ΔӈͷΑ͏ͳϨΠΞ΢τ Λ࡞ͬͯΈ·͢ɻ
6. 6 2min MotionLayout࢖͍ํ <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout … app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </android.support.constraint.motion.MotionLayout> ConstraintLayoutΛ MotionLayoutʹஔ͖׵͑ layoutDescriptionʹ sceneϑΝΠϧΛࢦఆ
7. 7 2min MotionLayout࢖͍ํ <?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"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" /> </Transition> <ConstraintSet android:id="@+id/start">…</ConstraintSet> <ConstraintSet android:id="@+id/end">…</ConstraintSet> </MotionScene> constraintSetStartͱ constraintSetEndʹ࢝఺ͱऴ఺ͷ ConstraintSetΛࢦఆ ΞχϝʔγϣϯͷτϦΨʔΛ ࢦఆ͢Δ
8. 8 2min MotionLayout࢖͍ํ <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> layout_ଐੑͷΈΛࢦఆ͢Δ ※ݩͷϨΠΞ΢τϑΝΠϧʹ ࢦఆͨ͠layout_ଐੑ͸શͯ Ϧηοτ͞ΕΔͷͰ஫ҙ
9. 1min ଞʹԿ͕Ͱ͖Δͷʁ
10. 10 1min ଞʹԿ͕Ͱ͖Δʁ ɾlayout_Ҏ֎ͷଐੑΛมߋ͍ͨ͠ →CustomAttributeͰࢦఆͰ͖·͢ʂ
11. 11 1min ଞʹԿ͕Ͱ͖Δʁ ɾ࢝఺ͱऴ఺Ҏ֎ͰଐੑΛมߋ͍ͨ͠ →KeyframeͰࢦఆͰ͖·͢ʂ
12. 1min Ͱ͖ͳ͍͜ͱ͸ͳ͍ͷʁ
13. 13 1min Ͱ͖ͳ͍͜ͱ͸ͳ͍ͷʁ ɾ3ͭҎ্ͷঢ়ଶΛ΋ͭϨΠΞ΢τ ɾ૬ର஋ͰભҠ͢ΔΞχϝʔγϣϯ ɾෳ਺ํ޲΁ͷυϥοάΛΞχϝʔγϣϯͷτϦΨʔʹ͢Δ ɾଙཁૉҎԼʹΞχϝʔγϣϯΛద༻͢Δ ͜Μͳ͜ͱΛ͍ͨ͠ͱ͖͸ଞͷΞχϝʔγϣϯ࣮૷Λݕ౼͠·͠ΐ͏
14. 14 1min Ͱ͖ͳ͍͜ͱ͸ͳ͍ͷʁ ݱࡏͷ࠷৽όʔδϣϯ(ConstraintLayout2.0.0-alpha2)Ͱ͸ VisibilityͳͲͷಈతͳมߋ͕Ͱ͖·ͤΜɻ 2.0.0-alpha3Ͱमਖ਼༧ఆΒ͍͠ͷͰͦΕ·Ͱ଴ͪ·͠ΐ͏
15. ͋Γ͕ͱ͏͍͟͝·ͨ͠ ! https://twitter.com/itometeam " https://github.com/itome # https://medium.com/@itometeam Takeshi Tsukamoto