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

MotionLayout Brief Introduction

Avatar for Elvis Lin Elvis Lin
August 23, 2018

MotionLayout Brief Introduction

In Google I/O 2018, Google announced a new layout "MotionLayout" to reduce the effort to create an animation. In this slide, I give you a brief introduction about how to use MotionLayout in your app.

Avatar for Elvis Lin

Elvis Lin

August 23, 2018
Tweet

More Decks by Elvis Lin

Other Decks in Programming

Transcript

  1. 關於我 • Elvis Lin • Android 與 iOS 永遠的初學者 •

    Twitter: @elvismetaphor • Blog: https://blog.elvismetaphor.me
  2. MotionLayout 要解決的問題 • 簡化 Animation 的開發 • 結合了了 Property Animation

    framework, TransitionManager, and CoordinatorLayout,提供更更 *好* 的⽅方式開發 layout transition 與 motion handling • 是宣告式的(Declarative) • Animation 都可以完全定義在 xml 中
  3. 專案中導入 MotionLayout • ⽬目前還在 Alpha 階段 • 修改 app/build.gradle •

    加入 dependencies { implementation 'com.android.support.constraint:constraint-layout:2.0.0- alpha2' }
  4. MotionLayout • ConstraintLayout 的⼦子類別 • 放在 res/layout ⽬目錄下 • 像使⽤用

    ConstraintLayout ⼀一樣的⽅方式設計畫⾯面中的元件 • 動畫跟互動的部分定義在另外的檔案中 => MotionScene
  5. MotionScene • 放在 res/xml ⽬目錄下 • ConstraintSet • 定義 MotionLayout

    中某些 View 的屬性,被定義的 View 的屬性值會被覆蓋 • Transition • 定義整個 animation 的長度、開始與結束的狀狀態等
  6. MotionScene 範例例 <?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" motion:interpolator=“linear"> <!-- More code here --> </Transition> <ConstraintSet android:id=“@+id/start"> <!-- More code here --> </ConstraintSet> <ConstraintSet android:id=“@+id/end"> <!-- More code here --> </ConstraintSet> </MotionScene>
  7. 綁定 MotionLayout 與
 MotionScene • 修改 MotionLayout 檔案 • 加上

    <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motion_container" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/my_scene">
  8. 除了了位置也可以修改屬性 • 使⽤用 CustomAttribute • 範例例: <ConstraintSet android:id="@+id/start"> <Constraint ……>

    <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet>
  9. 也可以增加中間的狀狀態 • 使⽤用 KeyFrameSet • 範例例: <Transition ...> <KeyFrameSet> <KeyPosition

    motion:keyPositionType="parentRelative" motion:percentY="0.75" motion:framePosition="50" motion:target="@+id/actor"/> </KeyFrameSet> </Transition>
  10. 結論 • MotionLayout 讓開發者更更容易易實作 animation • MotionLayout 使⽤用 Declarative 的⽅方式實作

    transition 與跟 使⽤用者的⼿手勢互動 • MotionLayout 不是萬能的,如果有難以實作的情況,你可 以使⽤用原本的 property animation framework
  11. 參參考資料 • What's new with ConstraintLayout and Android Studio design

    tools (Google I/O '18) 
 https://www.youtube.com/watch?v=ytZteMo4ETk • Creating Animations With MotionLayout for Android
 https://code.tutsplus.com/tutorials/creating-animations-with- motionlayout-for-android--cms-31497 • Introduction to MotionLayout (part I) 
 https://medium.com/google-developers/introduction-to-motionlayout- part-i-29208674b10d • MotionLayout (Official Documentation) 
 https://developer.android.com/reference/android/support/constraint/ motion/MotionLayout