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

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

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

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

תמונה שמוצג בה מסך של אפליקציה שמכיל לחצן FloatingAction אדום
איור 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()
  • צבע הרטט של ה-FAB, באמצעות המאפיין app:rippleColor או השיטה setRippleColor()
  • סמל ה-FAB, באמצעות המאפיין android:src או השיטה setImageDrawable()

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

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

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.