Membuat tata letak kustom menggunakan Scene

Navigation 3 memperkenalkan sistem yang canggih dan fleksibel untuk mengelola alur UI aplikasi Anda melalui Scene. Scene memungkinkan Anda membuat tata letak yang sangat disesuaikan, beradaptasi dengan berbagai ukuran layar, dan mengelola pengalaman multi-panel yang kompleks dengan lancar.

Memahami Adegan

Di Navigation 3, Scene adalah unit dasar yang merender satu atau beberapa instance NavEntry. Anggap Scene sebagai status visual atau bagian UI yang berbeda yang dapat berisi dan mengelola tampilan konten dari data sebelumnya.

Setiap instance Scene diidentifikasi secara unik oleh key dan class Scene itu sendiri. ID unik ini sangat penting karena mendorong animasi tingkat atas saat Scene berubah.

Antarmuka Scene memiliki properti berikut:

  • key: Any: ID unik untuk instance Scene spesifik ini. Kunci ini, yang digabungkan dengan class Scene, memastikan keunikan, terutama untuk tujuan animasi.
  • entries: List<NavEntry<T>>: Ini adalah daftar objek NavEntry yang akan ditampilkan oleh Scene. Yang penting, jika NavEntry yang sama ditampilkan di beberapa Scenes selama transisi (misalnya, dalam transisi elemen bersama), kontennya hanya akan dirender oleh target Scene terbaru yang menampilkannya.
  • previousEntries: List<NavEntry<T>>: Properti ini menentukan NavEntry yang akan dihasilkan jika tindakan "kembali" terjadi dari Scene saat ini. Hal ini penting untuk menghitung status kembali prediktif yang tepat, sehingga NavDisplay dapat mengantisipasi dan bertransisi ke status sebelumnya yang benar, yang mungkin berupa Scene dengan class, kunci, atau keduanya yang berbeda.
  • content: @Composable () -> Unit: Ini adalah fungsi composable tempat Anda menentukan cara Scene merender entries-nya dan elemen UI di sekitarnya yang khusus untuk Scene tersebut.
  • metadata: Map<String, Any>: Memberikan informasi khusus scene ke komponen library lain seperti NavDisplay. Secara default, menampilkan metadata dari NavEntry terakhir di entries.

Mengimplementasikan equals dan hashCode di Scene kustom

Implementasi Scene kustom harus menerapkan equals dan hashCode dengan benar untuk mendukung hal berikut:

  • Transisi status scene: Setiap kali scene dihitung oleh daftar strategi scene, NavDisplay akan memeriksa kesetaraan scene baru dan scene sebelumnya. Jika mendeteksi perubahan, class ini akan memperbarui SeekableTransition yang digunakan untuk bertransisi antar-scene, yang pada gilirannya akan memengaruhi status siklus proses scene.
  • Pengelolaan overlay: Untuk OverlayScene (seperti dialog), NavDisplay menggunakan objek scene itu sendiri sebagai key untuk melacak siklus proses overlay dan animasi keluar.

Pastikan semua properti yang menentukan konten tampilan, seperti key, entries, dan previousEntries, disertakan dalam implementasi equals dan hashCode. Umumnya, hindari menyertakan callback (seperti onBack) dalam implementasi metode ini karena dapat mengubah instance tanpa mengubah status scene logis.

Memahami strategi adegan

SceneStrategy adalah mekanisme yang menentukan cara daftar NavEntry tertentu dari data sebelumnya harus diatur dan ditransisikan ke Scene. Pada dasarnya, saat ditampilkan dengan entri data sebelumnya saat ini, SceneStrategy akan mengajukan dua pertanyaan penting kepada dirinya sendiri:

  1. Dapatkah saya membuat Scene dari entri ini? Jika SceneStrategy menentukan bahwa ia dapat menangani NavEntry yang diberikan dan membentuk Scene yang bermakna (misalnya, dialog atau tata letak multi-panel), ia akan melanjutkan. Jika tidak, metode ini akan menampilkan null, sehingga strategi lain berkesempatan untuk membuat Scene.
  2. Jika demikian, bagaimana cara mengatur entri tersebut ke dalam Scene? Setelah SceneStrategy berkomitmen untuk menangani entri, ia akan bertanggung jawab untuk membuat Scene dan menentukan cara menampilkan NavEntry yang ditentukan dalam Scene tersebut.

Inti dari SceneStrategy adalah metode calculateScene:

@Composable
public fun calculateScene(
    entries: List<NavEntry<T>>,
    onBack: (count: Int) -> Unit,
): Scene<T>?

Metode ini adalah fungsi ekstensi pada SceneStrategyScope yang mengambil List<NavEntry<T>> saat ini dari data sebelumnya. Metode ini harus menampilkan Scene<T> jika berhasil membentuknya dari entri yang disediakan, atau null jika tidak berhasil.

SceneStrategyScope bertanggung jawab untuk mempertahankan argumen opsional apa pun yang mungkin diperlukan SceneStrategy, seperti callback onBack.

Cara kerja Scene dan strategi scene bersama-sama

