التنسيقات الأساسية للشاشة الكبيرة

تم التأكّد من أنّ التنسيقات الأساسية للشاشات الكبيرة هي تخطيطات تطبيقات متعدّدة الاستخدامات توفّر تجربة مثالية للمستخدم على الأجهزة ذات الشاشات الكبيرة.

تصوير أجهزة ذات شاشات كبيرة تعرض التنسيقات الأساسية

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

يتضمّن إطار عمل Android مكوّنات متخصّصة تجعل عملية تنفيذ التنسيقات سهلة وموثوقة باستخدام طرق العرض أو Jetpack Compose.

تنشئ التنسيقات الأساسية واجهات مستخدم جذابة ومعزّزة للإنتاجية تشكّل الأساس للتطبيقات الرائعة.

إذا كنت معتادًا على التنسيقات الأساسية للشاشات الكبيرة، ولكنّك غير متأكّد من واجهات برمجة تطبيقات Android التي يجب استخدامها في تطبيقك، انتقِل إلى قسم قابلية التطبيق أدناه للحصول على المساعدة في تحديد التنسيق المناسب لحالات استخدام تطبيقك.

تصميمات تجربة المستخدم للشاشات الكبيرة

اكتشِف مقدار الميزات المتاحة في تطبيقك على الشاشات الكبيرة.

يمكنك زيارة معرض الشاشات الكبيرة للاطّلاع على مجموعة منظَّمة من تنسيقات الشاشات الكبيرة.

إجراء جولة
الأجهزة ذات الشاشات الكبيرة تعرض مجموعة متنوعة من التنسيقات.

عرض على شكل قائمة مع تفاصيل

إطار شبكي لتخطيط القائمة التفصيلية.

يتيح تخطيط تفاصيل القائمة للمستخدمين استكشاف قوائم العناصر التي تحتوي على معلومات وصفية أو توضيحية أو غيرها من المعلومات التكميلية - تفاصيل العنصر.

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

تتوافق شاشات العرض ذات العرض الموسَّع (اطّلِع على فئات حجم النافذة) مع كل من القائمة والتفاصيل في الوقت نفسه. يؤدي اختيار عنصر قائمة إلى تعديل جزء التفاصيل لعرض المحتوى ذي الصلة بالعنصر المحدّد.

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

يمكن أن تؤدي تغييرات الإعدادات، مثل تغييرات اتجاه الجهاز أو تغييرات حجم نافذة التطبيق، إلى تغيير فئة حجم نافذة العرض. ويستجيب تنسيق القائمة التفصيلي وفقًا لذلك، مع الحفاظ على حالة التطبيق:

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

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

الشكل 1. تطبيق مراسلة يعرض قائمة بالمحادثات وتفاصيل محادثة تم اختيارها

التنفيذ

يمكن إنشاء تنسيق تفاصيل القائمة باستخدام مجموعة متنوعة من التكنولوجيات، بما في ذلك الإنشاء وطرق العرض وتضمين الأنشطة (للتطبيقات القديمة). ويمكنك الاطّلاع على قابلية التطبيق أدناه للحصول على مساعدة في تحديد التكنولوجيا الأكثر ملاءمةً لتطبيقك.

إنشاء

يدعم النموذج التعريفي Compose منطق فئة حجم النافذة الذي يحدد ما إذا كان سيتم عرض أجزاء القائمة والتفاصيل في الوقت نفسه (عند توسيع فئة حجم النافذة للعرض) أو جزء القائمة أو جزء التفاصيل فقط (عندما تكون فئة حجم النافذة العرض متوسطة أو مكثفة).

لضمان تدفق البيانات في اتجاه أحادي الاتجاه، يمكنك رفع حالة كل العناصر، بما في ذلك فئة حجم النافذة الحالية وتفاصيل العنصر المحدّد حاليًا (إن وُجد)، حتى يمكن لجميع العناصر القابلة للإنشاء الوصول إلى البيانات وعرض الصورة بشكل صحيح.

