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