إنشاء زر

تتيح الأزرار للمستخدم تنفيذ إجراء محدّد. هناك خمسة أنواع من buttons:

النوع

المظهر

الغرض
مملوءة

خلفية صلبة مع نص ذي تباين

للإجراءات الأساسية، مثل "إرسال" و "حفظ" يُبرز تأثير الظل أهمية الزر.
Tonal

يختلف لون الخلفية ليتناسب مع السطح.

للإجراءات الأساسية أو المهمة تُضفي الأزرار الملونة وزنًا بصريًا وهي مناسبة لإجراءات مثل "إضافة إلى سلة التسوّق" و "تسجيل الدخول".
مرتفع

ويُبرز الظلّ هذه العناصر.

للإجراءات الأساسية أو المهمة يمكنك زيادة الارتفاع لجعل الزر أكثر بروزًا.
مخطَّط

يعرض حدودًا بدون تعبئة.

للإجراءات المهمة ولكن ليست أساسية. تتناسب الأزرار المخطَّطة بشكل جيد مع الأزرار الأخرى للإشارة إلى إجراءات ثانوية بديلة، مثل "إلغاء" أو "رجوع".
Text

نص بدون خلفية أو حدود

للإجراءات الأقل أهمية، مثل روابط التنقّل أو الإجراءات الثانوية، مثل "مزيد من المعلومات" أو "عرض التفاصيل"

توافق الإصدار

يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو إصدار أحدث.

التبعيات

إنشاء زرّ ممتلئ

يستخدم مكوّن الزرّ الممتلئ العنصر الأساسي Button القابل للتجميع. ويتم تلقائيًا ملؤه بلون واحد.

النتائج

زرّ معبأ بخلفية أرجوانية يظهر عليه النص "معبأ"
الشكل 1. زرّ مُعبّأ

إنشاء زرّ نغمي ممتلئ

يستخدم مكوّن الزرّ الملوّن الممتلئ العنصر القابل للتجميع FilledTonalButton. ويتم ملؤه تلقائيًا بلون نغمي.

النتائج

زرّ موحّد اللون على خلفية أرجوانية فاتحة يظهر عليه النص "ممتلئ"
الشكل 2. زرّ نغمي

إنشاء زرّ محدَّد الجوانب

يستخدم مكوّن الزرّ المخطّط العنصر القابل للتجميع OutlinedButton. ويظهر مع مخطّط تلقائيًا.

النتائج

زر شفاف محدَّد الجوانب مع إطار داكن يظهر عليه النص "محدَّد الجوانب"
الشكل 3. زر محدَّد الجوانب

إنشاء زرّ مميّز

يستخدم مكوّن الزرّ البارز العنصر القابل للتجميع ElevatedButton. يحتوي على ظل يمثّل تأثير الارتفاع تلقائيًا ويظهر على هيئة زر مخطّط مع ظل.

النتائج

زر بارز على خلفية رمادية يظهر عليه النص "بارز"
الشكل 4. زر بارز

إنشاء زر نصي

يستخدم مكوّن الزر النصي العنصر القابل للتجميع TextButton. ولا يظهر سوى كنص إلى أن يتم النقر عليه. لا يحتوي على تعبئة أو مخطط صلب تلقائيًا.

النتائج

زر نصي يظهر عليه النص "زر نصي"
الشكل 5. زر نصي

النقاط الرئيسية

  • onClick: الدالة التي يتمّ استدعاؤها عندما يضغط المستخدم على الزر
  • enabled: عندما تكون هذه المَعلمة غير صحيحة، يؤدي ذلك إلى ظهور الزر غير متاح وغير نشط.
  • colors: مثيل ButtonColors الذي يحدّد الألوان المستخدَمة في الزر
  • ‫contentPadding: المساحة الفارغة داخل الزر

المجموعات التي تتضمّن هذا الدليل

هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول أهداف تطوير Android الأوسع نطاقًا:

تعرَّف على كيفية استخدام الدوال القابلة للتجميع لإنشاء مكونات جميلة لواجهة المستخدم بسهولة استنادًا إلى نظام التصميم المتعدّد الأبعاد.
مجموعة الأدلة السريعة

إذا كانت لديك أسئلة أو ملاحظات

يمكنك الانتقال إلى صفحة الأسئلة الشائعة والاطّلاع على الأدلة السريعة أو التواصل معنا وإعلامنا برأيك.
الانتقال إلى الأسئلة الشائعة تقديم ملاحظات