يستفيد التطبيق الذي يمتد من الحافة إلى الحافة من الشاشة بأكملها من خلال عرض واجهة المستخدم تحت أشرطة النظام.
الخلاصات
- رسم الخلفية والمحتوى القابل للتمرير أسفل أشرطة النظام للحصول على تجربة عرض من الحافة إلى الحافة
- تجنَّب إضافة إيماءات النقر أو سحب العناصر المستهدَفة ضمن الحواف الداخلية للنظام، لأنّ ذلك يتعارض مع وضع "من الحافة إلى الحافة" والتنقّل بالإيماءات.
عرض المحتوى خلف أشرطة النظام
تتيح لك ميزة "من الحافة إلى الحافة" عرض واجهة المستخدم تحت أشرطة النظام للحصول على تجربة غامرة.
يمكن للتطبيق معالجة التداخلات في المحتوى من خلال الاستجابة للمساحات الداخلية. توضّح الحواف الداخلية مقدار المساحة التي يجب تركها حول محتوى تطبيقك لتجنُّب التداخل مع أشرطة النظام أو ميزات الجهاز المادية، مثل الفتحات في الشاشة. يمكنك الاطّلاع على كيفية توفير دعم العرض من الحافة إلى الحافة والتعامل مع المساحات الداخلية في Compose وViews.
يُرجى الانتباه إلى أنواع الحواف الداخلية التالية عند تصميم حالات استخدام من الحافة إلى الحافة:
- تنطبق حشوات شريط النظام على واجهة المستخدم التي يمكن النقر عليها والتي يجب ألا تحجبها أشرطة النظام بصريًا.
- تنطبق إضافات إيماءات النظام على مناطق التنقّل بالإيماءات التي يستخدمها نظام التشغيل والتي لها الأولوية على تطبيقك.
- تنطبق إضافات صورة مقطوعة للشاشة على مناطق الأجهزة التي تمتد إلى مساحة عرض الشاشة، مثل فتحة الكاميرا.
اعتبارات شريط الحالة
اطّلِع على أشرطة نظام التشغيل Android للحصول على إرشادات أساسية بشأن تصميم أشرطة النظام. يناقش القسم التالي اعتبارات إضافية بشأن شريط الحالة.
المحتوى القابل للتمرير
يجب تصغير أشرطة التطبيقات العلوية أثناء التمرير. تعرَّف على كيفية تصغير شريط التطبيق العلوي في Material 3. في Material 3، يمكن تصغير أشرطة التطبيق العلوية الصغيرة إلى ارتفاع شريط الحالة أو إزالتها من الشاشة عند التمرير سريعًا. يمكن تصغير أشرطة التطبيقات المتوسطة والكبيرة الحجم في أعلى الشاشة إلى شريط تطبيق أصغر. اطّلِع على إرشادات Material.
الإجراءات التي يُنصح بها
الإجراءات التي يُنصح بها
يجب أن تكون أشرطة الحالة شفافة عندما تتنقّل واجهة المستخدم إلى الأسفل، حتى لا تبدو رموز شريط الحالة مزدحمة. لتحقيق ذلك، عليك أولاً إنشاء واجهة مستخدم قابلة للتمرير من الحافة إلى الحافة من خلال تنفيذ الخطوات الواردة في مستندات LazyColumn أو RecyclerView. بعد ذلك، تأكَّد من أنّ شريط النظام شفاف من خلال تنفيذ أحد الإجراءات التالية:
- استخدِم ميزة الحماية التلقائية في TopAppBar المستندة إلى Material 3 عند التمرير، إذا كان ذلك منطبقًا.
- أنشئ عنصرًا قابلاً للإنشاء بتدرّج ألوان مخصّص أو استخدِم GradientProtection مع طرق العرض. لمزيد من المعلومات حول كيفية إجراء ذلك في Compose، يُرجى الاطّلاع على حماية شريط النظام.
بالنسبة إلى التخطيطات التكيّفية، احرص على توفير وسائل حماية منفصلة للألواح التي تتضمّن ألوان خلفية مختلفة.
لا
الإجراءات التي يُنصح بها
وبالمثل، يجب أن تتضمّن أدراج التنقّل أيضًا حماية منفصلة عن بقية التطبيق.
لا تجمع بين وسائل الحماية في شريط الحالة، مثلاً باستخدام كلّ من ميزة الحماية المضمَّنة في TopAppBar من Material 3 وميزة حماية مخصَّصة.
اعتبارات شريط التنقّل
اطّلِع على أشرطة نظام التشغيل Android للحصول على إرشادات أساسية بشأن تصميم شريط التنقّل. يتضمّن القسم التالي اعتبارات إضافية بشأن شريط التنقّل.
المحتوى القابل للتمرير
يجب تصغير أشرطة التطبيقات السفلية أثناء التمرير.
الإجراءات التي يُنصح بها
الإجراءات التي يُنصح بها
الأجزاء المقطوعة من الشاشة
يمكن أن تؤثر القطع على الشاشة في مظهر واجهة المستخدم. يجب أن تتعامل التطبيقات مع مساحات صورة مقطوعة للشاشة الداخلية كي لا يتم عرض الأجزاء المهمة من واجهة المستخدم أسفل صورة مقطوعة للشاشة.
الإجراءات التي يُنصح بها
لا
ومع ذلك، يجب أن يتم عرض خلفيات شريط التطبيق الثابتة في صورة مقطوعة للشاشة كما هو موضّح في الصورة التالية.
تأكَّد من أنّ لوحات العرض الدوّارة الأفقية تظهر في موضع القطع على الشاشة.
يمكنك الاطّلاع على كيفية توفير دعم لفتحات الشاشة في Compose وViews.
إرشادات أخرى
بشكل عام، يجب أيضًا عرض الخلفيات وخطوط الفواصل من الحافة إلى الحافة، بينما يجب إدراج المحتوى، مثل النصوص والأزرار، لتجنُّب عناصر واجهة مستخدِم النظام وعناصر الأجهزة.