כרטיסיות

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

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

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

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

ממשק API

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

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

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

התוצאה

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

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

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