عند عرض جزء التفاصيل على أحجام النوافذ الصغيرة فقط، يمكنك إضافة BackHandler لإزالة جزء التفاصيل وعرض جزء القائمة فقط. لا يمثِّل BackHandler جزءًا من التنقّل العام داخل التطبيق لأنّ المعالج يعتمد على فئة حجم النافذة وحالة التفاصيل المحدّدة.

للحصول على مثال لعملية تنفيذ، يُرجى الاطّلاع على النموذج List-detail with Compose.

طرق العرض والأقسام

تم تصميم مكتبة SlidingPaneLayout لتنفيذ تنسيقات القائمة التفصيلية استنادًا إلى طرق العرض أو الأجزاء.

أولاً، عليك تعريف SlidingPaneLayout كعنصر جذر لتنسيق XML. بعد ذلك، أضِف العنصرَين الفرعيَين اللذَين يمثّلان القائمة والمحتوى التفصيلي، إما طرق العرض أو الأجزاء.

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

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

للحصول على مثال لعملية التنفيذ، اطّلِع على النموذج تفاصيل القائمة مع ملفات شخصية.

تضمين الأنشطة

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

يمكنك تنفيذ ميزة تضمين الأنشطة من خلال تحديد تقسيم نافذة المهمة باستخدام ملف إعداد XML. يحدد التقسيم النشاط الأساسي الذي يبدأ التقسيم، والنشاط الثانوي. حدِّد حدًّا أدنى لعرض العرض للتقسيم باستخدام نقاط الفواصل الإعلانية لفئة حجم النافذة. عندما يكون عرض الشاشة أقل من الحد الأدنى للنقطة، يتم عرض الأنشطة واحدة فوق الأخرى. على سبيل المثال، إذا كان الحدّ الأدنى لعرض الشاشة هو 600 بكسل مستقل الكثافة، يتم عرض الأنشطة فوق الأخرى على الشاشات المكثّفة، ولكن جنبًا إلى جنب على الشاشات المتوسطة والموسَّعة.

يتوفّر تضمين الأنشطة على الإصدار 12L من نظام التشغيل Android (المستوى 32 لواجهة برمجة التطبيقات) والإصدارات الأحدث، ولكن قد يكون متاحًا أيضًا على مستويات واجهة برمجة التطبيقات الأدنى في حال طبّقته الشركات المصنّعة للأجهزة. عندما لا يكون تضمين الأنشطة متاحًا على أحد الأجهزة، يؤدي السلوك الاحتياطي إلى نشاط القائمة أو نشاط التفاصيل الذي يشغل نافذة التطبيق بالكامل استنادًا إلى تفاعل المستخدم مع التطبيق.

لمزيد من المعلومات، يُرجى الاطّلاع على تضمين الأنشطة.

للحصول على مثال لعملية التنفيذ، يمكن الاطّلاع على النموذج تفاصيل القائمة مع تضمين النشاط.

الخلاصة

الإطار الشبكي لتخطيط الخلاصة

يرتب تنسيق الخلاصة عناصر المحتوى المكافئة في شبكة قابلة للتهيئة للحصول على عرض سريع وسهل لكمية المحتوى الكبيرة.

ينشئ الحجم والموضع علاقات بين عناصر المحتوى.

يتم إنشاء مجموعات المحتوى من خلال جعل العناصر بنفس الحجم ووضعها معًا. يتم جذب الانتباه إلى العناصر من خلال جعلها أكبر من العناصر القريبة.

البطاقات والقوائم هي عناصر شائعة في تنسيقات الخلاصات.

يتيح تخطيط الخلاصة العروض بأي حجم تقريبًا لأن الشبكة يمكن أن تتكيف من عمود تمرير واحد إلى خلاصة تمرير متعددة الأعمدة للمحتوى.

تكون الخلاصات مناسبة بشكل خاص لتطبيقات الأخبار ووسائل التواصل الاجتماعي.

