このページは Cloud Translation API によって翻訳されました。

MotionLayout を使用してモーションとウィジェットのアニメーションを管理する

MotionLayout は、アプリでのモーションとウィジェットのアニメーションの管理に役立つレイアウトタイプです。 MotionLayout は、 ConstraintLayout などの豊富なリソースを基盤としており、実装する方法を学びましたConstraintLayout ライブラリの一部として、MotionLayout サポートライブラリとして入手できます。

MotionLayout は、レイアウト遷移と複雑なモーションの間のギャップを埋めます。処理で、プロパティアニメーションとフレームワーク TransitionManager、 CoordinatorLayout。

</ph> <ph type="x-smartling-placeholder">

</ph> 図 1.基本的なタップ操作の動き。

MotionLayout を使用すると、レイアウト間の遷移を記述するだけでなく、次のことができます。すべてのレイアウトプロパティをアニメーション化します。さらに、本質的にシーク可能な 効果があります。つまり、遷移中のどのポイントでも瞬時に表示できます。タップ入力などの条件に基づいて処理できます。MotionLayout は次もサポート: ニーズに合わせて全面的にカスタマイズした切り替え効果を使用できます。

MotionLayout は完全宣言型であるため、任意の遷移を記述できます。 XML のみを使用できます。

設計に関する注意事項

MotionLayout は、UI 要素の移動、サイズ変更、アニメーション化するためのものです。ユーザーの操作（ボタンやタイトルバーなど）を表します。アプリでモーションを不当な特殊効果が加わります。ユーザーがアプリを理解しやすくするできます。モーションを組み込んだアプリのデザインについて詳しくは、マテリアルデザインセクションの理解モーション。

始める

プロジェクトで 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> では、モーションを表すさまざまな制約を定義します。この例では、1 つの <ConstraintSet> がモーションの各エンドポイントですこれらのエンドポイントは垂直方向の中央に配置されます。 app:layout_constraintTop_toTopOf="parent" と app:layout_constraintBottom_toBottomOf="parent"。水平方向には、終点は画像の右端と左端に表示されます。
モーションシーンのさまざまな要素について詳しくは、については、 MotionLayout の例。

補間される属性

モーションシーンファイル内の ConstraintSet 要素には、追加の遷移中に補間される属性です。P-MAX キャンペーンの次の属性が 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> には、固有の属性が 2 つあります。

motion:attributeName は必須で、オブジェクトとゲッターおよび setter メソッドを使用します。ゲッターとセッターは特定のパターンに一致する必要があります。対象たとえば backgroundColor はサポートされています。これは、ビューに基になる要素があるためです。 getBackgroundColor() メソッドと setBackgroundColor() メソッド。
他の属性は値のタイプに基づいて指定する必要があります。選択元次の型がサポートされています。 <ph type="x-smartling-placeholder">
- motion:customColorValue: 色
- motion:customIntegerValue: 整数
- motion:customFloatValue: 浮動小数点
- motion:customStringValue: 文字列
- motion:customDimension: サイズ
- motion:customBoolean: ブール値

カスタム属性を指定する場合は、start と末尾の <ConstraintSet> 要素。

背景色を変更する

前の例で、ビューの色を変更するとします。図 2 に示すとおりです。

</ph> <ph type="x-smartling-placeholder">

</ph> 図 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 の詳細については、次のリソースをご覧ください。

MotionLayout を使用してモーションとウィジェットのアニメーションを管理する

設計に関する注意事項

始める

Groovy

Kotlin

AndroidX

サポート ライブラリ

AndroidX

サポート ライブラリ

補間される属性

カスタム属性

背景色を変更する

その他の MotionLayout 属性

参考情報

サポートライブラリ

サポートライブラリ