מתכון נפוץ לממשק משתמש
במתכון הזה מוסבר איך להטמיע תבנית נפוצה של ממשק משתמש לניווט עם סרגל ניווט תחתון וכמה מחסניות של היסטוריית חזרה, שבהן לכל כרטיסייה בסרגל הניווט יש היסטוריית ניווט משלה.
איך זה עובד
בדוגמה הזו יש שלושה יעדים ברמה העליונה: Home, ChatList ו-Camera. ליעד ChatList יש גם מסלול משנה, ChatDetail.
TopLevelBackStack
הליבה של המתכון הזה היא המחלקה TopLevelBackStack, שאחראית לניהול מצב הניווט. כך זה עובד:
- הוא שומר על היסטוריית חזרה נפרדת לכל יעד ברמה העליונה (כרטיסייה).
- הוא עוקב אחרי היעד ברמה העליונה שנבחר כרגע.
- הוא מספק מחסנית אחת שטוחה של פעולות שניתן להשתמש בה בקוד
NavDisplayקומפוזבילי. ערימת הפעולות הקודמות המאוחדת הזו היא שילוב של ערימות הפעולות הקודמות הנפרדות של כל הכרטיסיות.
מבנה ממשק המשתמש
ממשק המשתמש בנוי באמצעות קומפוזבל Scaffold, עם NavigationBar בתור bottomBar.
- ב
NavigationBarמוצג פריט לכל יעד ברמה העליונה. כשלוחצים על פריט, הפונקציהtopLevelBackStack.addTopLevelמופעלת כדי לעבור לכרטיסייה המתאימה, תוך שמירה על היסטוריית הניווט של כל כרטיסייה. - רכיב הקומפוזבילי
NavDisplayמוצב באזור התוכן שלScaffold. הוא אחראי להצגת המסך הנוכחי על סמך מחסנית החזרה (back stack) המפושטת שסופקה על ידי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() } }