الشكل 2. تطبيق تواصل اجتماعي يعرض مشاركات في بطاقات بأحجام مختلفة

التنفيذ

إنشاء

تتألف الخلاصة من عدد كبير من عناصر المحتوى في حاوية تمرير رأسي بتنسيق شبكة. تعرض القوائم الكسولة عددًا كبيرًا من العناصر في أعمدة أو صفوف بكفاءة. تعرض الشبكات الكسولة العناصر في الشبكات، ما يتيح ضبط أحجام العناصر وامتداداتها.

قم بتهيئة أعمدة تخطيط الشبكة بناءً على مساحة العرض المتاحة لتعيين الحد الأدنى للعرض المسموح به لعناصر الشبكة. عند تحديد عناصر الشبكة، اضبط امتدادات الأعمدة للتأكيد على بعض العناصر على غيرها.

بالنسبة إلى عناوين الأقسام أو الفواصل أو العناصر الأخرى المصمّمة لتشغل عرض الخلاصة بالكامل، استخدِم maxLineSpan لشغل عرض التنسيق الكامل.

في الشاشات ذات العرض المكثّف التي لا تتضمّن مساحة كافية لعرض أكثر من عمود واحد، تعمل LazyVerticalGrid تمامًا مثل LazyColumn.

للحصول على مثال على عملية التنفيذ، يمكنك الاطّلاع على نموذج الخلاصة باستخدام ميزة Compose.

طرق العرض والأقسام

تعرض RecyclerView عددًا كبيرًا من العناصر في عمود واحد بكفاءة. تعرض GridLayoutManager العناصر في شبكة، ما يسمح بضبط أحجام العناصر وامتداداتها.

يمكنك ضبط أعمدة الشبكة استنادًا إلى حجم مساحة العرض المتاحة لضبط الحدّ الأدنى لعرض العناصر المسموح به.

يمكن إلغاء استراتيجية التمديد التلقائية GridLayoutManager، التي تبلغ امتدادًا واحدًا لكل عنصر، من خلال إنشاء SpanSizeLookup مخصّص. اضبط الامتداد لإبراز بعض العناصر على غيرها.

في الشاشات ذات العرض المكثّف التي تتضمن مساحة كافية لعمود واحد فقط، استخدِم LinearLayoutManager بدلاً من GridLayoutManager.

للحصول على مثال لعملية التنفيذ، يُرجى الاطّلاع على عيّنة الخلاصة التي تتضمّن مشاهدات.

لوحة الدعم

إطار شبكي لدعم تخطيط اللوحة.

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

وتشغل منطقة العرض الأساسية معظم نافذة التطبيق (حوالي ثلثين عادةً) وتحتوي على المحتوى الرئيسي. منطقة العرض الثانوية هي جزء يشغل بقية نافذة التطبيق ويقدم المحتوى الذي يدعم المحتوى الرئيسي.

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

يختلف تخطيط الجزء الداعم عن تخطيط قائمة تفاصيل في علاقة المحتوى الأساسي والثانوي. يكون محتوى الجزء الثانوي مفيدًا فقط في ما يتعلق بالمحتوى الأساسي؛ على سبيل المثال، نافذة أداة اللوحة الداعمة ليست ذات صلة في حد ذاتها. ومع ذلك، فإن المحتوى التكميلي في جزء التفاصيل الخاص بتنسيق قائمة تفاصيل المنتج له معنى حتى بدون المحتوى الأساسي، على سبيل المثال، وصف منتج من بيانات المنتج.

تشمل حالات استخدام لوحة الدعم ما يلي:

  • تطبيقات الإنتاجية: مستند أو جدول بيانات مصحوب بتعليقات المراجع في لوحة داعمة
  • تطبيقات الوسائط: بث فيديو مباشر مكمّل بقائمة من الفيديوهات ذات الصلة في لوحة داعمة، أو عرض لألبوم موسيقي مع قائمة تشغيل
  • تطبيقات البحث والمراجع: نموذج إدخال طلب بحث مع نتائج في لوحة الدعم
