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

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

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

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

תמונה שמוצג בה מסך של אפליקציה שמכיל לחצן 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 או שיטות, כמו:

  • גודל מאפיין ה-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