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

Canonical layouts are proven, versatile layouts that provide an optimal user experience on a variety of form factors.

Depiction of large screen devices showing the canonical layouts.

The canonical layouts support small screen phones as well as tablets, foldables, and ChromeOS devices. Derived from Material Design guidance, the layouts are aesthetic as well as functional.

The Android framework includes specialized components that make implementation of the layouts straightforward and reliable.

The canonical layouts create engaging, productivity‑enhancing UIs that form the foundation of great apps.

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

List-detail

Wireframe of list-detail layout.

The list-detail layout enables users to explore lists of items that have descriptive, explanatory, or other supplementary information—the item detail.

The layout divides the app window into two side-by-side panes: one for the list, one for the detail. Users select items from the list to display the item detail. Deep links in the detail reveal additional content in the detail pane.

Expanded-width displays (see Use window size classes) accommodate both the list and detail at the same time. Selection of a list item updates the detail pane to show the related content for the selected item.

Medium- and compact-width displays show either the list or the detail, depending on user interaction with the app. When just the list is visible, selection of a list item displays the detail in place of the list. When just the detail is visible, pressing the back button redisplays the list.

Configuration changes such as device orientation changes or app window size changes can change the display's window size class. A list‑detail layout responds accordingly, preserving app state:

  • If an expanded-width display showing both the list and detail panes narrows to medium or compact, the detail pane remains visible and the list pane is hidden
  • If a medium- or compact-width display has just the detail pane visible and the window size class widens to expanded, the list and detail are shown together, and the list indicates that the item corresponding to the content in the detail pane is selected
  • If a medium- or compact-width display has just the list pane visible and widens to expanded, the list and a placeholder detail pane are shown together

List-detail is ideal for messaging apps, contact managers, interactive media browsers or any app where the content can be organized as a list of items that reveal additional information.

Figure 1. Messaging app showing a list of conversations and the details of a selected conversation.

Implementation

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

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

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

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

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

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

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

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

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

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

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

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

Feed

Wireframe of feed layout.

A feed layout arranges equivalent content elements in a configurable grid for quick, convenient viewing of a large amount of content.

Size and position establish relationships among the content elements.

Content groups are created by making elements the same size and positioning them together. Attention is drawn to elements by making them larger than nearby elements.

Cards and lists are common components of feed layouts.

A feed layout supports displays of almost any size because the grid can adapt from a single, scrolling column to a multi‑column scrolling feed of content.

Feeds are especially well suited for news and social media apps.

Figure 2. Social media app showing posts in cards of varying sizes.

Implementation

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

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

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

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

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

Supporting pane

Wireframe of supporting pane layout.

Supporting pane layout organizes app content into primary and secondary display areas.

The primary display area occupies the majority of the app window (typically about two thirds) and contains the main content. The secondary display area is a pane that takes up the remainder of the app window and presents content that supports the main content.

Supporting pane layouts work well on expanded-width displays (see Use window size classes) in landscape orientation. Medium- or compact‑width displays support showing both the primary and secondary display areas if the content is adaptable to narrower display spaces, or if the additional content can be initially hidden in a bottom or side sheet accessible by means of a control such as a menu or button.

A supporting pane layout differs from a list‑detail layout in the relationship of the primary and secondary content. Secondary pane content is meaningful only in relation to the primary content; for example, a supporting pane tool window is irrelevant by itself. The supplementary content in the detail pane of a list‑detail layout, however, is meaningful even without the primary content, for example, the description of a product from a product listing.

Use cases for supporting pane include:

Figure 3. Shopping app with product descriptions in a supporting pane.

Implementation

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

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

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

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

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

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

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

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

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

Additional resources