MotionLayout
敬上
是一種版面配置類型,可協助您管理應用程式中的動作和小工具動畫。
MotionLayout
是
ConstraintLayout
,並奠基於豐富多元
版面配置功能在 ConstraintLayout
程式庫中,MotionLayout
必須是支援資料庫
MotionLayout
可消除版面配置轉換與複雜動態之間的間隔
處理,提供結合屬性動畫的功能
架構
TransitionManager
和
CoordinatorLayout
。
除了說明版面配置之間的轉場效果之外,MotionLayout
還可讓您
為任何版面配置屬性建立動畫。此外,這項功能原本就支援可瀏覽
轉場效果。這表示您可以立即顯示轉場效果的任何時間點
根據某些條件 (例如觸控輸入)「MotionLayout
」也支援
主要畫面格,讓您按照需求完全自訂轉場效果。
MotionLayout
全面宣告,也就是說,您可以在任意位置說明
XML,不論多複雜都沒問題。
設計須知
MotionLayout
的用途是移動、調整大小和建立以下元素的 UI 元素:
使用者互動,例如按鈕和標題列。請勿在應用程式中使用動態功能,以免造成
無謂的特殊效果協助使用者瞭解您的應用程式
表現如何。如要進一步瞭解如何透過動作設計應用程式,請參閱
Material Design 章節:瞭解
動作。
開始使用
請按照下列步驟,開始在專案中使用 MotionLayout
。
-
新增
ConstraintLayout
依附元件:要使用的 將MotionLayout
程式碼ConstraintLayout
2.0 對應用程式的依附元件build.gradle
檔案。如果您使用的是 AndroidX,請將 下列依附元件:Groovy
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha14" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14") }
-
建立
MotionLayout
檔案:MotionLayout
是ConstraintLayout
的子類別,因此可以轉換任何 將現有的ConstraintLayout
轉換為MotionLayout
取代版面配置資源檔案中的類別名稱,如 範例:AndroidX
<!-- before: ConstraintLayout --> <androidx.constraintlayout.widget.ConstraintLayout .../> <!-- after: MotionLayout --> <androidx.constraintlayout.motion.widget.MotionLayout .../>
支援資料庫
<!-- before: ConstraintLayout --> <android.support.constraint.ConstraintLayout .../> <!-- after: MotionLayout --> <android.support.constraint.motion.MotionLayout .../>
以下是
MotionLayout
檔案的完整範例, 定義如圖 1 所示的版面配置:AndroidX
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <androidx.constraintlayout.motion.widget.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_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </androidx.constraintlayout.motion.widget.MotionLayout>
支援資料庫
<?xml version="1.0" encoding="utf-8"?> <!-- 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_01" 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>
-
建立 MotionScene:在前一個
MotionLayout
中建立 例如,app:layoutDescription
屬性會參照 動態場景。動態場景是 XML 資源檔案。包含<MotionScene>
敬上 動態場景會包含 對應的版面配置將版面配置資訊與動態分開 說明,每個MotionLayout
參照不同動作 場景。動態場景中的定義優先於任何類似設定MotionLayout
中的定義。以下為描述基本水平的動態場景檔案範例 圖 1 中的動作:
<?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:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> <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> <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>
注意事項:
-
<Transition>
敬上 包含動作的基礎定義。-
「
motion:constraintSetStart
」和motion:constraintSetEnd
是對 運動的端點這些端點是在<ConstraintSet>
元素 (位於動作場景的後面)。 -
motion:duration
會指定毫秒數 動作完成所需的時間
-
-
<OnSwipe>
敬上 可讓你為動作建立觸控手勢。-
motion:touchAnchorId
是指使用者可以使用的檢視畫面 可以滑動或拖曳 -
motion:touchAnchorSide
表示 正在從右側拖曳檢視區塊。 -
motion:dragDirection
是指進度 拖曳方向例如:motion:dragDirection="dragRight"
表示進度 會隨著檢視區塊向右拖曳而增加。
-
-
<ConstraintSet>
可讓你定義各種描述動作的限制。 在本例中,您可以將<ConstraintSet>
定義為 您運動的每個端點這些端點在 使用app:layout_constraintTop_toTopOf="parent"
和app:layout_constraintBottom_toBottomOf="parent"
。 水平端點位於 。
進一步查看動態場景的各種元素 支援,請參閱 MotionLayout 範例。
-
內插屬性
在動態場景檔案中,ConstraintSet
元素可包含額外
屬性。除了位置和
界限,下列屬性會以 MotionLayout
插入:
alpha
visibility
elevation
rotation
、rotationX
、rotationY
translationX
、translationY
、translationZ
scaleX
、scaleY
自訂屬性
您可以在 <Constraint>
中使用 <CustomAttribute>
元素指定
與位置或 View
無關的屬性轉換
屬性。
<Constraint android:id="@+id/button" ...> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60"/> </Constraint>
<CustomAttribute>
本身包含兩個屬性:
- 必須提供
motion:attributeName
,且物件必須與 getter 和 setter 方法。getter 和 setter 必須符合特定模式。適用對象 支援backgroundColor
,因為檢視畫面有基礎getBackgroundColor()
和setBackgroundColor()
方法。 - 您必須根據值類型提供其他屬性。選擇
下列支援類型:
motion:customColorValue
代表顏色motion:customIntegerValue
代表整數motion:customFloatValue
代表浮點值motion:customStringValue
代表字串- 尺寸:
motion:customDimension
motion:customBoolean
代表布林值
指定自訂屬性時,請同時在開頭和
結束 <ConstraintSet>
元素。
變更背景顏色
以上一個範例為基礎,假設您想變更檢視畫面的顏色 如同圖 2 所示
為每個 ConstraintSet
元素新增 <CustomAttribute>
元素,如下所示:
下列程式碼片段:
<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="#D81B60" /> </Constraint> </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"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet>
其他 MotionLayout 屬性
除了上述範例中的屬性之外,MotionLayout
還有其他
可能需要指定的屬性:
app:applyMotionScene="boolean"
會指出是否要套用動態場景。 此屬性的預設值為true
。app:showPaths="boolean"
用於表示是否要將動態路徑顯示為 以及動作是否正在運作此屬性的預設值為false
。app:progress="float"
可讓您明確指定轉換進度。個人中心 可使用從0
(轉場效果的開始) 到1
的任何浮點值 (轉場的結尾)。app:currentState="reference"
可讓您指定特定的ConstraintSet
。app:motionDebug
可讓您顯示 動作可能的值包括"SHOW_PROGRESS"
、"SHOW_PATH"
或"SHOW_ALL"
。
其他資源
如要進一步瞭解 MotionLayout
,請參閱下列資源:
- Kotlin 03.2 版的 Android 進階功能:透過 MotionLayout 建立動畫
- MotionLayout 範例
- GitHub 上的 MotionLayout/ConstraintLayout 範例
- MotionLayout 簡介 (第 1 部分)
- MotionLayout 簡介 (第 II 部分)
- MotionLayout 簡介 (第 III 部分)
- MotionLayout 簡介 (第 IV 部分)