Compose の予測型「戻る」

予測型「戻る」は、ジェスチャー ナビゲーション機能で、ユーザーは「戻る」スワイプで移動する先をプレビューできます。予測型「戻る」は Compose とシームレスに統合され、アプリのナビゲーション エクスペリエンスを強化します。アプリ内で「戻る」操作を行うと、スムーズで直感的な遷移が実現されます。図 1 は、SociaLite サンプルアプリでこの機能がどのように動作するかを示しています。

このガイドでは、予測型「戻る」機能を使用して次の操作を行う方法について説明します。

• 予測型「戻る」ジェスチャーをオプトインする
• デフォルトのシステム アニメーションを有効にする
• Navigation Compose で予測型「戻る」を有効にする
• 共有要素遷移と統合する
• マテリアル Compose コンポーネントで予測型「戻る」をサポートする
• PredictiveBackHandler で手動でアクセスの進行状況を確認する
• 予測型「戻る」ジェスチャーのアニメーションをテストする

予測型「戻る」ジェスチャーをオプトインする

予測型「戻る」アニメーションを有効にするには、予測型「戻る」ジェスチャーのサポートをオプトインする必要があります。オプトインするには、AndroidManifest.xml ファイル内の <application> タグまたは個々の <activity> タグに android:enableOnBackInvokedCallback="true を追加します。

デフォルトのシステム アニメーションを有効にする

ホームに戻る、アクティビティ間、タスク間のシステム アニメーションは、サポートされている戻る処理 API に移行したアプリの場合、Android 15 以降のデバイスで利用できます。

• ホームに戻る: ホーム画面に戻ります。
• アクティビティ間: アプリ内のアクティビティ間の遷移。
• クロスタスク: タスク間の遷移。

これらのアニメーションは、Android 15 以降ではデフォルトで有効になっています。Android 13 または 14 を搭載したデバイスでは、ユーザーは開発者向けオプションで有効にできます。

システム アニメーションを取得するには、AndroidX Activity の依存関係を 1.6.0 以降に更新します。

Navigation Compose で予測型「戻る」を有効にする

Navigation Compose で予測型「戻る」を使用するには、navigation-compose 2.8.0 ライブラリ以降を使用していることを確認してください。

ユーザーが後方にスワイプすると、ナビゲーション Compose で画面間のクロスフェードが自動的に実行されます。

ナビゲーション時に、popEnterTransition と popExitTransition を使用してカスタム遷移を作成できます。これらの修飾子を NavHost に適用すると、画面の開始と終了のアニメーション方法を定義できます。これらを使用して、スケーリング、フェード、スライドなどのさまざまな効果を作成できます。

この例では、popExitTransition 内で scaleOut を使用して、ユーザーが戻る操作を行うと終了画面を縮小します。また、transformOrigin パラメータは、スケーリング アニメーションが行われるポイントを決定します。デフォルトでは、画面の中央（0.5f, 0.5f）です。この値を調整して、別のポイントからスケーリングを開始できます。

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

このコードの結果は次のようになります。

popEnterTransition と popExitTransition は、たとえば「戻る」ジェスチャーでバックスタックをポップする際のアニメーションを制御します。enterTransition と exitTransition を使用して、予測型「戻る」だけでなく、一般的なコンポーザブルの開始と終了のアニメーションを定義することもできます。enterTransition と exitTransition のみを設定した場合は、通常のナビゲーションとバックスタックのポップアップの両方に使用されます。ただし、popEnterTransition と popExitTransition を使用すると、戻るナビゲーションに固有のアニメーションを作成できます。

共有要素遷移と統合する

共有要素遷移は、共有コンテンツを含むコンポーザブル間にスムーズな視覚的なつながりを提供します。これは、ナビゲーションによく使用されます。

Navigation Compose で共有要素を使用するには、共有要素による予測型「戻る」をご覧ください。

マテリアル Compose コンポーネントで予測型「戻る」をサポートする

マテリアル Compose ライブラリの多くのコンポーネントは、予測型「戻る」ジェスチャーとシームレスに動作するように設計されています。これらのコンポーネントで予測型「戻る」アニメーションを有効にするには、最新の Material3 依存関係（androidx.compose.material3:material3-*:1.3.0 以降）をプロジェクトに含めます。

予測型「戻る」アニメーションをサポートするマテリアル コンポーネントには、次のようなものがあります。

• SearchBar
• ModalBottomSheet
• ModalDrawerSheet/DismissibleDrawerSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

SearchBar と ModalBottomSheet は、予測型「戻る」ジェスチャーで自動的にアニメーション化されます。ModalNavigationDrawer、ModalDrawerSheet、DismissibleDrawerSheet、DismissibleNavigationDrawer では、drawerState をそれぞれのシート コンテンツ コンポーザブルに渡す必要があります。

PredictiveBackHandler で手動でアクセスの進行状況を確認する

Jetpack Compose の PredictiveBackHandler[5] コンポーザブルを使用すると、戻るジェスチャーをインターセプトしてその進行状況にアクセスできます。ユーザーの「戻る」ジェスチャーにリアルタイムで反応し、ユーザーのスワイプ量に基づいてカスタム アニメーションや動作を作成できます。

PredictiveBackHandler を使用するには、androidx.activity:activity:1.6.0 以降を使用していることを確認してください。

PredictiveBackHandler は、戻るジェスチャーの進行状況を表すイベントを出力する Flow<BackEventCompat> を提供します。各イベントには次のような情報が含まれます。

• progress: 戻るジェスチャーの進行状況を示す 0 ～ 1 の浮動小数点値（0 = ジェスチャーの開始、1 = ジェスチャーの完了）。
• touchX と touchY: タッチイベントの X 座標と Y 座標。

次のスニペットは、PredictiveBackHandler の基本的な使用方法を示しています。

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

例: ナビゲーション ドロワーと統合する

この例では、PredictiveBackHandler を使用してカスタムのアプリ内アニメーションを実装し、JetLagged で「戻る」ジェスチャーに応答してナビゲーション ドロワーをスムーズに操作する方法を示します。

この例では、PredictiveBackHandler は次の目的で使用されます。

• 戻るジェスチャーの進行状況を追跡します。
• ジェスチャーの進行状況に基づいて、引き出しの translationX を更新します。
• velocityTracker を使用して、ジェスチャーが完了またはキャンセルされたときのジェスチャーの速度に基づいて、引き出しをスムーズに開くまたは閉じます。

予測型「戻る」ジェスチャーのアニメーションをテストする

Android 13 または Android 14 を引き続き使用している場合は、ホーム画面への戻りアニメーションをテストできます。

このアニメーションをテストする手順は次のとおりです。

1. デバイスで、[設定] > [システム] > [開発者向けオプション] に移動します。
2. [予測型「戻る」アニメーション] を選択します。
3. 更新したアプリを起動し、「戻る」ジェスチャーを使用して実際の動作を確認します。

Android 15 以降では、この機能はデフォルトで有効になっています。

参考情報

• 予測型「戻る」アニメーションを追加する Codelab
• Compose の高度なレイアウト アニメーションの動画