כרטיסיות

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

• כרטיסיות ראשיות: ממוקמות בחלק העליון של חלונית התוכן מתחת לסרגל האפליקציה העליון. הם מציגים את יעדי התוכן העיקריים, וצריך להשתמש בהם כשנדרש רק סט אחד של כרטיסיות.
• כרטיסיות משניות: משמשות בתוך אזור תוכן כדי להפריד עוד יותר בין תכנים קשורים וליצור היררכיה. הן נחוצות כשמסך דורש יותר מרמה אחת של כרטיסיות.

תרשים 1. כרטיסיות ראשיות (1) וכרטיסיות משניות (2).

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

פלטפורמת ה-API

משתמשים ברכיבים הקומפוזביליים Tab, ‏PrimaryTabRow ו-SecondaryTabRow כדי להטמיע כרטיסיות. רכיב ה-Tab מייצג כרטיסייה נפרדת בשורה, ובדרך כלל משתמשים בו בתוך רכיב PrimaryTabRow (לכרטיסיות של אינדיקטורים ראשיים) או SecondaryTabRow (לכרטיסיות של אינדיקטורים משניים).

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

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

דוגמה: ניווט באמצעות מקש Tab

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

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

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

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

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

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

תוצאה

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

איור 2. 3 כרטיסיות – שירים, אלבום ופלייליסט – מסודרות אופקית.

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

• Material 3 - Tabs
• ניווט באמצעות "פיתוח נייטיב"