NavDisplay adalah composable pusat yang mengamati data sebelumnya dan menggunakan satu atau beberapa SceneStrategy untuk menentukan dan merender Scene yang sesuai.

Parameter sceneStrategies NavDisplay mengharapkan daftar instance SceneStrategy yang bertanggung jawab untuk menghitung Scene yang akan ditampilkan. Jika tidak ada Scene yang dihitung oleh strategi yang disediakan, NavDisplay akan otomatis kembali menggunakan SinglePaneSceneStrategy secara default.

Berikut perincian interaksinya:

  • Saat Anda menambahkan atau menghapus kunci dari data sebelumnya (misalnya, menggunakan backStack.add() atau backStack.removeLastOrNull()), NavDisplay akan mengamati perubahan ini.
  • NavDisplay meneruskan daftar NavEntry saat ini (yang berasal dari kunci data sebelumnya) ke sceneStrategies yang dikonfigurasi secara berurutan, dengan memanggil calculateScene pada setiap kunci hingga Scene ditampilkan.
  • Saat SceneStrategy berhasil menampilkan Scene, NavDisplay akan merender content dari Scene tersebut. NavDisplay juga mengelola animasi dan kembali prediktif berdasarkan properti Scene.

Contoh: Tata letak panel tunggal (perilaku default)

Tata letak kustom paling sederhana yang dapat Anda miliki adalah tampilan panel tunggal, yang merupakan perilaku default jika tidak ada SceneStrategy lain yang diprioritaskan.

data class SinglePaneScene<T : Any>(
    override val key: Any,
    val entry: NavEntry<T>,
    override val previousEntries: List<NavEntry<T>>,
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(entry)
    override val content: @Composable () -> Unit = { entry.Content() }
}

/**
 * A [SceneStrategy] that always creates a 1-entry [Scene] simply displaying the last entry in the
 * list.
 */
public class SinglePaneSceneStrategy<T : Any> : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? =
        SinglePaneScene(
            key = entries.last().contentKey,
            entry = entries.last(),
            previousEntries = entries.dropLast(1)
        )
}

Contoh: Tata letak daftar-detail dasar (Scene dan strategi kustom)

Contoh ini menunjukkan cara membuat tata letak daftar-detail yang diaktifkan berdasarkan dua kondisi:

  1. Lebar jendela cukup lebar untuk mendukung dua panel (yaitu, minimal WIDTH_DP_MEDIUM_LOWER_BOUND).
  2. Data sebelumnya berisi entri yang telah mendeklarasikan dukungannya untuk ditampilkan dalam tata letak daftar-detail menggunakan metadata tertentu.

Cuplikan berikut adalah kode sumber untuk ListDetailScene.kt dan berisi ListDetailScene dan ListDetailSceneStrategy:

// --- ListDetailScene ---
/**
 * A [Scene] that displays a list and a detail [NavEntry] side-by-side in a 40/60 split.
 *
 */
data class ListDetailScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val listEntry: NavEntry<T>,
    val detailEntry: NavEntry<T>,
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(listEntry, detailEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(0.4f)) {
                listEntry.Content()
            }
            Column(modifier = Modifier.weight(0.6f)) {
                detailEntry.Content()
            }
        }
    }
}

@Composable
fun <T : Any> rememberListDetailSceneStrategy(): ListDetailSceneStrategy<T> {
    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

    return remember(windowSizeClass) {
        ListDetailSceneStrategy(windowSizeClass)
    }
}

// --- ListDetailSceneStrategy ---
/**
 * A [SceneStrategy] that returns a [ListDetailScene] if the window is wide enough, the last item
 * is the backstack is a detail, and before it, at any point in the backstack is a list.
 */
class ListDetailSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {

    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {

        if (!windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
            return null
        }

        val detailEntry =
            entries.lastOrNull()?.takeIf { it.metadata.contains(DetailKey) } ?: return null
        val listEntry = entries.findLast { it.metadata.contains(ListKey) } ?: return null

        // We use the list's contentKey to uniquely identify the scene.
        // This allows the detail panes to be displayed instantly through recomposition, rather than
        // having NavDisplay animate the whole scene out when the selected detail item changes.
        val sceneKey = listEntry.contentKey

        return ListDetailScene(
            key = sceneKey,
            previousEntries = entries.dropLast(1),
            listEntry = listEntry,
            detailEntry = detailEntry
        )
    }

    object ListKey : NavMetadataKey<Boolean>
    object DetailKey : NavMetadataKey<Boolean>
    companion object {

        /**
         * Helper function to add metadata to a [NavEntry] indicating it can be displayed
         * as a list in the [ListDetailScene].
         */
        fun listPane() = metadata {
            put(ListKey, true)
        }

        /**
         * Helper function to add metadata to a [NavEntry] indicating it can be displayed
         * as a list in the [ListDetailScene].
         */
        fun detailPane() = metadata {
            put(DetailKey, true)
        }
    }
}

