التنسيقات الأساسية

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

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

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

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

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

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

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

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

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

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

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

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

التنفيذ

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

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

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

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

الخلاصة

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

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

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

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

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

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

التنفيذ

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

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

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

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

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

اللوحة الداعمة

يُنظِّم تنسيق اللوحة المتوافق مع الشاشة محتوى التطبيق في مساحتَي الشاشة الأساسية والثانوية.

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

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

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

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

• تطبيقات الإنتاجية: وثيقة أو جدول بيانات مصحوبة بتعليقات المراجع في جزء داعم
• تطبيقات الوسائط: فيديو يتم بثه مع قائمة بالفيديوهات ذات الصلة في لوحة داعمة، أو عرض ألبوم موسيقي مع ميزة إضافة قائمة تشغيل
• تطبيقات البحث والرجوع: نموذج إدخال طلب بحث مع النتائج في pane داعمة

التنفيذ

Compose supports window size class logic, which enables you to determine whether to show both the main content and the supporting content at the same time or place the supporting content in an alternative location.

Hoist all state, including current window size class and information related to the data in the main content and supporting content.

For compact-width displays, place the supporting content below the main content or inside a bottom sheet. For medium and expanded widths, place the supporting content next to the main content, sized appropriately based on the content and space available. For medium width, split the display space equally between the main and supporting content. For expanded width, give 70% of the space to the main content, 30% to the supporting content.

For an example implementation, see the Supporting pane with Compose sample.

مصادر إضافية

• تصميم متعدد الأبعاد: التنسيقات الأساسية