לחצן פעולה צף

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

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

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

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

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

ממשק API

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

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

לחצן פעולה צף

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

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

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

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

לחצן קטן

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

לחצן גדול

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

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

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

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

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

לחצן מורחב

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

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

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

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