Komponen Navigasi yang Dapat Dilipat - Dual-screen

Artikel
07/10/2023

Komponen navigasi yang dapat dilipat adalah pustaka yang dibangun di atas komponen navigasi Android. Ini membantu pengembang untuk menerapkan navigasi fragmen untuk mode layar yang berbeda atau untuk mengadaptasi aplikasi yang ada dengan pola Navigasi Yang Dapat Dilipat;

Komponen navigasi yang dapat dilipat terdiri dari tiga bagian utama:

Grafik Navigasi - Sumber daya XML yang berisi semua informasi terkait navigasi di satu lokasi terpusat. Ini sama dengan yang dari komponen navigasi yang disediakan oleh Google.
FoldableNavHost - Kontainer kosong yang menampilkan tujuan dari grafik navigasi Anda. Implementasi untuk navigasi yang dapat dilipat adalah FoldableNavHostFragment.
FoldableNavController - Objek yang mengelola navigasi aplikasi dalam FoldableNavHost.

Gambaran Umum

Aplikasi pada perangkat layar ganda dan dapat dilipat dapat ditampilkan pada satu layar atau membentang di seluruh fitur lipatan. Ketika aplikasi pertama kali dimulai:

Dalam layar tunggal hanya satu fragmen (A) yang akan terlihat.
Jika aplikasi dirender di seluruh fitur lipatan, fragmen pertama (A) akan berada di sisi pertama lipatan dan sisi lain lipatan akan kosong.

Dari status awal, jika Anda menavigasi ke fragmen lain (B) maka fragmen baru akan dibuka di layar akhir.

Jika pengguna menavigasi ke fragmen ketiga (C) itu akan ditampilkan di layar akhir, fragmen sebelumnya (B) akan dipindahkan pada layar mulai..

Saat aplikasi dipindahkan dari spanned ke satu layar, maka semua fragmen dari layar akhir dipindahkan ke layar mulai dan (C) akan muncul di atas.
Ketika aplikasi dipindahkan dari satu layar ke membentang di lipatan atau engsel, dan tumpukan navigasi memiliki lebih dari dua fragmen, maka fragmen terakhir akan dipindahkan ke layar akhir.

Ubah tujuan area tampilan untuk tindakan

Anda dapat menentukan di mana fragmen baru akan ditampilkan menggunakan launchScreen atribut di grafik navigasi. Nilai yang mungkin untuk launchScreen adalah:

start - fragmen akan dibuka pada layar pertama
end - fragmen akan dibuka pada layar kedua
both - fragmen akan mencakup seluruh area tampilan

Contoh XML navigasi ini menunjukkan cara menggunakan atribut ini:

<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>

Penting

Atribut ini hanya dapat diubah dengan mengedit file XML secara langsung. Ini tidak dapat dimodifikasi menggunakan Editor Android Studio.

Sampel

Anda dapat mengunduh aplikasi sampel navigasi ini untuk melihat semua perilaku ini.

Cara mengimpor pustaka ke dalam proyek Anda

Tambahkan dependensi ke file build.gradle tingkat modul:

Kotlin
Java

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"
}

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

Jika proyek Anda dibuat menggunakan Java, Anda harus menambahkan dependensi kotlin-stdlib ke file build.gradle tingkat modul Anda. (Ini karena beberapa bagian pustaka dibuat menggunakan Kotlin.)
```
dependencies {
   implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
}
```

Komponen-komponen ini dibangun di atas komponen Navigasi yang disediakan oleh Google dan dengan demikian pustaka Foldable-Navigation berisi dependensi untuk itu.

Grafik navigasi adalah file sumber daya xml dengan semua jalur navigasi aplikasi Anda, menggunakan tujuan dan tindakan. Grafik navigasi dapat dibuat melalui Editor Navigasi Android Studio atau secara manual melalui editor XML. Anda dapat menemukan info selengkapnya di Membuat grafik navigasi.

Menambahkan NavHost ke aktivitas

Komponen navigasi yang dapat dilipat dirancang untuk aplikasi dengan satu aktivitas utama dan beberapa tujuan fragmen. Aktivitas utama dikaitkan dengan grafik navigasi dan akan berisi FoldableNavHostFragment yang bertanggung jawab untuk menukar tujuan fragmen. Jika aplikasi Anda akan memiliki lebih dari satu aktivitas, maka setiap aktivitas akan memiliki grafik navigasinya sendiri.

Ini adalah contoh file tata letak XML aktivitas utama, memperlihatkan cara mengatur app:navGraph atribut:

<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 juga dapat diatur secara terprogram:

Kotlin
Java

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

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

Anda dapat mempelajari selengkapnya tentang cara menambahkan FoldableNavHost di Tambahkan NavHost ke aktivitas.

Menavigasi ke tujuan

Cuplikan kode ini dapat digunakan untuk menavigasi fragmen sesuai dengan aturan navigasi yang dapat dilipat:

Kotlin
Java

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)
        }
    }
}

public class SomeFragment extends Fragment {
    @Override
    public void onViewCreated( View view,  Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        view.findViewById(R.id.btn_next).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                FragmentKt.findFoldableNavController(SomeFragment.this).navigate(R.id.action_next);
            }
        });
    }
}

Memperbarui komponen UI dengan FoldableNavigationUI

FoldableNavigationUI adalah komponen serupa seperti NavigationUI di komponen Navigasi Jetpack dan berisi metode statis yang mengelola navigasi dengan bilah aplikasi atas, laci navigasi, dan navigasi bawah. Anda dapat menemukan informasi selengkapnya tentang

FoldableNavigationUI berisi metode berikut yang mirip dengan yang disediakan oleh 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)

Aplikasi yang sudah ada yang menggunakan komponen Navigasi yang disediakan oleh Google dapat menambahkan fungsionalitas yang dapat dilipat dengan mengikuti langkah-langkah berikut:

Gunakan FoldableNavHostFragment alih-alih NavHostFragment dalam tampilan kontainer fragmen dengan mengubah

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

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

Gunakan findFoldableNavController untuk mendapatkan instans untuk FoldableNavController dan menggunakannya untuk menavigasi di dalam grafik navigasi dengan mengubah
```
findNavController().navigate(R.id.action_next)
```
ke
```
findFoldableNavController().navigate(R.id.action_next)
```

Gunakan FoldableNavigationUI alih-alih NavigationUI, dengan mengubah

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)

Navigasi yang dapat dilipat