Motion Layout是ConstraintLayout的子類別,是在ConstraintLayout 2.0 版本新增的。Motion Layout 可以讓我們用xml 的方式宣告動畫。
什麼時候需要用MotionLayout呢?當我們需要與UI互動時產生動畫時,就會使用MotionLayout。
如下圖,往滑動時,下方的區塊會跟著移動。
使用方式:
Gradle
implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'
在activity_main.xml加上MotionLayout,加上屬性app:layoutDescription="@xml/scene”。這個MotionLayout裡的子View就可以透過scene.xml的設定當使用者與UI互動時產生動畫。
activity_main.xml
<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/motionLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/scene"
tools:showPaths="true">
<View
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:background="@color/colorAccent"
android:text="Button" />
</android.support.constraint.motion.MotionLayout>
在這裡設定當使用者與UI做什麼樣的互動(例:OnSwipe)時,要使用什麼動畫。
xml/scene.xml
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<!--在這裡設定當使用者與UI做什麼樣的互動(OnSwipe)時,要使用什麼動畫(Transition)。-->
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end"
motion:duration="1000">
<OnSwipe
motion:dragDirection="dragRight"
motion:touchAnchorId="@+id/button"
motion:touchAnchorSide="right" />
</Transition>
<!--起始Layout ConstraintSet-->
<ConstraintSet android:id="@+id/start">
<Constraint
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" />
</ConstraintSet>
<!--結束Layout ConstraintSet-->
<ConstraintSet android:id="@+id/end">
<Constraint
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" />
</ConstraintSet>
</MotionScene>
touchAnchorId: 物件的Id
touchAnchorSide: 物件移動的方向 (top / left / right / bottom )
dragDirection:物件拉至哪個方向 (dragRight / dragLeft / dragUp / dragDown )
所以這個例子可以解釋為,當把id/button往右拉時,button會往右移動,動畫將從id/start的ConstraintSet到id/end的ConstraintSet,動畫期間為1秒。
除了透過ConstraintSet的開始Layout、結束Layout不同的Constraint產生的動畫,還可以加上CustomAttribute,改變背景顏色
在start加上CustomAttribute 設定 attributeName 改變BackgroundColor
<ConstraintSet android:id="@+id/start">
<Constraint
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">
<CustomAttribute
motion:attributeName="BackgroundColor"
motion:customColorValue="#1b54d8" />
</Constraint>
</ConstraintSet>
在end加上CustomAttribute 設定 attributeName 改變BackgroundColor
<ConstraintSet android:id="@+id/end">
<Constraint
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">
<CustomAttribute
motion:attributeName="BackgroundColor"
motion:customColorValue="#f2431c" />
</Constraint>
</ConstraintSet>
CustomAttribute 還有其他可以設定
<CustomAttribute
motion:attributeName="alpha"
motion:customFloatValue="0" />
android:visibility
android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ
完整程式:
https://github.com/evanchen76/MotionLayout
參考
https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d
https://github.com/googlesamples/android-ConstraintLayoutExamples
線上課程:
Android 動畫入門到進階
Android UI 進階實戰(Material Design Component)
出版書:
Android TDD 測試驅動開發:從 UnitTest、TDD 到 DevOps 實踐