تصميم بلا حدود

يستفيد التطبيق الذي يملأ الشاشة من الشاشة بأكملها من خلال رسم واجهة المستخدم أسفل أشرطة النظام.

الخلاصات

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

عرض المحتوى خلف أشرطة النظام

تتيح لك ميزة "العرض على كامل الشاشة" رسم واجهة المستخدم تحت أشرطة النظام للحصول على تجربة غامرة.

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

يُرجى الانتباه إلى الأنواع التالية من المساحات المتروكة عند تصميم حالات استخدام العرض على كامل الشاشة:

• تنطبق مساحات أشرطة النظام على واجهة المستخدم التي يمكن النقر عليها والتي يجب ألا يحجبها شريط النظام.
• تنطبق إيماءات نظام التشغيل على مناطق التنقّل بالإيماءات التي يستخدمها نظام التشغيل والتي لها الأولوية على تطبيقك.
• تنطبق مساحات صورة مقطوعة للشاشة على مناطق الأجهزة التي تمتد إلى مساحة عرض الشاشة، مثل الجزء المقتطع للكاميرا.

اعتبارات شريط الحالة

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

محتوى قابل للتمرير

يجب تصغير أشرطة التطبيقات العلوية أثناء التمرير. كيفية تصغير شريط التطبيقات العلوي في Material 3 في Material 3، يمكن تصغير أشرطة التطبيقات العلوية الصغيرة إلى ارتفاع شريط الحالة أو التمرير خارج الشاشة. يمكن تصغير أشرطة التطبيقات العلوية المتوسطة والكبيرة إلى شريط تطبيقات أصغر. يُرجى الاطّلاع على [إرشادات Material‏][10].

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

• الاعتماد على الحماية التلقائية في TopAppBar في Material 3 عند التمرير، إن أمكن
• إنشاء دالة مركّبة مخصّصة للتدرج أو استخدام GradientProtection لطرق العرض لمزيد من المعلومات حول كيفية إجراء ذلك في Compose، يُرجى الاطّلاع على حماية شريط النظام.

بالنسبة إلى التنسيقات التكيُّفية، تأكَّد من توفّر وسائل حماية منفصلة للأجزاء ذات ألوان الخلفية المختلفة.

وبالمثل، يجب أن تحتوي لوائح التنقل أيضًا على حماية منفصلة عن بقية التطبيق.

لا تضع وسائل حماية شريط الحالة فوق بعضها، مثلاً باستخدام كل من الحماية المضمّنة في TopAppBar من Material 3 والحماية المخصّصة.

اعتبارات شريط التنقل

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

محتوى قابل للتمرير

يجب تصغير [BottomAppBar][10] أثناء التمرير باستخدام المَعلمة scrollBehavior.

ومع ذلك، يجب إبقاء [NavigationBar]11 مرئيًا أثناء الانتقال للأعلى أو للأسفل لأنّه لا يتضمّن مَعلمة scrollBehavior.

الصور المقطوعة للشاشة

يمكن أن تؤثر الصور المقطوعة للشاشة في مظهر واجهة المستخدم. يجب أن تتعامل التطبيقات مع مساحات صورة مقطوعة للشاشة بحيث لا يتم عرض أجزاء مهمة من واجهة المستخدم تحت صورة مقطوعة للشاشة.

ومع ذلك، يجب أن تظهر خلفيات شريط التطبيقات غير الشفافة في الصورة المقطوعة للشاشة كما هو موضّح في الصورة التالية.

تأكَّد من أنّ لوحات العرض الدوّارة الأفقية تظهر في الصورة المقطوعة للشاشة.

يمكنك الاطّلاع على كيفية إتاحة الصور المقطوعة للشاشة في Compose.

إرشادات أخرى

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