MotionLayout
は、アプリでのモーションとウィジェットのアニメーションの管理に役立つレイアウト タイプです。
MotionLayout
は、
ConstraintLayout
などの豊富なリソースを基盤としており、
実装する方法を学びましたConstraintLayout
ライブラリの一部として、MotionLayout
サポート ライブラリとして入手できます。
MotionLayout
は、レイアウト遷移と複雑なモーションの間のギャップを埋めます。
処理で、プロパティ アニメーションと
フレームワーク
TransitionManager
、
CoordinatorLayout
。
MotionLayout
を使用すると、レイアウト間の遷移を記述するだけでなく、次のことができます。
すべてのレイアウト プロパティをアニメーション化します。さらに、本質的にシーク可能な
効果があります。つまり、遷移中のどのポイントでも瞬時に表示できます。
タップ入力などの条件に基づいて処理できます。MotionLayout
は次もサポート:
ニーズに合わせて全面的にカスタマイズした切り替え効果を使用できます。
MotionLayout
は完全宣言型であるため、任意の遷移を記述できます。
XML のみを使用できます。
設計に関する注意事項
MotionLayout
は、UI 要素の移動、サイズ変更、アニメーション化するためのものです。
ユーザーの操作(ボタンやタイトルバーなど)を表します。アプリでモーションを
不当な特殊効果が加わります。ユーザーがアプリを理解しやすくする
できます。モーションを組み込んだアプリのデザインについて詳しくは、
マテリアル デザイン セクションの理解
モーション。
始める
プロジェクトで MotionLayout
を使用する手順は次のとおりです。
-
ConstraintLayout
依存関係を追加: 使用します。 プロジェクトにMotionLayout
を追加する場合は、ConstraintLayout
2.0 の依存関係をアプリのbuild.gradle
ファイル。AndroidX を使用している場合は、 次のような依存関係があります。Groovy
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.0-beta01" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01") }
-
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">
- </ph>
motion:customColorValue
: 色motion:customIntegerValue
: 整数motion:customFloatValue
: 浮動小数点motion:customStringValue
: 文字列motion:customDimension
: サイズmotion:customBoolean
: ブール値
カスタム属性を指定する場合は、start と
末尾の <ConstraintSet>
要素。
背景色を変更する
前の例で、ビューの色を変更するとします。 図 2 に示すとおりです。
<ph type="x-smartling-placeholder">次に示すように、各 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 の概要(パート I)
- MotionLayout の概要(パート II)
- MotionLayout の概要(パート III)
- MotionLayout の概要(パート IV)