設定預測返回

如要啟用預測返回動畫,您必須選擇啟用預測返回手勢。如要選擇採用,請在 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 以上版本的程式庫。

使用者向後滑動時,Navigation Compose 會自動在畫面之間進行交叉淡出效果:

圖 2. SociaLite 中的預設交叉淡出應用程式內動畫。

在導覽時,您可以使用 popEnterTransitionpopExitTransition 建立自訂轉場效果。套用至 NavHost 時,這些修飾符可讓您定義進入畫面和退出畫面的動畫效果。您可以使用這些效果建立各種效果,例如縮放、淡出或滑動。

在這個範例中,scaleOut 會在 popExitTransition 中使用,在使用者返回時縮小退出畫面。此外,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,
)

這個程式碼會產生以下結果:

圖 3. SociaLite 中的自訂應用程式內動畫。

popEnterTransitionpopExitTransition 專門用於控制返回堆疊彈出時的動畫,例如透過返回手勢。您也可以使用 enterTransitionexitTransition 定義一般進入和離開可組合項的動畫,而不僅限於預測返回。如果您只設定 enterTransitionexitTransition,則系統會同時使用這兩者進行一般導覽和彈出返回堆疊。不過,您可以使用 popEnterTransitionpopExitTransition 為返回導覽建立獨特的動畫。

整合共用元素轉換

共用元素轉場可在含有共用內容的可組合項之間建立流暢的視覺連結,通常用於導覽。

圖 4. 支援預測返回手勢的 Navigation Compose 共用元素轉場效果。

如要搭配 Navigation Compose 使用共用元素,請參閱「使用共用元素的預測返回手勢」。

使用 Material Compose 元件支援預測返回功能

Material Compose 程式庫中的許多元件均可與預測返回手勢完美搭配運作。如要在這些元件中啟用預測返回動畫,請在專案中加入最新的 Material3 依附元件 (androidx.compose.material3:material3-*:1.3.0 以上)。

支援預測返回動畫的 Material 元件包括:

SearchBarModalBottomSheet 會自動顯示預測返回手勢動畫。ModalNavigationDrawerModalDrawerSheetDismissibleDrawerSheetDismissibleNavigationDrawer 需要將 drawerState 傳遞至各自的試算表內容可組合項。

測試預測返回手勢動畫

如果您仍使用 Android 13 或 Android 14,可以測試返回主畫面的動畫。

如要測試這個動畫,請按照下列步驟操作:

  1. 在裝置上,依序前往「設定」>「系統」>「開發人員選項」
  2. 選取「預測返回操作動畫」
  3. 啟動更新後的應用程式,然後使用返回手勢查看實際運作情形。

在 Android 15 以上版本中,這項功能預設為啟用。

其他資源