دستورالعمل آماده واسط کاربر رایج

این دستورالعمل نحوه پیاده‌سازی یک الگوی رایج میانای کاربر پیمایش را با نوار پیمایش پایین و چندین پشته قبلی‌ها نشان می‌دهد، که در آن هر برگه در نوار پیمایش سابقه پیمایش خاص خود را دارد.

روش کار

این مثال سه مقصد سطح بالا دارد: Home،‏ ChatList، و Camera. مقصد ChatList زیرمسیر ChatDetail را نیز دارد.

TopLevelBackStack

هسته این دستورالعمل کلاس TopLevelBackStack است که مسئول مدیریت وضعیت پیمایش است. به این صورت کار می‌کند:

  • این برنامه برای هر مقصد سطح بالا (زبانه) پشته پشتی جداگانه‌ای را حفظ می‌کند.
  • این متغیر مقصد سطح بالای انتخاب‌شده فعلی را پیگیری می‌کند.
  • پشته برگشت واحد و مسطحی ارائه می‌دهد که می‌تواند توسط عنصر ترکیبی NavDisplay استفاده شود. این پشته تماس فشرده ترکیبی از پشته‌های تماس جداگانه همه زبانه‌ها است.

ساختار میانای کاربر

میانای کاربری بااستفاده از عنصر ترکیبی Scaffold ساخته شده است و NavigationBar به‌عنوان bottomBar عمل می‌کند.

  • NavigationBar برای هر مقصد سطح بالا یک مورد نمایش می‌دهد. وقتی روی موردی کلیک می‌شود، topLevelBackStack.addTopLevel را فرا می‌خواند تا به برگه مربوطه برود و سابقه پیمایش هر برگه را حفظ کند.
  • عنصر ترکیبی NavDisplay در ناحیه محتوای Scaffold قرار می‌گیرد. این مؤلفه مسئول نمایش صفحه فعلی براساس پشته قبلی‌های مسطح‌شده ارائه‌شده توسط TopLevelBackStack است.

این رویکرد امکان ایجاد الگوی پیمایش مشترکی را فراهم می‌کند که در آن کاربران می‌توانند بین بخش‌های مختلف برنامه جابه‌جا شوند و هر بخش سابقه پیمایش خود را حفظ می‌کند.

حفظ وضعیت

توجه به نحوه مدیریت وضعیت پیمایش در این دستورالعمل مهم است. وقتی کاربر از مقصد سطح بالا خارج می‌شود (مثلاً با فشار دادن دکمه برگشت تا زمانی که به برگه قبلی برگردد)، کل سابقه پیمایش برای آن مقصد پاک می‌شود. وضعیت ذخیره نشد. وقتی کاربر بعداً به آن برگه برمی‌گردد، از صفحه اولیه آن شروع خواهد کرد.

توجه: در این مثال، مسیر Home می‌تواند بالاتر از مسیرهای ChatList و Camera قرار گیرد، یعنی پیمایش برگشت از Home لزوماً باعث خروج از برنامه نمی‌شود. وقتی کاربر از یک مسیر سطح بالای باقی‌مانده در پشته قبلی‌ها برگردد، برنامه بسته می‌شود.

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