Resep UI Umum

Resep ini menunjukkan cara menerapkan pola UI navigasi umum dengan panel navigasi bawah dan beberapa data sebelumnya, di mana setiap tab di panel navigasi memiliki histori navigasinya sendiri.

Cara kerjanya

Contoh ini memiliki tiga tujuan tingkat teratas: Home, ChatList, dan Camera. Tujuan ChatList juga memiliki sub-rute, ChatDetail.

TopLevelBackStack

Inti dari resep ini adalah class TopLevelBackStack, yang bertanggung jawab untuk mengelola status navigasi. Cara kerjanya sebagai berikut:

  • Ini mempertahankan tumpukan kembali terpisah untuk setiap tujuan tingkat atas (tab).
  • Tindakan ini melacak tujuan tingkat teratas yang saat ini dipilih.
  • Class ini menyediakan data sebelumnya yang disatukan dan diratakan yang dapat digunakan oleh composable NavDisplay. Tumpukan kembali yang diratakan ini adalah kombinasi dari tumpukan kembali individual dari semua tab.

Struktur UI

UI dibuat menggunakan composable Scaffold, dengan NavigationBar sebagai bottomBar.

  • NavigationBar menampilkan item untuk setiap tujuan tingkat teratas. Saat item diklik, item akan memanggil topLevelBackStack.addTopLevel untuk beralih ke tab yang sesuai, dengan mempertahankan histori navigasi setiap tab.
  • Composable NavDisplay ditempatkan di area konten Scaffold. Komponen ini bertanggung jawab untuk menampilkan layar saat ini berdasarkan data sebelumnya yang diratakan yang disediakan oleh TopLevelBackStack.

Pendekatan ini memungkinkan pola navigasi umum di mana pengguna dapat beralih di antara berbagai bagian aplikasi, dan setiap bagian mempertahankan histori navigasinya sendiri.

Mempertahankan Status

Penting untuk diperhatikan cara status navigasi dikelola dalam resep ini. Saat pengguna keluar dari tujuan tingkat teratas (misalnya, dengan menekan tombol kembali hingga mereka kembali ke tab sebelumnya), seluruh histori navigasi untuk tujuan tersebut akan dihapus. Status tidak disimpan. Saat pengguna kembali ke tab tersebut nanti, mereka akan memulai dari layar awalnya.

Catatan: Dalam contoh ini, rute Home dapat berpindah di atas rute ChatList dan Camera, yang berarti menavigasi kembali dari Home tidak harus keluar dari aplikasi. Aplikasi akan keluar saat pengguna kembali dari satu rute tingkat teratas yang tersisa dalam back stack.

/*
 * Copyright 2025 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.example.nav3recipes.commonui

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Face
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.lifecycle.compose.dropUnlessResumed
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.ui.NavDisplay
import com.example.nav3recipes.content.ContentBlue
import com.example.nav3recipes.content.ContentGreen
import com.example.nav3recipes.content.ContentPurple
import com.example.nav3recipes.content.ContentRed
import com.example.nav3recipes.ui.setEdgeToEdgeConfig

private sealed interface TopLevelRoute {
    val icon: ImageVector
}
private data object Home : TopLevelRoute { override val icon = Icons.Default.Home }
private data object ChatList : TopLevelRoute { override val icon = Icons.Default.Face }
private data object ChatDetail
private data object Camera : TopLevelRoute { override val icon = Icons.Default.PlayArrow }

private val TOP_LEVEL_ROUTES : List<TopLevelRoute> = listOf(Home, ChatList, Camera)

class CommonUiActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        setEdgeToEdgeConfig()
        super.onCreate(savedInstanceState)
        setContent {
            val topLevelBackStack = remember { TopLevelBackStack<Any>(Home) }

            Scaffold(
                bottomBar = {
                    NavigationBar {
                        TOP_LEVEL_ROUTES.forEach { topLevelRoute ->

                            val isSelected = topLevelRoute == topLevelBackStack.topLevelKey
                            NavigationBarItem(
                                selected = isSelected,
                                onClick = {
                                    topLevelBackStack.addTopLevel(topLevelRoute)
                                },
                                icon = {
                                    Icon(
                                        imageVector = topLevelRoute.icon,
                                        contentDescription = null
                                    )
                                }
                            )
                        }
                    }
                }
            ) { _ ->
                NavDisplay(
                    backStack = topLevelBackStack.backStack,
                    onBack = { topLevelBackStack.removeLast() },
                    entryProvider = entryProvider {
                        entry<Home>{
                            ContentRed("Home screen")
                        }
                        entry<ChatList>{
                            ContentGreen("Chat list screen"){
                                Button(onClick = dropUnlessResumed {
                                    topLevelBackStack.add(ChatDetail)
                                }) {
                                    Text("Go to conversation")
                                }
                            }
                        }
                        entry<ChatDetail>{
                            ContentBlue("Chat detail screen")
                        }
                        entry<Camera>{
                            ContentPurple("Camera screen")
                        }
                    },
                )
            }
        }
    }
}

class TopLevelBackStack<T: Any>(startKey: T) {

    // Maintain a stack for each top level route
    private var topLevelStacks : LinkedHashMap<T, SnapshotStateList<T>> = linkedMapOf(
        startKey to mutableStateListOf(startKey)
    )

    // Expose the current top level route for consumers
    var topLevelKey by mutableStateOf(startKey)
        private set

    // Expose the back stack so it can be rendered by the NavDisplay
    val backStack = mutableStateListOf(startKey)

    private fun updateBackStack() =
        backStack.apply {
            clear()
            addAll(topLevelStacks.flatMap { it.value })
        }

    fun addTopLevel(key: T){

        // If the top level doesn't exist, add it
        if (topLevelStacks[key] == null){
            topLevelStacks.put(key, mutableStateListOf(key))
        } else {
            // Otherwise just move it to the end of the stacks
            topLevelStacks.apply {
                remove(key)?.let {
                    put(key, it)
                }
            }
        }
        topLevelKey = key
        updateBackStack()
    }

    fun add(key: T){
        topLevelStacks[topLevelKey]?.add(key)
        updateBackStack()
    }

    fun removeLast(){
        val removedKey = topLevelStacks[topLevelKey]?.removeLastOrNull()
        // If the removed key was a top level key, remove the associated top level stack
        topLevelStacks.remove(removedKey)
        topLevelKey = topLevelStacks.keys.last()
        updateBackStack()
    }
}