לחצן פעולה צף (FAB) הוא לחצן בולט שמאפשר למשתמש לבצע פעולה ראשית באפליקציה. הוא מעודד פעולה ממוקדת אחת, שהיא הנתיב הנפוץ ביותר שהמשתמש עשוי לבחור, ובדרך כלל הוא ממוקם בפינה השמאלית התחתונה של המסך.
כדאי להביא בחשבון את שלושת התרחישים הבאים לדוגמה שבהם כדאי להשתמש ב-FAB:
- יצירת פריט חדש: באפליקציית כתיבה של הערות, אפשר להשתמש בלחצן מגע גדול כדי ליצור במהירות הערה חדשה.
- הוספת איש קשר חדש: באפליקציית צ'אט, לחיצה על לחצן FAB יכולה לפתוח ממשק שמאפשר למשתמש להוסיף מישהו לשיחה.
- מיקום מרכזי: בממשק מפה, לחצן FAB יכול למרכז את המפה במיקום הנוכחי של המשתמש.
בעיצוב חדשני תלת-ממדי יש ארבעה סוגים של לחצן פעולה מהיר:
- FAB: לחצן פעולה צף בגודל רגיל.
- לחצן פעולה צף קטן: לחצן פעולה צף קטן יותר.
- לחצן פעולה צף גדול: לחצן פעולה צף גדול יותר.
- לחצן פעולה צף מורחב: לחצן פעולה צף שמכיל יותר מסמל.
פלטפורמת API
יש כמה רכיבים שאפשר להשתמש בהם כדי ליצור לחצני פעולה צפים שתואמים ל-Material Design, אבל הפרמטרים שלהם לא שונים באופן משמעותי. בין הפרמטרים העיקריים שחשוב לזכור:
onClick
: הפונקציה שנקראת כשהמשתמש לוחץ על הלחצן.containerColor
: הצבע של הלחצן.contentColor
: הצבע של הסמל.
לחצן פעולה צף
כדי ליצור לחצן פעולה צף כללי, משתמשים ב-composable הבסיסי FloatingActionButton
. בדוגמה הבאה מופיעה הטמעה בסיסית של FAB:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
ההטמעה הזו נראית כך:
לחצן קטן
כדי ליצור לחצן פעולה צף קטן, צריך להשתמש בתוכן הקומפוזבילי 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.") } }
היישום הזה נראה כך:
לחצן גדול
כדי ליצור לחצן פעולה צף גדול, צריך להשתמש בתוכן הקומפוזבילי LargeFloatingActionButton
. הרכיב הזה לא שונה באופן משמעותי מהדוגמאות האחרות, מלבד העובדה שהוא יוצר לחצן גדול יותר.
בהמשך מופיעה הטמעה פשוטה של FAB גדול.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
ההטמעה הזו נראית כך:
לחצן מורחב
אפשר ליצור לחצני פעולה צפים מורכבים יותר באמצעות הרכיב ה-composable ExtendedFloatingActionButton
. ההבדל העיקרי בינו לבין FloatingActionButton
הוא שיש לו פרמטרים ייעודיים, icon
ו-text
. הם מאפשרים ליצור לחצן עם תוכן מורכב יותר, שמתאים את עצמו לתוכן בצורה הולמת.
קטע הקוד הבא מראה איך להטמיע את 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") }, ) }
ההטמעה הזו נראית כך: