Sık Kullanılan Kullanıcı Arayüzü Yemek Tarifi

Bu tarifte, alt gezinme çubuğu ve birden fazla geri yığın içeren, yaygın bir gezinme kullanıcı arayüzü kalıbının nasıl uygulanacağı gösterilmektedir. Gezinme çubuğundaki her sekmenin kendi gezinme geçmişi vardır.

İşleyiş şekli

Bu örnekte üç üst düzey hedef vardır: Home, ChatList ve Camera. ChatList hedefinin ChatDetail adlı bir alt rotası da var.

TopLevelBackStack

Bu tarifin temelinde, gezinme durumunu yönetmekten sorumlu olan TopLevelBackStack sınıfı yer alır. İşleyiş şekli şöyledir:

  • Her üst düzey hedef (sekme) için ayrı bir geri yığınını korur.
  • Şu anda seçili olan üst düzey hedefi takip eder.
  • NavDisplay composable'ı tarafından kullanılabilen tek bir düzleştirilmiş geri yığın sağlar. Bu düzleştirilmiş geri yığın, tüm sekmelerin ayrı ayrı geri yığınlarının birleşimidir.

Kullanıcı arayüzü yapısı

Kullanıcı arayüzü, Scaffold composable'ı kullanılarak oluşturulur ve bottomBar olarak NavigationBar kullanılır.

  • NavigationBar, her üst düzey hedef için bir öğe gösterir. Bir öğe tıklandığında, her sekmenin gezinme geçmişini koruyarak ilgili sekmeye geçmek için topLevelBackStack.addTopLevel çağrısı yapılır.
  • NavDisplay composable'ı, Scaffold composable'ının içerik alanına yerleştirilir. TopLevelBackStack tarafından sağlanan düzleştirilmiş geri yığına göre mevcut ekranı göstermekten sorumludur.

Bu yaklaşım, kullanıcıların uygulamanın farklı bölümleri arasında geçiş yapabileceği ve her bölümün kendi gezinme geçmişini koruyacağı ortak bir gezinme düzeni sağlar.

Durumu Koruma

Bu tarifte gezinme durumunun nasıl yönetildiğine dikkat etmeniz önemlidir. Bir kullanıcı üst düzey bir hedeften uzaklaştığında (ör. önceki bir sekmeye dönene kadar geri düğmesine basarak), bu hedefin tüm gezinme geçmişi temizlenir. Eyalet kaydedilmez. Kullanıcı daha sonra bu sekmeye döndüğünde başlangıç ekranından devam eder.

Not: Bu örnekte, Home rotası ChatList ve Camera rotalarının üzerine çıkabilir. Bu nedenle, Home rotasından geri gidildiğinde uygulamadan çıkılması gerekmez. Kullanıcı, geri yığında kalan tek bir üst düzey rotadan geri gittiğinde uygulamadan çıkar.

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