زر الإجراء العائم (FAB) هو زر دائري يشغّل الإجراء الأساسي في واجهة مستخدم تطبيقك. يوضح هذا المستند كيفية إضافة FAB إلى التخطيط، وتخصيص بعض مظهره، والاستجابة لنقرات الأزرار.
لمعرفة المزيد من المعلومات عن كيفية تصميم زر الإجراء الرئيسي في تطبيقك وفقًا لإرشادات التصميم المتعدد الأبعاد، يمكنك الاطّلاع على المقالة تصميم الإجراء المتعدد الأبعاد (FAB).
![صورة تعرض شاشة تطبيق تحتوي على زر FloatingActionButton باللون الأحمر](https://developer.android.com/static/training/material/images/fab.png?authuser=6&hl=ar)
إضافة زر الإجراء العائم إلى التنسيق
يوضّح الرمز التالي كيفية ظهور 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)، يمكنك الاطّلاع على مرجع واجهة برمجة التطبيقات
FloatingActionButton
.