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

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

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

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

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

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

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

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

تعرَّف على عدد الميزات التي يمكن إضافتها إلى تطبيقك على الشاشات الكبيرة.

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

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

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

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

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

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

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

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

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

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

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

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

التنفيذ

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

إنشاء

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

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

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

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

طرق العرض والأجزاء

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

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

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

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

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

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

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

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

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

لمزيد من المعلومات، يمكنك الاطّلاع على مقالة تضمين الأنشطة.

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

الخلاصة

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

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

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

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

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

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

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

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

التنفيذ

إنشاء

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

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

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

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

للحصول على مثال على عملية التنفيذ، اطّلِع على النموذج خلاصة مع إنشاء رسالة.

طرق العرض والأجزاء

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

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

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

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

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

لوحة الدعم

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

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

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

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

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

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

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

التنفيذ

إنشاء

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

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

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

للحصول على مثال لعملية التنفيذ، يُرجى الاطّلاع على نموذج لوحة الدعم مع ميزة "الإنشاء".

طرق العرض والأجزاء

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

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

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

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

للاطّلاع على أمثلة على التنفيذ، يُرجى مراجعة النماذج التالية:

العرض

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

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

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

مراجع إضافية