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

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

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

لمعرفة المزيد حول كيفية تصميم FAB لتطبيقك وفقًا لـ Material إرشادات التصميم، راجع التصميم المتعدد الأبعاد زر الإجراء الرئيسي (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 أو سمات مثل ما يلي:

  • حجم التطبيق المصغّر في شريط التطبيقات المفضّلة، باستخدام السمة app:fabSize أو الطريقة setSize()
  • لون التموج في زر التطبيقات المصغّرة في شريط التطبيقات، باستخدام السمة app:rippleColor أو الطريقة setRippleColor()
  • يتم عرض رمز FAB باستخدام السمة android:src أو setImageDrawable() طريقة واحدة

الاستجابة لنقرات الأزرار

يمكنك بعد ذلك تطبيق رمز View.OnClickListener لمعالجة النقرات على التطبيق المصغّر في شريط التطبيقات. على سبيل المثال، يعرض الرمز البرمجي التالي رمزًا متحركًا Snackbar عندما ينقر المستخدم على زر الإجراءات السريعة:

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