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

כדאי לנסות את התכונה 'כתיבה מהירה'
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 או שיטות תואמות, כמו:

  • גודל ה-FAB באמצעות המאפיין app:fabSize או באמצעות ה-method setSize()
  • צבע האדווה של מאפיין ה-FAB, באמצעות המאפיין app:rippleColor או באמצעות ה-method 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.