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