عرض شريط التطبيق العلوي

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

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

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

التبعيات

إنشاء عنصر قابل للتجميع في شريط التطبيقات العلوي

أنشئ شريط تطبيق في أعلى الشاشة باستخدام العنصر القابل للتجميع MediumTopAppBar الذي ينكمش عندما ينتقل المستخدم للأسفل في منطقة المحتوى، ويتوسّع عندما ينتقل مجددًا إلى أعلى المحتوى:

النقاط الرئيسية حول الرمز

  • Scaffold خارجي تم ضبطه على TopBar
  • عنوان يتكوّن من عنصر Text واحد
  • شريط علوي تم تحديد إجراء واحد له
  • إجراء IconButton مع دالة لامدا onClick لتنفيذ الإجراء
  • IconButton يحتوي على Icon يتضمّن صورة رمز ونصًا لوصف المحتوى
  • يتم تحديد سلوك الانتقال للأعلى أو للأسفل للمحتوى الداخلي في Scaffold على النحو التالي: enterAlwaysScrollBehavior(). يؤدي ذلك إلى تصغير شريط التطبيق عندما يجذب المستخدم المحتوى الداخلي للأعلى، وتوسيع شريط التطبيق عندما يجذب المستخدم المحتوى الداخلي للأسفل.
  • بالإضافة إلى MediumTopBar التي تحتوي على العنوان، يمكنك أيضًا استخدام ما يلي:
    • TopAppBar: استخدِم هذا التصميم للشاشات التي لا تتطلّب الكثير من التنقّل أو الإجراءات.
    • CenterAlignedTopAppBar: استخدِم هذا المكوّن للصفحات التي تتضمّن إجراءً أساسيًا واحدًا.يتم وضع العنوان في منتصف المكوّن.
    • MediumTopAppBar: استخدِم هذا المقياس للشاشات التي تتطلّب قدرًا معتدلاً من التنقّل والإجراءات.
    • LargeTopAppBar: استخدِم هذا المقياس للشاشات التي تتطلّب الكثير من التنقّل والإجراءات. يستخدم هذا الرمز مساحة إضافية أكبر من MediumTopAppBar ويضع العنوان أسفل أي رموز إضافية.

النتائج

الشكل 1. شريط تطبيق متوسط الحجم في أعلى الشاشة

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

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

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

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

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