MotionLayout Basics

MotionLayout Basics

shibuya.apk #27 で使用した MotionLayout に関する発表の資料です

29ce13d154890c7dea2c285909215868?s=128

Yuta Takahashi

August 02, 2018
Tweet

Transcript

  1. MotionLayout Basics Yuta Takahashi 2018/8/2(Thu) shibuya.apk #27

  2. About Me ∁ڮ༎ଠ "OESPJE&OHJOFFSBU$ZCFS"HFOU *OD '3&4)-*7&ͱ͍͏ੜ์ૹ഑৴αʔϏεΛ࡞͍ͬͯ·͢ 5XJUUFS!ZU@IJ[J (JU)VC!ZUULIT

  3. MotionLayout

  4. w ̎ͭͷϨΠΞ΢τͷঢ়ଶΛΞχϝʔγϣϯͤ͞ͳ͕Β
 มԽͤ͞Δ͜ͱ͕Ͱ͖ΔϨΠΞ΢τ w $POTUSBJOU-BZPVUBMQIBͰ௥Ճ͞Εͨ w ͰTUBCMFʹͳΔ༧ఆ Կ͕৽͍͠ͷ͔ w $VTUPN"UUSJCVUFΛࢦఆͰ͖Δ

    w Ϣʔβͷૢ࡞ʹԠͯ͡ঢ়ଶΛมԽͤ͞Δ͜ͱ͕Ͱ͖ΔͳͲ MotionLayout
  5.  ࠷ॳͷঢ়ଶͷMBZPVUΛ࡞Δ  ࠷ޙͷঢ়ଶͷMBZPVUΛ࡞Δ   Ͱ࡞੒ͨ͠MBZPVUΛ΋ͱʹ.PUJPO4DFOFΛ࡞Δ  5SBOTJUJPOͱ0O4XJQFΛఆٛ͢Δ 

    .PUJPO-BZPVUʹ.PUJPO4DFOFΛηοτ͢Δ How to create animation
  6. ͜Ε͔Β࡞Δαϯϓϧ https://github.com/googlesamples/android-ConstraintLayoutExamples How to create animation

  7. <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" android:background="@color/colorAccent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

     ࠷ॳͷঢ়ଶͷMBZPVUΛ࡞Δ How to create animation
  8. <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" android:background="@color/colorAccent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" />

     ࠷ޙͷঢ়ଶͷMBZPVUΛ࡞Δ How to create animation
  9. How to create animation   Ͱ࡞੒ͨ͠MBZPVUΛ΋ͱʹ.PUJPO4DFOFΛͭ͘Δ <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto">

    <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> </MotionScene> How to create animation https://developer.android.com/reference/android/support/constraint/motion/MotionLayout
  10.   Ͱ࡞੒ͨ͠MBZPVUΛ΋ͱʹ.PUJPO4DFOFΛͭ͘Δ <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <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> </MotionScene> https://developer.android.com/reference/android/support/constraint/motion/MotionLayout How to create animation \ ⁞ \  
  11. How to create animation  5SBOTJUJPOͱ0O4XJQFΛఆٛ͢Δ <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> <!— 3Ͱ࡞ͬͨ ConstraintSet ͳͲͷఆ͕ٛԼʹଓ͘ —> How to create animation
  12. How to create animation  .PUJPO-BZPVUʹ.PUJPO4DFOFΛηοτ͢Δ How to create animation

    <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene"> <View android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/colorAccent"/> </android.support.constraint.motion.MotionLayout>
  13. How to debug animation <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01"

    app:showPaths="true"> Debug animation BQQTIPX1BUITͰΞχϝʔγϣϯͷύεΛ දࣔͰ͖Δ
  14. w .PUJPO-BZPVU͸ ͜ͷঢ়ଶ͔Β͜͏͍͏ঢ়ଶʹͳͬͯ
 ΄͍͠ʜͱ͍͏ͷΛΑ͠ͳʹ׎͑ͯ͘ΕΔ w ࣗ෼Ͱ΍Δ͜ͱ͕গͳָͯ͘ͳͿΜɺࡉ͔͍ௐ੔͸೉͍͠ w BMQIBͳͷͰ౰વͳ͕Βෆ۩߹͸ଟ͍࣮ϓϩμΫτͰ
 ࢖͓͏ͱ͢Δͱ΄΅࣮֬ʹ஍ཕΛ౿Ήͱ͍ͬͯ΋͍͍͘Β͍ w

    .PUJPO&EJUPS͕͋Ε͹΋ͬͱָͦ͏ CFUBPSTUBCMFҎ߱ Impressions
  15. Thank you ࠓճ࢖༻ͨ͠αϯϓϧ͸ͪ͜Β͔Β: https://github.com/googlesamples/android-ConstraintLayoutExamples