הוספת לחצן פעולה צף

כדאי לנסות את התכונה 'כתיבה מהירה'
Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך מוסיפים רכיבים ב-Compose
לחצן פעולה צף →

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

מידע נוסף על עיצוב לחצן FAB לאפליקציה בהתאם להנחיות של Material Design זמין במאמר לחצן FAB ב-Material Design.

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

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

כך הקוד FloatingActionButton מופיע בקובץ הפריסה:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

כברירת מחדל, לחצן ה-FAB מקבל צבע לפי המאפיין colorAccent, שאפשר להתאים אישית באמצעות לוח הצבעים של העיצוב.

אפשר להגדיר מאפיינים אחרים של FAB באמצעות מאפייני XML או שיטות תואמות, כמו:

  • הגודל של הלחצן המהיר, באמצעות המאפיין app:fabSize או השיטה setSize()
  • צבע הרטט של הלחצן המהיר, באמצעות המאפיין app:rippleColor או השיטה setRippleColor()
  • סמל ה-FAB, באמצעות המאפיין android:src או השיטה setImageDrawable()

תגובה להקשות על לחצנים

לאחר מכן תוכלו להחיל את האירוע View.OnClickListener כדי לטפל בהקשות על FAB. לדוגמה, הקוד הבא מציג את הלחצן Snackbar כשהמשתמש מקייש על הלחצן המהיר:

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

למידע נוסף על היכולות של FAB, ראו הפניית ה-API של FloatingActionButton.