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

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

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

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

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

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

If you're already familiar with the adaptive app canonical layouts but aren't sure which Android APIs to use, jump to the Applicability section for help determining which layout is right for your app's use cases.

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

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

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

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

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

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

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

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

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

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

التنفيذ

A list-detail layout can be created with a variety of technologies, including Compose, views, and activity embedding (for legacy apps). See the Applicability section for help deciding which technology is most suitable for your app.

The SlidingPaneLayout library is designed for implementation of list‑detail layouts based on views or fragments.

First, declare a SlidingPaneLayout as the root element of your XML layout. Next, add the two child elements—either views or fragments—that represent the list and detail content.

Implement a communication methodology to pass data between the list-detail views or fragments. ViewModel is recommended because of its ability to store business logic and survive configuration changes.

SlidingPaneLayout automatically determines whether to display the list and detail together or individually. In a window that has enough horizontal space to accommodate both, the list and detail appear side by side. In a window that lacks sufficient space, either the list or detail is displayed depending on the user's interaction with the app.

For an example implementation, see the List-detail with sliding pane sample.

activity 嵌入

借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。

如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。

Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。

如需了解详情，请参阅 activity 嵌入。

如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。

الخلاصة

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

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

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

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

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

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

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

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

التنفيذ

A RecyclerView efficiently renders a large number of items in a single column. A GridLayoutManager lays out items in a grid, allowing configuration of the item sizes and spans.

Configure the grid columns based on the size of the available display area to set the minimum allowable width for items.

The GridLayoutManager default spanning strategy, which is one span per item, can be overridden by creating a custom SpanSizeLookup. Adjust the span to emphasize some items over others.

On compact-width displays that have enough space for only one column, use LinearLayoutManager instead of GridLayoutManager.

For an example implementation, see the Feed with views sample.

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

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

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

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

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

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

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

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

التنفيذ

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

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

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

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

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

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

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

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

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

مصادر إضافية