כרטיסיות

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

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

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

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

פלטפורמת ה-API

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

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

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

דוגמה: ניווט מבוסס-כרטיסיות

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

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

@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 קוראת ל-navController.navigate(route = destination.route) כדי לעבור למסך המתאים.
• ה-lambda של onClick ב-Tab מעדכנת את המצב של selectedDestination כדי להדגיש באופן חזותי את הכרטיסייה שנלחצה.
• היא שולחת קריאה לרכיב הקומפוזבילי AppNavHost, ומעבירה את navController ואת startDestination, כדי להציג את התוכן בפועל של המסך שנבחר.

תוצאה

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

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

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

• Material 3 – כרטיסיות
• ניווט באמצעות "פיתוח נייטיב"