このドキュメントでは、MotionLayout の使用方法の例を紹介します。各例には、モーションを示す動画のほか、モーションのシーンとレイアウトに対応するコードを掲載しています。
基本的なモーション
この例は、タップして水平方向にドラッグできる単一のビューを示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
カスタム属性 - backgroundColor
この例は、基本的なモーションの例と似ています。基本的なモーションに加え、ビューの移動に伴ってビューの背景色を変更します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
ImageFilterView - 画像の遷移
この例は、ImageFilterView の彩度の値の遷移方法を示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
キーフレームの位置
この例は、<KeyFrameSet> を使用して、移動するビューの Y 位置を変更します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
キーフレームの補間
この例は、キーフレームの位置の例で示されているビューのトランジションに、回転とスケーリングを加えます。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
キーフレームの循環
この例は、<KeyCycle> 要素を追加して、波のようなモーションをビューに追加します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
CoordinatorLayout（1/2）
この例は、MotionLayout を既存の AppBarLayout に追加して、アプリバーにモーションを追加します。この例については、MotionLayout の概要（パート III）に詳しい説明があります。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
CoordinatorLayout（2/2）
この例は、MotionLayout を既存の AppBarLayout に追加して、アプリバーにモーションを追加します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
DrawerLayout（1/2）
この例は、DrawerLayout にモーションを追加する方法を示します。この例については、MotionLayout の概要（パート III）に詳しい説明があります。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
DrawerLayout（2/2）
この例は、DrawerLayout にモーションを追加する方法を示します。
- レイアウト XML を表示します。
- メイン コンテンツ用の
MotionSceneXML を表示します。 - メニューの
MotionSceneXML を表示します。
サイドパネル
この例は、メイン コンテンツ領域を右にドラッグしたときにサイドパネルを表示する方法を示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
パララックス
この例は、複数の背景レイヤが異なる速度で移動するパララックスの背景を示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
ViewPager
この例は、ViewPager タブの切り替え時にモーションを追加する方法を示します。この例については、MotionLayout の概要（パート III）に詳しい説明があります。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
ViewPager - Lottie
この例は、ViewPager タブの切り替え時にモーションを追加する方法を示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
複雑なモーション（1/3）
この例は、これまでの例の要素を組み合わせた複雑なモーションを示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
複雑なモーション（2/3）
この例は、これまでの例の要素を組み合わせた複雑なモーションを示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
複雑なモーション（3/3）
この例は、これまでの例の要素を組み合わせた複雑なモーションを示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
フラグメントの遷移（1/2）
この例は、MotionLayout を使ったフラグメント間の遷移方法を示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
フラグメントの遷移（2/2）
この例は、MotionLayout を使ったフラグメント間の遷移方法を示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
YouTube のようなモーション
この例は、追加のコンテンツを含む、コンパクトなビューと全画面表示の間の遷移を示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
KeyTrigger
この例は、遷移が進行状況のしきい値を上回ったときと下回ったときにフローティング操作ボタンの表示と非表示を切り替える方法を示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。
複数の都道府県 / 州
この例は、状態を使用して、適用するモーションを決定する方法を示します。
- レイアウト XML を表示します。
MotionSceneXML を表示します。