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