Common UI Recipe

Questa ricetta mostra come implementare un pattern comune dell'interfaccia utente di navigazione con una barra di navigazione in basso e più back stack, in cui ogni scheda della barra di navigazione ha la propria cronologia di navigazione.

Come funziona

Questo esempio ha tre destinazioni di primo livello: Home, ChatList e Camera. La destinazione ChatList ha anche una route secondaria, ChatDetail.

TopLevelBackStack

Il fulcro di questa ricetta è la classe TopLevelBackStack, responsabile della gestione dello stato di navigazione. Ecco come funziona:

  • Mantiene uno stack precedente separato per ogni destinazione di primo livello (scheda).
  • Tiene traccia della destinazione di primo livello attualmente selezionata.
  • Fornisce un singolo stack di back appiattito che può essere utilizzato dal componibile NavDisplay. Questo stack precedente appiattito è una combinazione degli stack precedenti individuali di tutte le schede.

Struttura della UI

L'interfaccia utente è creata utilizzando un componibile Scaffold, con un NavigationBar come bottomBar.

  • NavigationBar mostra un elemento per ogni destinazione di primo livello. Quando si fa clic su un elemento, viene chiamato topLevelBackStack.addTopLevel per passare alla scheda corrispondente, mantenendo la cronologia di navigazione di ogni scheda.
  • Il componente componibile NavDisplay viene inserito nell'area dei contenuti di Scaffold. È responsabile della visualizzazione della schermata corrente in base allo stack cronologico compresso fornito da TopLevelBackStack.

Questo approccio consente un pattern di navigazione comune in cui gli utenti possono passare da una sezione all'altra dell'app e ogni sezione mantiene la propria cronologia di navigazione.

Conservazione dello stato

È importante notare come viene gestito lo stato di navigazione in questa ricetta. Quando un utente esce da una destinazione di primo livello (ad esempio premendo il pulsante Indietro finché non torna a una scheda precedente), l'intera cronologia di navigazione per quella destinazione viene cancellata. Lo stato non è stato salvato. Quando l'utente torna a quella scheda in un secondo momento, inizierà dalla schermata iniziale.

Nota: in questo esempio, la route Home può spostarsi sopra le route ChatList e Camera, il che significa che la navigazione a ritroso da Home non comporta necessariamente l'uscita dall'app. L'app uscirà quando l'utente torna indietro da una singola route di primo livello rimanente nello stack di cronologia.

/*
 * 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()
    }
}