לחצן פעולה צף (FAB) הוא לחצן עם דגש גבוה שמאפשר למשתמש לבצע פעולה ראשית באפליקציה. היא מעודדת פעולה אחת וממוקדת אחת זהו הנתיב הנפוץ ביותר שבו משתמש עשוי לעבור, ובדרך כלל נמצא שמוצמד לפינה הימנית התחתונה של המסך.
נבחן את שלושת התרחישים הבאים לדוגמה שבהם אפשר להשתמש ב-FAB:
- יצירת פריט חדש: באפליקציה לרישום הערות, ניתן להשתמש ב-FAB כדי ליצור במהירות יוצרים הערה חדשה.
- הוספת איש קשר חדש: באפליקציית צ'אט, FAB יכול לפתוח ממשק שמאפשר המשתמש מוסיף מישהו לשיחה.
- מיקום מרכזי: בממשק מפה, לחצן FAB יכול למרכז את המפה המיקום הנוכחי של המשתמש.
בעיצוב חדשני יש ארבעה סוגים של FAB:
- FAB: לחצן פעולה צף בגודל רגיל.
- FAB קטן: לחצן פעולה צף קטן יותר.
- FAB גדול: לחצן פעולה צף גדול יותר.
- FAB מורחב: לחצן פעולה צף שמכיל יותר מאשר .
פלטפורמת API
למרות שיש כמה תכנים קומפוזביליים שאפשר להשתמש בהם כדי ליצור פעולה צפה לחצנים שתואמים ל-Material Design, הפרמטרים שלהם לא שונים באופן משמעותי. הנה כמה מהפרמטרים העיקריים שכדאי לזכור:
onClick
: הפונקציה שנקראה כשהמשתמש לוחץ על הלחצן.containerColor
: הצבע של הלחצן.contentColor
: הצבע של הסמל.
לחצן פעולה צף
כדי ליצור לחצן פעולה צף כללי, צריך להשתמש
תוכן קומפוזבילי FloatingActionButton
. הדוגמה הבאה ממחישה
יישום בסיסי של FAB:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
היישום הזה נראה כך:
![לחצן פעולה צף סטנדרטי עם פינה מעוגלת, צל ו-'Add' .](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab.png?authuser=7&hl=he)
לחצן קטן
כדי ליצור לחצן פעולה צף קטן, משתמשים
תוכן קומפוזבילי SmallFloatingActionButton
. הדוגמה הבאה ממחישה
באמצעות הוספה של צבעים מותאמים אישית.
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
היישום הזה נראה כך:
![יישום של SmallFloatingActionButton שמכיל את הרכיב 'add' .](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-small.png?authuser=7&hl=he)
לחצן גדול
כדי ליצור לחצן פעולה צף גדול, משתמשים
תוכן קומפוזבילי LargeFloatingActionButton
. התוכן הקומפוזבילי הזה לא
שונה באופן משמעותי מהדוגמאות האחרות, מלבד העובדה
התוצאה תהיה לחצן גדול יותר.
לפניכם הטמעה פשוטה של מזהה FAB גדול.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
היישום הזה נראה כך:
![הטמעה של LargeFloatingActionButton שמכיל את הרכיב 'add' .](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-large.png?authuser=7&hl=he)
לחצן מורחב
אפשר ליצור לחצני פעולה צפים מורכבים יותר באמצעות
תוכן קומפוזבילי ExtendedFloatingActionButton
. ההבדל המרכזי ביניהם
ו-FloatingActionButton
הוא שמוקדש ל-icon
ול-text
. הם מאפשרים ליצור לחצן עם תוכן מורכב יותר שמאפשר התאמה לעומס (scaling)
כך שיתאים לתוכן שלו.
קטע הקוד הבא מדגים איך מטמיעים
ExtendedFloatingActionButton
, עם ערכים לדוגמה שמועברים עבור icon
וגם
text
.
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
היישום הזה נראה כך:
![יישום של ExtendedFloatingActionButton שמציג טקסט עם הכיתוב 'extended button' (לחצן מורחב) וסמל עריכה.](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-extended.png?authuser=7&hl=he)