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

تجربة طريقة Compose

‫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، والتي يمكنك تخصيصها باستخدام لوحة ألوان المظهر.

يمكنك ضبط سمات أخرى لزر الإجراء العائم باستخدام سمات 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.