زر الإجراء العائم (FAB) هو زر دائري يؤدي إلى تشغيل الإجراء الأساسي في واجهة مستخدم تطبيقك. يوضّح هذا المستند كيفية إضافة 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()
- لون متموج 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
.