רכבת ניווט

מודעות צד מאפשרות גישה ליעדים באפליקציות שפועלות במכשירים עם מסכים גדולים. כדאי להשתמש בסרגלי ניווט במקרים הבאים:

• יעדים ברמה העליונה שצריכה להיות אליהם גישה מכל מקום באפליקציה
• שלושה עד שבעה יעדים עיקריים
• פריסות לטאבלטים או למחשבים

תרשים 1. סרגל ניווט עם ארבעה יעדים ולחצן פעולה צף.

בדף הזה מוסבר איך להציג פסי ניווט באפליקציה עם מסכים קשורים וניווט בסיסי.

פלטפורמת ה-API

כדי להטמיע מסילה באפליקציה, משתמשים בקוד NavigationRail קומפזבילי עם NavigationRailItem. התו NavigationRailItem מייצג פריט יחיד במגש בעמודת המגש.

NavigationRailItem כולל את הפרמטרים העיקריים הבאים:

• ‫selected: קובע אם הפריט הנוכחי בסרגל מודגש חזותית.
• ‫onClick(): פונקציית lambda נדרשת שמגדירה את הפעולה שתתבצע כשהמשתמש ילחץ על פריט במגש. כאן בדרך כלל מטפלים באירועי ניווט, מעדכנים את המצב של פריט הסרגל שנבחר או טוענים תוכן תואם.
• ‫label: הצגת טקסט בפריט של המסילה. אופציונלי.
• ‫icon: הצגת סמל בפריט של פס הצד. אופציונלי.

דוגמה: סרגל ניווט צדדי

בקטע הקוד הבא מוטמע פס ניווט כדי שהמשתמשים יוכלו לנווט בין מסכים שונים באפליקציה:

הערה: קוד המקור המלא כולל את הקוד שיוצר את מבנה הניווט הבסיסי בדוגמה הבאה.

@Composable
fun NavigationRailExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        NavigationRail(modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                NavigationRailItem(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    icon = {
                        Icon(
                            destination.icon,
                            contentDescription = destination.contentDescription
                        )
                    },
                    label = { Text(destination.label) }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

נקודות עיקריות

• ‫NavigationRail מציג עמודה אנכית של פריטים ב-Rail, כאשר כל פריט תואם ל-Destination.
• ‫val navController = rememberNavController() יוצרת וזוכרת מופע של NavHostController, שמנהל את הניווט בתוך NavHost.
• ‫var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } מנהל את המצב של פריט המסילה שנבחר כרגע.
  • הפונקציה startDestination.ordinal מקבלת את האינדקס המספרי (המיקום) של רשומה בסוג הנתונים המונה Destination.SONGS.
• כשלוחצים על פריט בסרגל, הפונקציה navController.navigate(route = destination.route) מופעלת כדי לעבור למסך המתאים.
• פונקציית ה-lambda‏ onClick של NavigationRailItem מעדכנת את המצב selectedDestination כדי להדגיש חזותית את הפריט שנלחץ במסילה.
• הוא קורא ל-AppNavHost composable, מעביר את navController ואת startDestination, כדי להציג את התוכן בפועל של המסך שנבחר.

התוצאה

בתמונה הבאה מוצגת התוצאה של קטע הקוד הקודם:

איור 2. פס ניווט שמכיל 3 יעדים עם סמלים משויכים: שירים, אלבום ופלייליסט.

מקורות מידע נוספים

• ‫Material 3 – סרגל ניווט
• ניווט באמצעות Compose