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

تجربة طريقة "الكتابة"

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

زر الإجراء الرئيسي →

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

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

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

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.