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

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

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

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

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

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

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

יחסי תלות

Kotlin

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

Groovy

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

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

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

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

התוצאה

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

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

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

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

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

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

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

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

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

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

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