לחצן פעולה צף

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

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

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

בעיצוב חדשני יש ארבעה סוגים של FAB:

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

פלטפורמת 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

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

לחצן קטן

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

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

לחצן גדול

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

לפניכם הטמעה פשוטה של מזהה FAB גדול.

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

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

לחצן מורחב

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

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

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

• לחצנים נפוצים
• מסמכי ממשק המשתמש של Material