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

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

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

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

صورة تعرض شاشة تطبيق تحتوي على زر FloatingActionButton أحمر
الشكل 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 أو methods المقابلة، مثل ما يلي:

  • حجم التطبيق المصغّر في شريط التطبيقات المفضّلة، باستخدام السمة app:fabSize أو الطريقة setSize()
  • لون التموج في زر التطبيقات المصغّرة للاستخدام السريع، باستخدام السمة app:rippleColor أو الطريقة setRippleColor()
  • رمز التطبيق المصغّر في شريط التطبيقات، باستخدام السمة 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();
    }
});

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