زر الإجراء العائم (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 أو الطرق المقابلة لها، مثل ما يلي:
- تمثّل هذه السمة حجم زر الإجراء الرئيسي باستخدام السمة
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
.