לחצן פעולה צף

לחצן פעולה צף (FAB) הוא לחצן בולט שמאפשר למשתמש לבצע פעולה ראשית באפליקציה. הוא מעודד פעולה ממוקדת אחת, שהיא הנתיב הנפוץ ביותר שהמשתמש עשוי לבחור, ובדרך כלל הוא ממוקם בפינה השמאלית התחתונה של המסך.

נבחן את שלושת התרחישים הבאים לדוגמה שבהם ניתן להשתמש ב-FAB:

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

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

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

ממשק API

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

  • onClick: הפונקציה שנקראת כשהמשתמש לוחץ על הלחצן.
  • containerColor: צבע הלחצן.
  • contentColor: הצבע של הסמל.

לחצן פעולה צף

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

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

היישום הזה נראה כך:

לחצן פעולה צף רגיל עם פינות מעוגלות, צל וסמל 'הוספה'.
איור 2. לחצן אקשן צף.

לחצן קטן

כדי ליצור לחצן פעולה צף קטן, משתמשים ב-composable‏ 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.")
    }
}
FloatingActionButton.kt

ההטמעה הזו נראית כך:

הטמעה של SmallFloatingActionButton שמכיל סמל 'הוספה'.
איור 3. לחצן אקשן צף קטן.

לחצן גדול

כדי ליצור לחצן פעולה צף גדול, משתמשים תוכן קומפוזבילי LargeFloatingActionButton. התוכן הקומפוזבילי הזה לא שונה באופן משמעותי מהדוגמאות האחרות, מלבד העובדה התוצאה תהיה לחצן גדול יותר.

בהמשך מופיעה הטמעה פשוטה של FAB גדול.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

היישום הזה נראה כך:

הטמעה של LargeFloatingActionButton שמכיל סמל 'הוספה'.
איור 4. לחצן אקשן צף גדול.

לחצן מורחב

אפשר ליצור לחצני פעולה צפים מורכבים יותר באמצעות תוכן קומפוזבילי 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") },
    )
}
FloatingActionButton.kt

היישום הזה נראה כך:

הטמעה של ExtendedFloatingActionButton שמוצג בה טקסט עם הכיתוב 'לחצן מורחב' וסמל עריכה.
איור 5. לחצן פעולה צף (FAB) עם טקסט וסמל.

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