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

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

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

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

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

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

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

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

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

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

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

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

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

التنفيذ

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.

ListDetailPaneScaffold is a high-level composable that simplifies the implementation of list-detail layouts. It automatically handles pane logic based on window size classes and supports navigation between panes.

Here is a minimal implementation using ListDetailPaneScaffold:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}
CanonicalLayoutSamples.kt

The following are the key components in this example:

• rememberListDetailPaneScaffoldNavigator: Creates a navigator to manage navigation between the list and detail panes.
• listPane: Displays the list of items.
• detailPane: Displays the content of a selected item.

For detailed implementation examples, see:

• Build a list-detail layout developer guide
• list-detail-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.

Here is a minimal implementation using LazyVerticalGrid:

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}
CanonicalLayoutSamples.kt

The key to an adaptive feed is the columns configuration. GridCells.Adaptive(minSize = 180.dp) creates a grid where each column is at least 180.dp wide. The grid then displays as many columns as can fit in the available space.

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

لوحة الدعم

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

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

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

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

تشمل حالات استخدام اللوحة الجانبية ما يلي:

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

التنفيذ

Compose supports window size class logic, which lets 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.

SupportingPaneScaffold is a high-level composable that simplifies the implementation of supporting pane layouts. The composable automatically handles pane logic based on window size classes, displaying panes side by side on large screens or hiding the supporting pane on small screens. SupportingPaneScaffold also supports navigation between panes.

The following is a minimal implementation:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}
CanonicalLayoutSamples.kt

• rememberSupportingPaneScaffoldNavigator: Composable that creates a navigator to manage pane visibility (for example, hiding or showing the supporting pane on compact screens)
• mainPane: Composable that displays the primary content
• supportingPane: Composable that displays the supplementary content

For detailed implementation examples, see:

• Build a supporting pane layout developer guide
• supporting-pane-compose sample

مراجع إضافية

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