إضافة زر إجراء عائم

تجربة طريقة الإنشاء
Jetpack Compose هي مجموعة أدوات واجهة المستخدم المقترَحة لنظام التشغيل Android. تعرّف على كيفية إضافة مكونات في Compose.

زر الإجراء العائم (FAB) هو زر دائري يؤدي إلى تشغيل الإجراء الأساسي في واجهة مستخدم تطبيقك. يوضّح هذا المستند كيفية إضافة FAB إلى تنسيق موقعك الإلكتروني، وتخصيص بعض من مظهره، والاستجابة لنقرات الأزرار.

ولمعرفة المزيد من المعلومات عن كيفية تصميم زر الإجراء العائم لتطبيقك وفقًا لإرشادات التصميم المتعدد الأبعاد، يمكنك الاطّلاع على زر الإجراء الرئيسي (FAB) في التصميم المتعدد الأبعاد.

صورة تعرض شاشة تطبيق تحتوي على FloatingActionButton أحمر اللون
الشكل 1. زر إجراء عائم (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.