تُعدّ التنسيقات الأساسية مثبَتة ومتعددة الاستخدامات توفّر تجربة مثالية للمستخدم على مجموعة متنوعة من أشكال الأجهزة.
تتوافق التنسيقات الأساسية مع الهواتف ذات الشاشات الصغيرة بالإضافة إلى الأجهزة اللوحية والأجهزة القابلة للطي وأجهزة ChromeOS. تستند التنسيقات إلى إرشادات التصميم المتعدد الأبعاد، وهي ملفتة للنظر وعملية في الوقت نفسه.
يتضمّن إطار عمل Android مكونات مخصّصة تسهّل تنفيذ التنسيقات بشكل مباشر وموثوق.
تُنشئ التنسيقات الأساسية واجهات مستخدم جذابة تعزّز الإنتاجية، وهي تشكل أساس التطبيقات الرائعة.
عرض على شكل قائمة مع تفاصيل
يتيح تخطيط تفاصيل القائمة للمستخدمين استكشاف قوائم العناصر التي تحتوي على معلومات وصفية أو توضيحية أو معلومات تكميلية أخرى - تفاصيل العنصر.
يقسم التخطيط نافذة التطبيق إلى جزأين متجاورين: أحدهما للقائمة، والآخر للتفاصيل. يختار المستخدمون سلعًا من القائمة لعرض تفاصيلها. تؤدي الروابط المؤدية إلى صفحات معيّنة في التفاصيل إلى عرض محتوى إضافي في لوحة التفاصيل.
تلائم الشاشات ذات العرض الموسّع (راجِع استخدام فئات حجم النوافذ) كلّ من القائمة والتفاصيل في الوقت نفسه. يؤدي اختيار عنصر من القائمة إلى تعديل panedetail لعرض المحتوى ذي الصلة بالعنصر المحدّد.
تعرض شاشات العرض ذات العرض المتوسط والمدمَج إما القائمة أو التفاصيل، وذلك استنادًا إلى تفاعل المستخدم مع التطبيق. عندما تكون القائمة فقط مرئية، يؤدي اختيار أحد عناصر القائمة إلى عرض التفاصيل بدلاً من القائمة. عندما تكون التفاصيل فقط مرئية، يؤدي الضغط على زر الرجوع إلى إعادة عرض القائمة.
يمكن أن تؤدي تغييرات الإعدادات، مثل تغييرات اتجاه الجهاز أو تغييرات حجم نافذة التطبيق، إلى تغيير فئة حجم نافذة العرض. يستجيب تنسيق قائمة التفاصيل وفقًا لذلك، مع الحفاظ على حالة التطبيق:
- إذا تم تصغير شاشة العرض ذات العرض الموسّع التي تعرض كلّ من لوحتَي القائمة والتفاصيل ليصبح حجمها متوسطًا أو صغيرًا، تظل لوحة التفاصيل ظاهرة ويتم إخفاء لوحة القائمة.
- إذا كان العرض المتوسط أو المكثّف يعرض جزء التفاصيل فقط وتم توسيع فئة حجم النافذة لتوسيعها، يتم عرض القائمة والتفاصيل معًا، وتشير القائمة إلى أنّه تم تحديد العنصر المقابل للمحتوى في جزء التفاصيل
- إذا كانت شاشة العرض متوسطة أو مدمجة العرض لا تعرض سوى لوحة القائمة ويتم توسيعها إلى وضع موسّع، يتم عرض القائمة ولوحة تفاصيل العنصر النائب معًا.
يُعدّ عرض التفاصيل في شكل قائمة مثاليًا لتطبيقات المراسلة أو مدراء جهات الاتصال أو برامج تصفّح الملفات أو أي تطبيق يمكن فيه تنظيم المحتوى كقائمة من العناصر التي تكشف عن معلومات إضافية.
التنفيذ
The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).
To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.
When showing just the detail pane on small window sizes, add a BackHandler
to remove the detail pane and display just the list pane. The BackHandler is
not part of the overall app navigation since the handler is dependent on the
window size class and selected detail state.
For an example implementation, see the List-detail with Compose sample.
الخلاصة
يرتب تنسيق الخلاصة عناصر المحتوى المكافئة في شبكة قابلة للتهيئة للحصول على عرض سريع ومناسب لكمية كبيرة من المحتوى.
يحدّد الحجم والموضع العلاقات بين عناصر المحتوى.
يتم إنشاء مجموعات المحتوى من خلال جعل العناصر متماثلة الحجم ووضعها معًا. يتمّ جذب الانتباه إلى العناصر من خلال جعلها أكبر من العناصر المجاورة.
إنّ البطاقات والقوائم هي مكوّنات شائعة لتنسيقات الخلاصات.
يتيح تنسيق الخلاصة العروض بأي حجم تقريبًا لأن الشبكة يمكن أن تتكيف من عمود تمرير واحد إلى خلاصة تمرير متعددة الأعمدة للمحتوى.
تُعدّ الخلاصات مناسبة بشكل خاص لتطبيقات الأخبار ووسائل التواصل الاجتماعي.
التنفيذ
A feed consists of a large number of content elements in a vertical scrolling container laid out in a grid. Lazy lists efficiently render a large number of items in columns or rows. Lazy grids render items in grids, supporting configuration of the item sizes and spans.
Configure the columns of the grid layout based on the available display area to set the minimum allowable width for grid items. When defining grid items, adjust column spans to emphasize some items over others.
For section headers, dividers, or other items designed to occupy the full width
of the feed, use maxLineSpan to take up the full width of the layout.
On compact-width displays that don't have enough space to show more than one
column, LazyVerticalGrid behaves just like a LazyColumn.
For an example implementation, see the Feed with Compose sample.
اللوحة الداعمة
يُنظِّم تنسيق اللوحة المتوافق مع الشاشة محتوى التطبيق في مساحتَي الشاشة الأساسية والثانوية.
تشغل منطقة العرض الأساسية معظم مساحة نافذة التطبيق (عادةً ثلثيها تقريبًا) وتحتوي على المحتوى الرئيسي. منطقة العرض الثانوية عبارة عن جزء يشغل ما تبقى من نافذة التطبيق ويقدم المحتوى الذي يدعم المحتوى الرئيسي.
تعمل تنسيقات اللوحة المتوافقة بشكل جيد مع شاشات العرض الموسّعة (راجِع استخدام فئات حجم النافذة) في الاتجاه الأفقي. شاشات العرض ذات العرض المتوسط أو المكثّف تتيح إظهار منطقتي العرض الأساسية والثانوية إذا كان المحتوى قابلاً للتكيف مع مساحات العرض الأضيق، أو إذا كان من الممكن إخفاء المحتوى الإضافي مبدئيًا في ورقة سفلية أو جانبية يمكن الوصول إليها عن طريق عناصر تحكم مثل قائمة أو زر.
يختلف تنسيق اللوحة الداعمة عن تنسيق التفاصيل في القائمة من حيث علاقة المحتوى الأساسي بالمحتوى الثانوي. لا يكون محتوى اللوحة الثانوية مفعّلاً إلا في ما يتعلّق بالمحتوى الأساسي. على سبيل المثال، لا تكون نافذة أداة اللوحة الداعمة ذات صلة بحد ذاتها. ومع ذلك، فإنّ المحتوى الإضافي في لوحة التفاصيل من تنسيق التفاصيل في القائمة يكون ذا معنى حتى بدون المحتوى الأساسي، على سبيل المثال، وصف منتج من بطاقة بيانات المنتج.
تشمل حالات استخدام اللوحة الداعمة ما يلي:
- تطبيقات الإنتاجية: وثيقة أو جدول بيانات مصحوبة بتعليقات المراجع في جزء داعم
- تطبيقات الوسائط: فيديو يتم بثه مع قائمة بالفيديوهات ذات الصلة في لوحة داعمة، أو عرض ألبوم موسيقي مع ميزة إضافة قائمة تشغيل
- تطبيقات البحث والرجوع: نموذج إدخال طلب بحث مع النتائج في 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.
مصادر إضافية
- تصميم متعدد الأبعاد: التنسيقات الأساسية