導覽元件可讓您為動作新增屬性動畫和檢視動畫。如要自行建立動畫,請參閱「動畫資源」。
導覽也提供多種預設動畫,協助您踏出第一步。如要為動作新增動畫,請按照下列步驟操作:
- 在導覽編輯器中,按一下要加上動畫的動作。
- 在「Attributes」(屬性) 面板的「Animations」(動畫) 部分中,找到您要新增的動畫,然後按一下旁邊的下拉式選單箭頭。您可以選擇下列類型:
- 進入到達網頁
- 離開到達網頁
- 透過「彈出動作」(在瀏覽時將其他到達網頁從返回堆疊中彈出的動作) 進入到達網頁。
- 透過彈出動作離開到達網頁
- 從畫面上顯示的專案動畫清單中選擇動畫。

新增動畫後,按一下「Text」(文字) 分頁標籤切換至 XML 文字檢視區塊。動畫的 XML 現在會顯示在對應的 <action>
元素中。在以下範例中,specifyAmountFragment
是 confirmationAction
動作的來源到達網頁:
<fragment android:id="@+id/specifyAmountFragment" android:name="com.example.buybuddy.buybuddy.SpecifyAmountFragment" android:label="fragment_specify_amount" tools:layout="@layout/fragment_specify_amount"> <action android:id="@+id/confirmationAction" app:destination="@id/confirmationFragment" app:enterAnim="@anim/slide_in_right" app:exitAnim="@anim/slide_out_left" app:popEnterAnim="@anim/slide_in_left" app:popExitAnim="@anim/slide_out_right" /> </fragment>
新增不同到達網頁之間的共用元素轉換
如果有兩個到達網頁共用單一檢視,您可以使用「共用元素轉換」,定義從其中一個到達網頁瀏覽至另一個到達網頁時的檢視轉換方式。共用元素轉換是轉換架構的一部分。
共用元素是以程式輔助方式 (而非透過導覽 XML 檔案) 提供。活動與片段的到達網頁有各自的 Navigator.Extras
介面子類別,這個子類別可接受其他導覽選項 (包括共用元素)。您可以在呼叫 navigate()
時傳遞這些 Extras
。
片段到達網頁的共用元素轉換
FragmentNavigator.Extras
類別可讓您根據轉換名稱,將某個到達網頁的共用元素對應至下一個到達網頁,原理與 FragmentTransaction.addSharedElement()
類似。接著,您可以將額外內容傳遞至 navigate()
,如以下範例所示:
Kotlin
val extras = FragmentNavigatorExtras(view1 to "hero_image") view.findNavController().navigate( R.id.confirmationAction, null, // Bundle of args null, // NavOptions extras)
Java
FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder() .addSharedElement(view1, "hero_image") .build(); Navigation.findNavController(view).navigate( R.id.details, null, // Bundle of args null, // NavOptions extras);
活動到達網頁的共用元素轉換
活動仰賴 ActivityOptionsCompat
來控制共用元素轉換,如下方範例所示 (詳情請見「使用共用元素啟動活動」說明文件):
Kotlin
// Rename the Pair class from the Android framework to avoid a name clash import android.util.Pair as UtilPair ... val options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, UtilPair.create(view1, "hero_image")) val extras = ActivityNavigatorExtras(options) view.findNavController().navigate( R.id.details, null, // Bundle of args null, // NavOptions extras)
Java
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(view1, "hero_image")); ActivityNavigatorExtras extras = new ActivityNavigatorExtras.Builder() .setActivityOptions(options) .build(); Navigation.findNavController(view).navigate( R.id.details, null, // Bundle of args null, // NavOptions extras);
為活動轉換加上彈出動畫
當 Activity
為瀏覽起始點或到達網頁時,系統不會自動套用彈出動畫。您必須改從應出現動畫的目標 Activity
到達網頁呼叫 ActivityNavigator.applyPopAnimationsToPendingTransition()
:
Kotlin
override fun finish() { super.finish() ActivityNavigator.applyPopAnimationsToPendingTransition(this) }
Java
@Override public void finish() { super.finish(); ActivityNavigator.applyPopAnimationsToPendingTransition(this); }