マテリアル デザイン アプリのアクティビティ遷移は、共通の要素間の動作や変換により、さまざまな状態を視覚的に結び付けます。開始遷移と終了遷移、およびアクティビティ間の共有要素の遷移に、カスタム アニメーションを指定できます。
- 開始遷移は、アクティビティのビューがどのようにシーンに入るかを決定します。たとえば、
explode
開始遷移では、ビューが外側からシーンに入り、画面の中央に向かって内側にジャンプします。 - 終了遷移は、アクティビティ内のビューがどのようにシーンから出るかを決定します。たとえば、
explode
出口遷移では、ビューはシーンの中心から離れます。 - 共有要素遷移は、2 つのアクティビティ間で共有されるビューがこれらのアクティビティ間でどのように遷移するかを決定します。たとえば、2 つのアクティビティで同じ画像の位置とサイズが異なる場合、
changeImageTransform
共有要素の遷移により、これらのアクティビティ間で画像をスムーズに変換して拡大縮小します。
Android では、次の開始遷移と終了遷移がサポートされます。
explode
: ビューをシーンの中心へ、またはシーンの中心から外に移動します。slide
: ビューをシーンの端の内外に移動します。fade
: 不透明度を変更して、シーンにビューを追加または削除します。
Visibility
クラスを拡張する遷移は、開始遷移または終了遷移としてサポートされます。
詳しくは、API リファレンスの Transition
クラスをご覧ください。
Android では、次の共有要素による遷移もサポートされています。
changeBounds
: ターゲット ビューのレイアウト境界の変更をアニメーション化します。changeClipBounds
: ターゲット ビューのクリップ境界の変化をアニメーション化します。changeTransform
: ターゲット ビューのスケールと回転の変化をアニメーション化します。changeImageTransform
: ターゲット画像のサイズとスケールの変化をアニメーション化します。
アプリでアクティビティ遷移を有効にすると、開始アクティビティと終了アクティビティ間でデフォルトのクロスフェード遷移が有効になります。
共有要素を使用してアクティビティ間でアニメーション化するサンプルコードについては、ActivitySceneTransitionBasic をご覧ください。
システム バージョンを確認する
アクティビティ遷移 API は、Android 5.0(API 21)以降でご利用いただけます。以前のバージョンの Android との互換性を維持するには、次のいずれかの機能の API を呼び出す前に、実行時にシステムの version
を確認します。
Kotlin
// Check if we're running on Android 5.0 or higher if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { // Apply activity transition } else { // Swap without transition }
Java
// Check if we're running on Android 5.0 or higher if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { // Apply activity transition } else { // Swap without transition }
カスタム遷移を指定する
まず、マテリアル テーマから継承するスタイルを定義するときに、android:windowActivityTransitions
属性を使用してウィンドウ コンテンツの遷移を有効にします。スタイル定義で、開始、終了、共有要素の遷移を指定することもできます。
<style name="BaseAppTheme" parent="android:Theme.Material"> <!-- enable window content transitions --> <item name="android:windowActivityTransitions">true</item> <!-- specify enter and exit transitions --> <item name="android:windowEnterTransition">@transition/explode</item> <item name="android:windowExitTransition">@transition/explode</item> <!-- specify shared element transitions --> <item name="android:windowSharedElementEnterTransition"> @transition/change_image_transform</item> <item name="android:windowSharedElementExitTransition"> @transition/change_image_transform</item> </style>
この例の change_image_transform
遷移に関する定義は、次のとおりです。
<!-- res/transition/change_image_transform.xml --> <!-- (see also Shared Transitions below) --> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeImageTransform/> </transitionSet>
changeImageTransform
要素は ChangeImageTransform
クラスに対応します。詳しくは、Transition
の API リファレンスをご覧ください。
代わりに、コードでウィンドウ コンテンツ遷移を有効にするには、次のように Window.requestFeature()
関数を呼び出します。
Kotlin
// Inside your activity (if you did not enable transitions in your theme) with(window) { requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS) // Set an exit transition exitTransition = Explode() }
Java
// Inside your activity (if you did not enable transitions in your theme) getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS); // Set an exit transition getWindow().setExitTransition(new Explode());
コード内で遷移を指定するには、Transition
オブジェクトを使用して以下の関数を呼び出します。
Window.setEnterTransition()
Window.setExitTransition()
Window.setSharedElementEnterTransition()
Window.setSharedElementExitTransition()
setExitTransition()
関数と setSharedElementExitTransition()
関数は、呼び出し元アクティビティの終了遷移を定義します。setEnterTransition()
関数と setSharedElementEnterTransition()
関数は、呼び出されたアクティビティの開始遷移を定義します。
遷移の効果を最大限に引き出すには、呼び出し元と呼び出し先のアクティビティの両方でウィンドウ コンテンツの遷移を有効にする必要があります。それ以外の場合、呼び出し元のアクティビティが終了遷移を開始しますが、その後にウィンドウ遷移(スケールやフェードなど)が表示されます。
開始遷移をできるだけ早く開始するには、呼び出されたアクティビティで Window.setAllowEnterTransitionOverlap()
関数を使用します。これにより、さらに印象的な開始遷移になります。
遷移を使ってアクティビティを開始する
遷移を有効にしてアクティビティの終了遷移を設定すると、次のように別のアクティビティの起動時に遷移がアクティブになります。
Kotlin
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle())
Java
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
2 つ目のアクティビティに開始遷移を設定すると、アクティビティの開始時にその遷移も有効になります。別のアクティビティを起動したときに遷移を無効にするには、null
のオプション バンドルを指定します。
共有要素を使ってアクティビティを開始する
共有要素を持つ 2 つのアクティビティ間で画面遷移アニメーションを作成する手順は次のとおりです。
- テーマでウィンドウ コンテンツ遷移を有効にします。
- スタイルで共有要素遷移を指定します。
- 遷移を XML リソースとして定義します。
android:transitionName
属性を使用して、両方のレイアウトの共有要素に共通名を割り当てます。ActivityOptions.makeSceneTransitionAnimation()
関数を使用する
Kotlin
// Get the element that receives the click event val imgContainerView = findViewById<View>(R.id.img_container) // Get the common element for the transition in this activity val androidRobotView = findViewById<View>(R.id.image_small) // Define a click listener imgContainerView.setOnClickListener( { val intent = Intent(this, Activity2::class.java) // Create the transition animation - the images in the layouts // of both activities are defined with android:transitionName="robot" val options = ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, "robot") // Start the new activity startActivity(intent, options.toBundle()) })
Java
// Get the element that receives the click event final View imgContainerView = findViewById(R.id.img_container); // Get the common element for the transition in this activity final View androidRobotView = findViewById(R.id.image_small); // Define a click listener imgContainerView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(this, Activity2.class); // Create the transition animation - the images in the layouts // of both activities are defined with android:transitionName="robot" ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, "robot"); // Start the new activity startActivity(intent, options.toBundle()); } });
コードで生成する共有動的ビューの場合は、View.setTransitionName()
関数を使用して、両方のアクティビティで共通の要素名を指定します。
2 番目のアクティビティが終了したときにシーン遷移アニメーションを逆にするには、Activity.finish()
関数ではなく Activity.finishAfterTransition()
関数を呼び出します。
複数の共有要素を使ってアクティビティを開始する
複数の共有要素を持つ 2 つのアクティビティ間でシーン遷移アニメーションを作成するには、android:transitionName
属性を使用して両方のレイアウトで共有要素を定義するか、両方のアクティビティで View.setTransitionName()
関数を使用して、次のように ActivityOptions
オブジェクトを作成します。
Kotlin
// Rename the Pair class from the Android framework to avoid a name clash import android.util.Pair as UtilPair ... val options = ActivityOptions.makeSceneTransitionAnimation(this, UtilPair.create(view1, "agreedName1"), UtilPair.create(view2, "agreedName2"))
Java
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(view1, "agreedName1"), Pair.create(view2, "agreedName2"));