MotionLayout Basics

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

Transcript

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

   View Slide

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

   View Slide

3. MotionLayout
   

   View Slide

4. w ̎ͭͷϨΠΞ΢τͷঢ়ଶΛΞχϝʔγϣϯͤ͞ͳ͕Β

   มԽͤ͞Δ͜ͱ͕Ͱ͖ΔϨΠΞ΢τ
   w $POTUSBJOU-BZPVUBMQIBͰ௥Ճ͞Εͨ
   w ͰTUBCMFʹͳΔ༧ఆ
   Կ͕৽͍͠ͷ͔
   w $VTUPN"UUSJCVUFΛࢦఆͰ͖Δ
   w Ϣʔβͷૢ࡞ʹԠͯ͡ঢ়ଶΛมԽͤ͞Δ͜ͱ͕Ͱ͖ΔͳͲ
   MotionLayout
   

   View Slide

5. ࠷ॳͷঢ়ଶͷMBZPVUΛ࡞Δ
   ࠷ޙͷঢ়ଶͷMBZPVUΛ࡞Δ
   Ͱ࡞੒ͨ͠MBZPVUΛ΋ͱʹ.PUJPO4DFOFΛ࡞Δ
   5SBOTJUJPOͱ0O4XJQFΛఆٛ͢Δ
   .PUJPO-BZPVUʹ.PUJPO4DFOFΛηοτ͢Δ
   How to create animation
   

   View Slide

6. ͜Ε͔Β࡞Δαϯϓϧ
   https://github.com/googlesamples/android-ConstraintLayoutExamples
   How to create animation
   

   View Slide

7. 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
   

   View Slide

8. 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
   

   View Slide

9. How to create animation
   Ͱ࡞੒ͨ͠MBZPVUΛ΋ͱʹ.PUJPO4DFOFΛͭ͘Δ
   xmlns:motion="http://schemas.android.com/apk/res-auto">
   
   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" />
   
   
   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" />
   
   
   How to create animation
   https://developer.android.com/reference/android/support/constraint/motion/MotionLayout
   

   View Slide

10. Ͱ࡞੒ͨ͠MBZPVUΛ΋ͱʹ.PUJPO4DFOFΛͭ͘Δ
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    
    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" />
    
    
    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" />
    
    
    https://developer.android.com/reference/android/support/constraint/motion/MotionLayout
    How to create animation
    \
    ⁞
    \
     
    

    View Slide

11. How to create animation
    5SBOTJUJPOͱ0O4XJQFΛఆٛ͢Δ
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@+id/start"
    motion:duration="1000">
    motion:dragDirection="dragRight"
    motion:touchAnchorId="@id/button"
    motion:touchAnchorSide="right" />
    
    
    How to create animation
    

    View Slide

12. How to create animation
    .PUJPO-BZPVUʹ.PUJPO4DFOFΛηοτ͢Δ
    How to create animation
    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">
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"/>
    
    

    View Slide

13. How to debug animation
    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ͰΞχϝʔγϣϯͷύεΛ
    දࣔͰ͖Δ
    

    View Slide

14. w .PUJPO-BZPVU͸ ͜ͷঢ়ଶ͔Β͜͏͍͏ঢ়ଶʹͳͬͯ

    ΄͍͠ʜͱ͍͏ͷΛΑ͠ͳʹ׎͑ͯ͘ΕΔ
    w ࣗ෼Ͱ΍Δ͜ͱ͕গͳָͯ͘ͳͿΜɺࡉ͔͍ௐ੔͸೉͍͠
    w BMQIBͳͷͰ౰વͳ͕Βෆ۩߹͸ଟ͍࣮ϓϩμΫτͰ

    ࢖͓͏ͱ͢Δͱ΄΅࣮֬ʹ஍ཕΛ౿Ήͱ͍ͬͯ΋͍͍͘Β͍
    w .PUJPO&EJUPS͕͋Ε͹΋ͬͱָͦ͏ CFUBPSTUBCMFҎ߱
    
    Impressions
    

    View Slide

15. Thank you
    ࠓճ࢖༻ͨ͠αϯϓϧ͸ͪ͜Β͔Β:
    https://github.com/googlesamples/android-ConstraintLayoutExamples
    

    View Slide