Untuk menggunakan ListDetailSceneStrategy ini di NavDisplay, ubah panggilan entryProvider untuk menyertakan metadata ListDetailScene.listPane() untuk entri yang ingin Anda tampilkan sebagai tata letak daftar, dan ListDetailScene.detailPane() untuk entri yang ingin Anda tampilkan sebagai tata letak detail. Kemudian, berikan ListDetailSceneStrategy() sebagai sceneStrategy, dengan mengandalkan penggantian default untuk skenario panel tunggal:

// Define your navigation keys
@Serializable
data object ConversationList : NavKey

@Serializable
data class ConversationDetail(val id: String) : NavKey

@Composable
fun MyAppContent() {
    val backStack = rememberNavBackStack(ConversationList)
    val listDetailStrategy = rememberListDetailSceneStrategy<NavKey>()

    NavDisplay(
        backStack = backStack,
        onBack = { backStack.removeLastOrNull() },
        sceneStrategies = listOf(listDetailStrategy),
        entryProvider = entryProvider {
            entry<ConversationList>(
                metadata = ListDetailSceneStrategy.listPane()
            ) {
                Column(modifier = Modifier.fillMaxSize()) {
                    Text(text = "I'm a Conversation List")
                    Button(onClick = { backStack.addDetail(ConversationDetail("123")) }) {
                        Text(text = "Open detail")
                    }
                }
            }
            entry<ConversationDetail>(
                metadata = ListDetailSceneStrategy.detailPane()
            ) {
                Text(text = "I'm a Conversation Detail")
            }
        }
    )
}

private fun NavBackStack<NavKey>.addDetail(detailRoute: ConversationDetail) {

    // Remove any existing detail routes, then add the new detail route
    removeIf { it is ConversationDetail }
    add(detailRoute)
}

Jika tidak ingin membuat scene daftar-detail sendiri, Anda dapat menggunakan scene daftar-detail Material, yang dilengkapi dengan detail yang sesuai dan dukungan untuk placeholder, seperti yang ditampilkan di bagian berikutnya.

Menampilkan konten daftar-detail dalam Adegan Adaptif Material

Untuk kasus penggunaan daftar-detail, artefak androidx.compose.material3.adaptive:adaptive-navigation3 menyediakan ListDetailSceneStrategy yang membuat Scene daftar-detail. Scene ini secara otomatis menangani pengaturan multi-panel yang kompleks (daftar, detail, dan panel tambahan) dan menyesuaikannya berdasarkan ukuran jendela dan status perangkat.

Untuk membuat Scene daftar-detail Material, ikuti langkah-langkah berikut:

  1. Tambahkan dependensi: Sertakan androidx.compose.material3.adaptive:adaptive-navigation3 dalam file build.gradle.kts project Anda.
  2. Tentukan entri Anda dengan metadata ListDetailSceneStrategy: Gunakan listPane(), detailPane(), dan extraPane() untuk menandai NavEntrys Anda agar ditampilkan di panel yang sesuai. Helper listPane() juga memungkinkan Anda menentukan detailPlaceholder saat tidak ada item yang dipilih.
  3. Gunakan rememberListDetailSceneStrategy(): Fungsi composable ini menyediakan ListDetailSceneStrategy yang telah dikonfigurasi sebelumnya dan dapat digunakan oleh NavDisplay.

Cuplikan berikut adalah contoh Activity yang menunjukkan penggunaan ListDetailSceneStrategy:

@Serializable
object ProductList : NavKey

@Serializable
data class ProductDetail(val id: String) : NavKey

@Serializable
data object Profile : NavKey

class MaterialListDetailActivity : ComponentActivity() {

    @OptIn(ExperimentalMaterial3AdaptiveApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Scaffold { paddingValues ->
                val backStack = rememberNavBackStack(ProductList)
                val listDetailStrategy = rememberListDetailSceneStrategy<NavKey>()

                NavDisplay(
                    backStack = backStack,
                    modifier = Modifier.padding(paddingValues),
                    onBack = { backStack.removeLastOrNull() },
                    sceneStrategies = listOf(listDetailStrategy),
                    entryProvider = entryProvider {
                        entry<ProductList>(
                            metadata = ListDetailSceneStrategy.listPane(
                                detailPlaceholder = {
                                    ContentYellow("Choose a product from the list")
                                }
                            )
                        ) {
                            ContentRed("Welcome to Nav3") {
                                Button(onClick = {
                                    backStack.add(ProductDetail("ABC"))
                                }) {
                                    Text("View product")
                                }
                            }
                        }
                        entry<ProductDetail>(
                            metadata = ListDetailSceneStrategy.detailPane()
                        ) { product ->
                            ContentBlue("Product ${product.id} ", Modifier.background(PastelBlue)) {
                                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                                    Button(onClick = {
                                        backStack.add(Profile)
                                    }) {
                                        Text("View profile")
                                    }
                                }
                            }
                        }
                        entry<Profile>(
                            metadata = ListDetailSceneStrategy.extraPane()
                        ) {
                            ContentGreen("Profile")
                        }
                    }
                )
            }
        }
    }
}

Gambar 1. Contoh konten yang berjalan di Adegan detail daftar Material.