使用 MotionLayout 管理動態和小工具動畫

MotionLayout敬上 是一種版面配置類型，可協助您管理應用程式中的動作和小工具動畫。 MotionLayout 是 ConstraintLayout，並奠基於豐富多元 版面配置功能在 ConstraintLayout 程式庫中，MotionLayout 必須是支援資料庫

MotionLayout 可消除版面配置轉換與複雜動態之間的間隔 處理，提供結合屬性動畫的功能 架構 TransitionManager和 CoordinatorLayout。

圖 1.基本的觸控動作。

除了說明版面配置之間的轉場效果之外，MotionLayout 還可讓您 為任何版面配置屬性建立動畫。此外，這項功能原本就支援可瀏覽 轉場效果。這表示您可以立即顯示轉場效果的任何時間點 根據某些條件 (例如觸控輸入)「MotionLayout」也支援 主要畫面格，讓您按照需求完全自訂轉場效果。

MotionLayout 全面宣告，也就是說，您可以在任意位置說明 XML，不論多複雜都沒問題。

設計須知

MotionLayout 的用途是移動、調整大小和建立以下元素的 UI 元素： 使用者互動，例如按鈕和標題列。請勿在應用程式中使用動態功能，以免造成 無謂的特殊效果協助使用者瞭解您的應用程式 表現如何。如要進一步瞭解如何透過動作設計應用程式，請參閱 Material Design 章節：瞭解 動作。

開始使用

請按照下列步驟，開始在專案中使用 MotionLayout。

  1. 新增 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")
}

  2. 建立 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>

  3. 建立 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 所示

圖 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，請參閱下列資源：