Tweet
Tweet

Slide 1

Slide 1 text

MotionLayout 簡介 Elvis Lin @AndroidTaipei 2018-08-23

Slide 2

Slide 2 text

關於我 • Elvis Lin • Android 與 iOS 永遠的初學者 • Twitter: @elvismetaphor • Blog: https://blog.elvismetaphor.me

Slide 3

Slide 3 text

⼤大綱 • MotionLayout 要解決的問題? • MotionLayout 的基本元件 • 範例例

Slide 4

Slide 4 text

MotionLayout 要解決的問題 • 簡化 Animation 的開發 • 結合了了 Property Animation framework, TransitionManager, and CoordinatorLayout，提供更更 *好* 的⽅方式開發 layout transition 與 motion handling • 是宣告式的（Declarative） • Animation 都可以完全定義在 xml 中

Slide 5

Slide 5 text

專案中導入 MotionLayout • ⽬目前還在 Alpha 階段 • 修改 app/build.gradle • 加入 dependencies { implementation 'com.android.support.constraint:constraint-layout:2.0.0- alpha2' }

Slide 6

Slide 6 text

MotionLayout 的基本元件 • MotionLayout • MotionScene

Slide 7

Slide 7 text

Source: https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d

Slide 8

Slide 8 text

MotionLayout • ConstraintLayout 的⼦子類別 • 放在 res/layout ⽬目錄下 • 像使⽤用 ConstraintLayout ⼀一樣的⽅方式設計畫⾯面中的元件 • 動畫跟互動的部分定義在另外的檔案中 => MotionScene

Slide 9

Slide 9 text

MotionLayout 範例例

Slide 10

Slide 10 text

MotionScene • 放在 res/xml ⽬目錄下 • ConstraintSet • 定義 MotionLayout 中某些 View 的屬性，被定義的 View 的屬性值會被覆蓋 • Transition • 定義整個 animation 的長度、開始與結束的狀狀態等

Slide 11

Slide 11 text

MotionScene 範例例

Slide 12

Slide 12 text

ContraintSet 範例例

Slide 13

Slide 13 text

Transition 範例例

Slide 14

Slide 14 text

MotionScene ConstraintSet ConstraintSet 開始狀狀態 結束狀狀態 Transition

Slide 15

Slide 15 text

綁定 MotionLayout 與
 MotionScene • 修改 MotionLayout 檔案 • 加上

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

除了了位置也可以修改屬性 • 使⽤用 CustomAttribute • 範例例：

Slide 18

Slide 18 text

也可以增加中間的狀狀態 • 使⽤用 KeyFrameSet • 範例例：

Slide 19

Slide 19 text

KeyFrameSet • KeyAttribute • KeyCycle • KeyPosition

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

也可以結合觸控的操作 • 使⽤用 OnSwipe • 範例例：

Slide 22

Slide 22 text

更更多的範例例
 https://developer.android.com/reference/android/support/constraint/motion/MotionLayout

Slide 23

Slide 23 text

結論 • MotionLayout 讓開發者更更容易易實作 animation • MotionLayout 使⽤用 Declarative 的⽅方式實作 transition 與跟 使⽤用者的⼿手勢互動 • MotionLayout 不是萬能的，如果有難以實作的情況，你可 以使⽤用原本的 property animation framework

Slide 24

Slide 24 text

範例例程式 • 投影片使⽤用的範例例：
 https://github.com/elvismetaphor/motionlayout-simple- demo • 官⽅方範例例：
 https://github.com/googlesamples/android- ConstraintLayoutExamples/tree/master/motionlayout

Slide 25

Slide 25 text

參參考資料 • 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

Slide 26

Slide 26 text

No content