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

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

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

زر الإجراء العائم →

زر الإجراء العائم (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" />

يتم تلقائيًا تلوين زر الإجراء العائم باستخدام السمة colorAccent، ويمكنك تخصيصها باستخدام لوحة الألوان الخاصة بالمظهر.

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

• حجم زر الإجراء العائم، باستخدام السمة app:fabSize أو الطريقة setSize()
• لون التموج في الزر العائم، باستخدام السمة app:rippleColor أو الطريقة setRippleColor()
• رمز زر الإجراء العائم، باستخدام السمة android:src أو الطريقة setImageDrawable()

الردّ على نقرات الأزرار

يمكنك بعد ذلك تطبيق View.OnClickListener للتعامل مع نقرات زر الإجراء العائم. على سبيل المثال، يعرض الرمز التالي Snackbar عندما ينقر المستخدم على زر الإجراء العائم:

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();
    }
});

لمزيد من المعلومات حول إمكانات زر الإجراء العائم، يُرجى الاطّلاع على مرجع واجهة برمجة التطبيقات الخاص بـ FloatingActionButton.