הצגת סרגל האפליקציה התחתון

כדאי ליצור סרגל אפליקציה ותחתון כדי לעזור למשתמשים לנווט ולגשת לפונקציות באפליקציה. תוכלו לפעול לפי ההוראות הבאות כדי להוסיף סרגל אפליקציה ותחתון לאפליקציה באמצעות הרכיב ה-composable‏ BottomAppBar.

תאימות גרסאות

כדי להטמיע את האפשרות הזו, צריך להגדיר את minSDK של הפרויקט לרמת API 21 ואילך.

יחסי תלות

יצירת סרגל אפליקציה תחתון

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

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}

נקודות עיקריות לגבי הקוד

  • Scaffold חיצוני עם bottomBar מוגדר.
  • הטמעה של bottomBar שמכילה רשימה של פעולות.
  • פעולות שהן הטמעות של IconButton שמכילות Icon לטקסט של תיאור התמונה והתוכן, כל אחת עם פונקציית lambda‏ onClick לביצוע הפעולות האלה.

אפשר להעביר רכיבים מורכבים לפרמטרים המרכזיים הבאים:

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

תוצאות

 דוגמה לסרגל האפליקציה התחתון
איור 1. דוגמה לסרגל האפליקציות התחתון.

אוספים שמכילים את המדריך הזה

המדריך הזה הוא חלק מהאוספים הבאים של מדריכים מהירים, שמכסים יעדים רחבים יותר לפיתוח Android:

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

יש לכם שאלות או משוב

אתם יכולים להיכנס לדף השאלות הנפוצות שלנו ולקרוא מדריכים מהירים, או ליצור איתנו קשר ולספר לנו מה דעתכם.