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

אנסה לכתוב
‫Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ל-Android. איך מוסיפים רכיבים ב-Compose

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

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

תגובה להקשות על כפתורים

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