الشكل 3. تطبيق Shopping يعرض أوصافًا للمنتجات في لوحة داعمة

التنفيذ

إنشاء

تدعم ميزة إنشاء الرسائل منطق فئة حجم النافذة، الذي يتيح لك تحديد ما إذا كان سيتم عرض كل من المحتوى الرئيسي والمحتوى المتوافق في الوقت نفسه، أو وضع المحتوى المتوافق في موقع بديل.

ارفع كل الحالة، بما في ذلك فئة حجم النافذة الحالية والمعلومات المتعلقة بالبيانات في المحتوى الرئيسي والمحتوى المتوافق.

بالنسبة إلى الشاشات ذات العرض المكثّف، يُرجى وضع المحتوى الداعم أسفل المحتوى الرئيسي أو داخل بطاقة سفلية. بالنسبة إلى العرض المتوسط والموسع، ضع المحتوى الداعم بجانب المحتوى الرئيسي، مع ضبط حجمه بشكل مناسب استنادًا إلى المحتوى والمساحة المتاحة. للحصول على عرض متوسط، قسِّم مساحة العرض بالتساوي بين المحتوى الرئيسي والمحتوى الداعم. للحصول على عرض موسّع، يجب تخصيص 70% من المساحة للمحتوى الرئيسي و30% للمحتوى الداعم.

للحصول على مثال لعملية التنفيذ، يُرجى الاطّلاع على نموذج لوحة الدعم باستخدام Compose.

طرق العرض والأقسام

يتم تنفيذ تنسيق جزء متوافق باستخدام تنسيق مساعد، مثل LinearLayout أو ConstraintLayout. أنشِئ فئات حجم النافذة التي تقسّم مقدار مساحة العرض الأفقية المتاحة لتطبيقك إلى ثلاث فئات: مُكثّف (< 600dp) ومتوسط (>= 600 بكسل مستقل الكثافة) وموسَّع (>= 840 بكسل مستقل الكثافة).

لكل فئة حجم نافذة، حدد التنسيقات على النحو التالي:

  • مكثف: في مجلد موارد التطبيق layout، ضَع المحتوى الذي يعرض لوحة الدعم أسفل المحتوى الرئيسي أو داخل بطاقة سفلية.
  • متوسط: في المجلد layout-w600dp، قدِّم محتوى الجزء الداعم الذي يؤدي إلى عرض المحتوى الرئيسي وعرض الجزء المتوافق جنبًا إلى جنب، مع تقسيم مساحة العرض الأفقية بالتساوي
  • موسّع: في المجلد layout-w840dp، يمكنك تضمين محتوى الجزء الداعم الذي يؤدي إلى عرض المحتوى الرئيسي وعرض اللوحة جنبًا إلى جنب؛ ومع ذلك، لا يشغل الجزء الدعم سوى 30٪ من المساحة الأفقية، مع ترك 70٪ المتبقية للمحتوى الرئيسي

استخدِم ViewModel للتواصل بين المحتوى الرئيسي والجزء المتوافق، سواء باستخدام طرق العرض أو الأجزاء أو مزيجًا من العناصر.

للحصول على أمثلة على التنفيذ، يمكنك الاطّلاع على النماذج التالية:

قابلية التطبيق

تنشئ التخطيطات الأساسية عروضًا تقديمية متعددة الأوجه للمحتوى لتيسير الوصول إليها والاستكشاف العميق. استخدِم المخطط الانسيابي التالي لتحديد استراتيجية التنسيق والتنفيذ الأنسب لحالات استخدام تطبيقك.

للاطّلاع على أمثلة للتنسيقات الأساسية التي تم تنفيذها في أنواع مختلفة من التطبيقات، يمكنك مراجعة معرض الشاشات الكبيرة.

الشكل 4. شجرة قرارات التنسيق الأساسي لشاشة كبيرة

مصادر إضافية