Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MotionLayout Basics

MotionLayout Basics

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

Yuta Takahashi

August 02, 2018
Tweet

More Decks by Yuta Takahashi

Other Decks in Programming

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&ͱ͍͏ੜ์ૹ഑৴αʔϏεΛ࡞͍ͬͯ·͢
    [email protected][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