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

تجربة طريقة ComposeAllowed
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.