Share via

可折迭流覽

  • 發行項

可折迭流覽元件是建置在 Android 流覽元件之上的程式庫。 它可協助開發人員實作不同螢幕模式的片段流覽，或將現有的應用程式調整為可折迭瀏覽模式;

可折迭流覽元件包含三個主要部分：

  • 導覽Graph - 包含一個集中位置中所有導覽相關資訊的 XML 資源。 它與 Google 所提供的流覽元件相同。
  • FoldableNavHost - 空白容器，可顯示導覽圖表中的目的地。 可折迭流覽的實作是 FoldableNavHostFragment 。
  • FoldableNavController - 管理 內 FoldableNavHost 應用程式流覽的物件。

概觀

雙螢幕和可折迭裝置上的應用程式可以顯示在單一螢幕上，或跨越折迭功能。 第一次啟動應用程式時：

  • 在單一畫面中，只會顯示一個片段 (A) 。
  • 如果應用程式在折迭功能中轉譯，則第一個片段 (A) 會位於折迭的第一側，而折迭的另一側則會是空白。

從初始狀態，如果您流覽至另一個片段 (B) ，則會在結束畫面上開啟新的片段。

如果使用者流覽至第三個片段 (C) 它會顯示在結束畫面上，則會在開始畫面上移動先前的片段 (B) 。

  • 當應用程式從跨越到單一畫面時，結束畫面中的所有片段都會移至開始畫面， (C) 會出現在頂端。
  • 當應用程式從單一螢幕移至跨越折迭或轉軸，而流覽堆疊有兩個以上的片段時，最後一個片段將會移至結束畫面。

Six different dual-screen examples demonstrating how fragments A, B, and C would appear after different navigation steps

變更動作的顯示區域目的地

您可以使用導覽圖表中的 屬性來指定新片段的顯示 launchScreen 位置。 的 launchScreen 可能值為：

  • start - 片段會在第一個畫面上開啟
  • end - 片段會在第二個畫面上開啟
  • both - 片段將涵蓋整個顯示區域

此導覽 XML 範例示範如何使用此屬性：

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/home"
    app:startDestination="@+id/titleScreen">

    <fragment
        android:id="@+id/titleScreen"
        android:name="com.microsoft.device.dualscreen.navigation.sample.homescreen.TitleFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_title">
        <action
            android:id="@+id/action_title_to_about"
            app:launchScreen="end"
            app:destination="@id/aboutScreen"
            app:enterAnim="@anim/slide_in_right"
            app:exitAnim="@anim/slide_out_left"
            app:popEnterAnim="@anim/slide_in_right"
            app:popExitAnim="@anim/slide_out_left" />
    </fragment>
</navigation>

重要

此屬性只能藉由直接編輯 XML 檔案來變更。 您無法使用 Android Studio 編輯器修改它。

範例

您可以下載此 導覽範例應用程式 ，以查看所有這些行為。

如何將程式庫匯入您的專案中

  1. 將相依性新增至模組層級 build.gradle 檔案：

    dependencies {
   def nav_version = "1.0.0-alpha3"
   implementation "com.microsoft.device.dualscreen:navigation-fragment-ktx:$nav_version"
   implementation "com.microsoft.device.dualscreen:navigation-ui-ktx:$nav_version"
}

  1. 如果您的專案是使用 Java 建立的，則必須將 kotlin-stdlib 相依性新增至模組層級 build.gradle 檔案。 (這是因為部分程式庫是使用 Kotlin.) 

    dependencies {
   implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
}

這些元件建置在 Google 提供的導覽元件之上，因此Foldable-Navigation程式庫包含該元件的相依性。

建立導覽圖表

流覽圖表是 XML 資源檔，其中包含您所有應用程式的流覽路徑，使用目的地和動作。 流覽圖表可以透過 Android Studio 導覽編輯器或透過 XML 編輯器手動建立。 您可以在 建立導覽圖表中找到詳細資訊。

將 NavHost 新增至活動

可折迭流覽元件是針對具有一個主要活動和多個片段目的地的應用程式所設計。 主要活動與導覽圖表相關聯，且會包含 FoldableNavHostFragment 負責交換片段目的地的 。 如果您的應用程式會有一個以上的活動，則每個活動都會有自己的導覽圖表。

