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

אפשר לנסות את הדרך של כתיבת הודעה

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

כפתור פעולה צף ←

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

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

איור 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.