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.

Transcript

1. MotionLayout 簡介 Elvis Lin @AndroidTaipei 2018-08-23
2. 關於我 • Elvis Lin • Android 與 iOS 永遠的初學者 • Twitter: @elvismetaphor • Blog: https://blog.elvismetaphor.me
3. ⼤大綱 • MotionLayout 要解決的問題? • MotionLayout 的基本元件 • 範例例
4. MotionLayout 要解決的問題 • 簡化 Animation 的開發 • 結合了了 Property Animation framework, TransitionManager, and CoordinatorLayout，提供更更 *好* 的⽅方式開發 layout transition 與 motion handling • 是宣告式的（Declarative） • Animation 都可以完全定義在 xml 中
5. 專案中導入 MotionLayout • ⽬目前還在 Alpha 階段 • 修改 app/build.gradle • 加入 dependencies { implementation 'com.android.support.constraint:constraint-layout:2.0.0- alpha2' }
6. MotionLayout 的基本元件 • MotionLayout • MotionScene
7. Source: https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d
8. MotionLayout • ConstraintLayout 的⼦子類別 • 放在 res/layout ⽬目錄下 • 像使⽤用 ConstraintLayout ⼀一樣的⽅方式設計畫⾯面中的元件 • 動畫跟互動的部分定義在另外的檔案中 => MotionScene
9. MotionLayout 範例例 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app=“http://schemas.android.com/apk/res-auto" android:id="@+id/motion_container" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- More code here --> </android.support.constraint.motion.MotionLayout>
10. MotionScene • 放在 res/xml ⽬目錄下 • ConstraintSet • 定義 MotionLayout 中某些 View 的屬性，被定義的 View 的屬性值會被覆蓋 • Transition • 定義整個 animation 的長度、開始與結束的狀狀態等
11. 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>
12. ContraintSet 範例例 <ConstraintSet android:id="@+id/starting_set"> <Constraint android:id="@id/actor" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" android:layout_width="60dp" android:layout_height="60dp" /> </ConstraintSet>
13. Transition 範例例 <Transition android:id="@+id/my_transition" app:constraintSetStart="@+id/starting_set" app:constraintSetEnd="@+id/ending_set" app:duration="2000"> </Transition>
14. MotionScene ConstraintSet ConstraintSet 開始狀狀態 結束狀狀態 Transition
15. 綁定 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">
17. 除了了位置也可以修改屬性 • 使⽤用 CustomAttribute • 範例例： <ConstraintSet android:id="@+id/start"> <Constraint ……> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet>
18. 也可以增加中間的狀狀態 • 使⽤用 KeyFrameSet • 範例例： <Transition ...> <KeyFrameSet> <KeyPosition motion:keyPositionType="parentRelative" motion:percentY="0.75" motion:framePosition="50" motion:target="@+id/actor"/> </KeyFrameSet> </Transition>
19. KeyFrameSet • KeyAttribute • KeyCycle • KeyPosition
21. 也可以結合觸控的操作 • 使⽤用 OnSwipe • 範例例： <OnSwipe motion:touchAnchorId="@+id/actor" motion:touchAnchorSide="right" motion:dragDirection="dragRight" />
22. 更更多的範例例
 https://developer.android.com/reference/android/support/constraint/motion/MotionLayout
23. 結論 • MotionLayout 讓開發者更更容易易實作 animation • MotionLayout 使⽤用 Declarative 的⽅方式實作 transition 與跟 使⽤用者的⼿手勢互動 • MotionLayout 不是萬能的，如果有難以實作的情況，你可 以使⽤用原本的 property animation framework
24. 範例例程式 • 投影片使⽤用的範例例：
 https://github.com/elvismetaphor/motionlayout-simple- demo • 官⽅方範例例：
 https://github.com/googlesamples/android- ConstraintLayoutExamples/tree/master/motionlayout
25. 參參考資料 • 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