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

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

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

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

תמונה שמציגה מסך אפליקציה שמכיל 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" />

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

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

  • הגודל של ה-FAB, באמצעות המאפיין app:fabSize או השיטה setSize()
  • צבע האדווה של הלחצן הראשי, באמצעות המאפיין app:rippleColor או השיטה setRippleColor()
  • הסמל של הלחצן הראשי לפעולה, באמצעות המאפיין android:src או השיטה setImageDrawable()

תגובה ללחיצות על כפתורים

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