סרגלי אפליקציות הם קונטיינרים שמספקים למשתמשים גישה לתכונות מרכזיות פריטי ניווט. יש שני סוגים של סרגלי אפליקציות, סרגלי אפליקציות מובילים ואפליקציה תחתונה עמודות. המראה והמטרה המתאימים הן:
סוג |
מראה |
המטרה |
---|---|---|
סרגל האפליקציה העליון |
בחלק העליון של המסך. |
הוא מאפשר לגשת למשימות ולמידע חשוב. האפליקציה מארחת בדרך כלל כותרת, פעולות עיקריות לביצוע ופריטי ניווט מסוימים. |
סרגל האפליקציה התחתון |
בחלק התחתון של המסך. |
כולל בדרך כלל פריטי ניווט עיקריים. עשויה לספק גם גישה לפעולות חשובות אחרות, למשל באמצעות לחצן פעולה צף (FAB). |
כדי להטמיע את סרגל האפליקציה העליון ואת הסרגל התחתון של האפליקציה, צריך להשתמש בTopAppBar
BottomAppBar
תכנים קומפוזביליים, בהתאמה. הם מאפשרים ליצור
ממשקים שכוללים בקרות ניווט ופעולות,
תואם לעקרונות של עיצוב Material Design.
סרגלי אפליקציות מובילים
בטבלה הבאה מפורטים ארבעת הסוגים של סרגלי האפליקציות המובילים:
סוג |
דוגמה |
---|---|
קטן: למסכים שלא מצריכים ניווט או פעולות רבות. |
|
יישור למרכז: למסכים עם פעולה ראשית אחת. |
|
בינונית: למסכים שדורשים מידה בינונית של ניווט ופעולות. |
|
גדול: למסכים שדורשים הרבה ניווט ופעולות. |
|
פלטפורמת API
התכנים הקומפוזביליים השונים שמאפשרים לכם להטמיע את ארבע האפליקציות המובילות השונות די דומות. יש להם כמה פרמטרים עיקריים:
title
: הטקסט שמופיע בסרגל האפליקציה.navigationIcon
: הסמל הראשי לניווט. מופיע/ה במצעד שמימין לסרגל האפליקציות.actions
: סמלים שמעניקים למשתמשים גישה לפעולות חשובות. הן מופיעות משמאל לסרגל האפליקציות.scrollBehavior
: קובע איך סרגל האפליקציות העליון מגיב לגלילה של את התוכן הפנימי של הפיגום.colors
: ההגדרה הזו קובעת איך יופיע סרגל האפליקציות.
התנהגות הגלילה
אפשר לקבוע איך סרגל האפליקציות יגיב כשהמשתמש גולל את
את התוכן הפנימי של הפיגומים. כדי לעשות את זה, יוצרים מופע של
TopAppBarScrollBehavior
ומעבירים אותו לסרגל האפליקציות העליון כדי
פרמטר scrollBehavior
.
יש שלושה סוגים של TopAppBarScrollBehavior
. אלו הם:
enterAlwaysScrollBehavior
: כשהמשתמש מושך את החלק הפנימי של הפיגום התוכן, הסרגל העליון של האפליקציה מתכווץ. סרגל האפליקציה מתרחב כשהמשתמש שמושך את התוכן הפנימי.exitUntilCollapsedScrollBehavior
: דומה ל-enterAlwaysScrollBehavior
, אם כי סרגל האפליקציה מתרחב גם כשהמשתמש מגיע לסוף את התוכן הפנימי של הפיגומים.pinnedScrollBehavior
: סרגל האפליקציות נשאר במקומו ולא מגיב למקרים הבאים בגלילה.
הדוגמאות הבאות מממשות כמה מהאפשרויות האלה.
דוגמאות
בקטעים הבאים מתוארים הטמעות של ארבעת הסוגים השונים של סרגלי אפליקציות מובילים, כולל דוגמאות שונות לאופן שבו ניתן לשלוט בהתנהגות הגלילה.
קטן
כדי ליצור סרגל אפליקציה קטן בחלק העליון, צריך להשתמש בתוכן הקומפוזבילי TopAppBar
. כאן
סרגל האפליקציות העליון הפשוט ביותר, ובדוגמה הזו מכיל רק כותרת.
הדוגמה הבאה לא מעבירה ל-TopAppBar
ערך עבור
scrollBehavior
ולכן הוא לא מגיב לגלילה של הפנימי
תוכן.
@Composable fun SmallTopAppBarExample() { Scaffold( topBar = { TopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text("Small Top App Bar") } ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
היישום הזה נראה כך:
![דוגמה לסרגל קטן בחלק העליון של האפליקציה.](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-small.png?authuser=7&hl=he)
יישור למרכז
סרגל האפליקציה העליון במרכז, הוא בעצם זהה לסרגל האפליקציות הקטן,
אם הכותרת ממורכזת בתוך הרכיב. כדי להטמיע את התג, צריך להשתמש
ייעודי לתוכן קומפוזבילי CenterAlignedTopAppBar
.
בדוגמה הזו נשתמש בפונקציה enterAlwaysScrollBehavior()
כדי לקבל את הערך שהיא מעבירה
עבור scrollBehavior
. לכן, הסרגל מתכווץ כשהמשתמש גולל
את התוכן הפנימי של הפיגומים.
@Composable fun CenterAlignedTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { CenterAlignedTopAppBar( colors = TopAppBarDefaults.centerAlignedTopAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Centered Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior, ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
היישום הזה נראה כך:
![כאן כותבים את הטקסט החלופי](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-centered.png?authuser=7&hl=he)
בינוני
בסרגל העליון של האפליקציה בגודל בינוני, הכותרת מוצגת מתחת לסמלים נוספים. כדי ליצור
אחד, צריך להשתמש בתוכן הקומפוזבילי MediumTopAppBar
.
כמו קטע הקוד הקודם, בדוגמה הזו נעשה שימוש ב-enterAlwaysScrollBehavior()
כדי
מקבלים את הערך שהוא מעביר עבור scrollBehavior
.
@Composable fun MediumTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { MediumTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Medium Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
היישום הזה מופיע כך, ויש הדגמה של אופן הגלילה
מופיעה ההתנהגות של enterAlwaysScrollBehavior()
:
גדול
סרגל אפליקציה גדול בחלק העליון דומה לאמצעי ההגעה לאתר, אם כי המרווח הפנימי בין
והסמלים גדולים יותר, והוא תופס יותר מקום על המסך באופן כללי. שפת תרגום
יוצרים אחד, משתמשים בתוכן הקומפוזבילי LargeTopAppBar
.
בניגוד לקטעי הקוד הקודמים, דוגמה זו משתמשת
exitUntilCollapsedScrollBehavior()
כדי לקבל את הערך שאליו הוא מועבר
scrollBehavior
. לכן, הסרגל מתכווץ כשהמשתמש גולל
את התוכן הפנימי של הפיגום, אבל אז הוא מתרחב כשהמשתמש גולל אל
את התוכן הפנימי.
@Composable fun LargeTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { LargeTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Large Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
היישום הזה נראה כך:
![מסך באפליקציה עם סרגל אפליקציות תחתון שמחזיק בסמלי פעולות בצד שמאל, ולחצן פעולה צף בצד ימין.](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-large.png?authuser=7&hl=he)
סרגל האפליקציה התחתון
כדי ליצור סרגל אפליקציה תחתון, צריך להשתמש בתוכן הקומפוזבילי BottomAppBar
. שימוש בטיוטה הזו
תכנים קומפוזביליים דומים מאוד לתכנים הקומפוזביליים המובילים בסרגל האפליקציות שמתוארים
בקטעים הקודמים בדף הזה. אתם מעבירים תכנים קומפוזביליים עבור המפתח הבא
:
actions
: סדרת סמלים שמופיעים בצד ימין של הסרגל. האלה הן בדרך כלל פעולות עיקריות במסך הנתון או פריטי ניווט.floatingActionButton
: לחצן הפעולה הצף שמופיע הימני של הסרגל.
@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." ) } }
היישום הזה נראה כך:
![מסך באפליקציה עם סרגל אפליקציות תחתון שמחזיק בסמלי פעולות בצד שמאל, ולחצן פעולה צף בצד ימין.](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-bottom.png?authuser=7&hl=he)