יצירת לחצן פעולה צף (FAB)

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

הנה שלושה תרחישי שימוש שבהם כדאי להשתמש בלחצן פעולה צף:

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

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

תאימות גרסאות

כדי להטמיע את התכונה הזו, צריך להגדיר את minSDK בפרויקט לרמת API‏ 21 ומעלה.

תלויות

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.05.00"))

מגניב

  implementation platform('androidx.compose:compose-bom:2025.05.00')

יצירת לחצן פעולה צף בסיסי

כדי ליצור כפתור פעולה צף כללי, משתמשים ב-composable הבסיסי FloatingActionButton:

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

התוצאה

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

יצירת לחצן פעולה צף קטן

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

יצירת לחצן פעולה צף גדול

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

הדוגמה הבאה מציגה הטמעה פשוטה של לחצן FAB גדול.

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

התוצאה

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

יצירת לחצן פעולה צף מורחב

אפשר ליצור לחצני פעולה צפים מורכבים יותר באמצעות ה-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 שמציגה את הטקסט 'extended button' (לחצן מורחב) וסמל עריכה.
איור 4. לחצן פעולה צף עם טקסט וסמל.

נקודות עיקריות

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

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

z## אוספים שכוללים את המדריך הזה

המדריך הזה הוא חלק מאוספים של מדריכים מהירים שנבחרו בקפידה ועוסקים ביעדים רחבים יותר של פיתוח ל-Android:

כאן מוסבר איך פונקציות שאפשר להרכיב מאפשרות ליצור בקלות רכיבי ממשק משתמש יפים שמבוססים על מערכת העיצוב של Material Design.
אוסף מדריכים מקוצרים

יש לכם שאלות או משוב?

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