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

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

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

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

الشكل 1: زر إجراء عائم

إضافة زر الإجراء العائم إلى التنسيق

توضح التعليمة البرمجية التالية كيف يجب على 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" />

يتم تلقائيًا تلوين زر التطبيقات المصغّرة في شريط التطبيقات من خلال السمة colorAccent، ويمكنك تخصيصه باستخدام لوحة ألوان المظهر.

يمكنك ضبط سمات التطبيق المصغّر للإجراءات الفورية الأخرى باستخدام سمات XML أو الطرق المقابلة، مثل ما يلي:

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

الاستجابة للضغط على الأزرار

يمكنك بعد ذلك تطبيق رمز View.OnClickListener لمعالجة زر الإجراء الرئيسي (FAB). نقرات. على سبيل المثال، يعرض الرمز البرمجي التالي 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();
    }
});

لمزيد من المعلومات حول إمكانات التطبيق المصغّر في شريط التطبيقات، يُرجى الاطّلاع على مرجع واجهة برمجة التطبيقات لFloatingActionButton.