這是主要活動 XML 配置檔案的範例，示範如何設定 app:navGraph 屬性：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/surface_duo_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.FoldableNavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>

FoldableNavHost也可以以程式設計方式設定 ：

val navHostFragment = FoldableNavHostFragment.create(navGraphId)
fragmentManager.beginTransaction()
    .add(containerId, navHostFragment, fragmentTag)
    .commitNow()

您可以深入瞭解如何將 新增 FoldableNavHostNavHost 新增至活動。

此程式碼片段可用來根據可折迭流覽規則來巡覽片段：

class SomeFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        view.findViewById<Button>(R.id.btn_next).setOnClickListener {
            findFoldableNavController().navigate(R.id.action_next)
        }
    }
}

使用 FoldableNavigationUI 更新 UI 元件

FoldableNavigationUI在 Jetpack 導覽元件中是類似的元件 NavigationUI ，其中包含使用頂端應用程式行、導覽選單和底部導覽來管理流覽的靜態方法。 您可以找到詳細資訊

FoldableNavigationUI 包含下列方法，類似于 所提供的 NavigationUI 方法：

// same method name, with foldable parameter
boolean onNavDestinationSelected(MenuItem item, FoldableNavController navController)
boolean navigateUp(FoldableNavController navController, Openable openableLayout)
boolean navigateUp(FoldableNavController navController, FoldableAppBarConfiguration configuration)
// method name changed to reflect foldable navigation
void setupActionBarWithFoldableNavController(AppCompatActivity activity, FoldableNavController navController)
void setupActionBarWithFoldableNavController(AppCompatActivity activity, FoldableNavController navController, Openable openableLayout)
void setupActionBarWithFoldableNavController(AppCompatActivity activity, FoldableNavController navController, FoldableAppBarConfiguration configuration)
void setupWithFoldableNavController(Toolbar toolbar, FoldableNavController navController)
void setupWithFoldableNavController(Toolbar toolbar, FoldableNavController navController, Openable openableLayout)
void setupWithFoldableNavController(Toolbar toolbar, FoldableNavController navController, FoldableAppBarConfiguration configuration)
void setupWithFoldableNavController(CollapsingToolbarLayout collapsingToolbarLayout, Toolbar toolbar, FoldableNavController navController)
void setupWithFoldableNavController(CollapsingToolbarLayout collapsingToolbarLayout, Toolbar toolbar, FoldableNavController navController, Openable openableLayout)
void setupWithFoldableNavController(CollapsingToolbarLayout collapsingToolbarLayout, Toolbar toolbar, FoldableNavController navController, FoldableAppBarConfiguration configuration)
void setupWithFoldableNavController(NavigationView navigationView, FoldableNavController navController)
void setupWithFoldableNavController(BottomNavigationView bottomNavigationView, FoldableNavController navController)

將現有的應用程式遷移至可折迭流覽

使用 Google 提供的導覽元件 的現有應用程式可以遵循下列步驟來新增可折迭功能：

  1. 藉由變更 ，而不是 FoldableNavHostFragmentNavHostFragment 在片段容器檢視中使用

    <androidx.fragment.app.FragmentContainerView
     android:id="@+id/nav_host_fragment"
     android:name="androidx.navigation.NavHostFragment"

    to

    <androidx.fragment.app.FragmentContainerView
     android:id="@+id/nav_host_fragment"
     android:name="androidx.navigation.FoldableNavHostFragment"

  2. 使用 findFoldableNavController 來取得 的 實例 FoldableNavController ，並藉由變更來流覽流覽圖表

    findNavController().navigate(R.id.action_next)

    to

    findFoldableNavController().navigate(R.id.action_next)

  3. 變更 ，而不是 NavigationUI 使用 FoldableNavigationUI 。

    val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val navController = navHostFragment.navController
val appBarConfiguration = AppBarConfiguration(navController.graph)
setupActionBarWithNavController(navController, appBarConfiguration)

    至

    val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as FoldableNavHostFragment
val navController = navHostFragment.navController
val appBarConfiguration = FoldableAppBarConfiguration(navController.graph)
setupActionBarWithFoldableNavController(navController, appBarConfiguration)