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

איך עושים את זה ב-Compose
‫Jetpack Compose היא ערכת הכלים המומלצת לפיתוח ממשק משתמש ב-Android. איך מוסיפים רכיבים ב-Compose.
כפתור פעולה צף (FAB) ←

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

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

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

הוספת כפתור הפעולה הצף (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" />

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

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

  • גודל ה-FAB, באמצעות המאפיין 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.