MotionLayout Basics

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

Transcript

1. MotionLayout Basics Yuta Takahashi 2018/8/2(Thu) shibuya.apk #27
2. About Me ∁ڮ
   ༎ଠ
   "OESPJE
   &OHJOFFS
   BU
   $ZCFS"HFOU
   *OD
   
   '3&4)
   -*7&
   ͱ͍͏ੜ์ૹ഑৴αʔϏεΛ࡞͍ͬͯ·͢
   5XJUUFS
   
   !ZU@IJ[J
   (JU)VC
   !ZUULIT
   
3. MotionLayout
4. w ̎ͭͷϨΠΞ΢τͷঢ়ଶΛΞχϝʔγϣϯͤ͞ͳ͕Β
 มԽͤ͞Δ͜ͱ͕Ͱ͖ΔϨΠΞ΢τ
   w $POTUSBJOU
   -BZPVU
   BMQIB
   Ͱ௥Ճ͞Εͨ
   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
    ͕͋Ε͹΋ͬͱָͦ͏
    CFUB
    PS
    TUBCMF
    Ҏ߱ Impressions
15. Thank you ࠓճ࢖༻ͨ͠αϯϓϧ͸ͪ͜Β͔Β: https://github.com/googlesamples/android-ConstraintLayoutExamples