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

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

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

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

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

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

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

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

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

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

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

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

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

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

التنفيذ

Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和详情窗格（当宽度窗口大小类别为展开时），还是只显示列表窗格或详情窗格（当宽度窗口大小类别为中等或紧凑时）。

为确保单向数据传输，请提升所有状态，包括当前窗口大小类别和所选列表项（如有）的详情，以便所有可组合项都可以访问相应数据并进行正确的呈现。

当小窗口中只显示详情窗格时，添加 BackHandler 即可移除详情窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序依赖于窗口大小类别和所选详情的状态。

ListDetailPaneScaffold 是一种高级可组合项，可简化列表-详情布局的实现。它会根据窗口大小类别自动处理窗格逻辑，并支持在窗格之间导航。

以下是使用 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

以下是此示例中的关键组件：

• rememberListDetailPaneScaffoldNavigator：创建一个导航器，用于管理列表窗格和详情窗格之间的导航。
• listPane：显示项列表。
• detailPane：显示所选项的内容。

如需查看详细的实现示例，请参阅：

• 构建列表-详情布局开发者指南
• list-detail-compose 列表-详情示例

الخلاصة

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

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

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

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

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

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

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

التنفيذ

Feed 包含大量内容元素，这些内容元素位于一个纵向滚动容器中，而该容器采用网格布局。延迟列表可高效地在列或行中呈现大量的项。延迟网格以网格形式呈现项，支持配置项的大小和 span。

根据可用的显示区域配置网格布局的列，以设置网格项允许的最小宽度。定义网格项时，只需调整列 span 即可让某些项比其他项更为醒目。

对于部分标题、分隔线或要占据 Feed 的整个宽度的其他项，请使用 maxLineSpan 占据布局的整个宽度。

如果较小宽度的显示屏没有足够的空间来显示一个以上的列，LazyVerticalGrid 就会像 LazyColumn 一样运行。

下面是使用 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

自适应 Feed 的关键在于 columns 配置。 GridCells.Adaptive(minSize = 180.dp) 创建一个网格，其中每列至少为 180.dp 宽。然后，网格会显示尽可能多的列，以适应可用空间。

如需查看示例实现，请参阅使用 Compose 构建 Feed 示例。

لوحة الدعم

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

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

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

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

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

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

الشكل 3. تطبيق تسوّق يعرض أوصاف المنتجات في جزء جانبي

التنفيذ

Compose 支持窗口大小类别逻辑，可用于确定是同时显示主要内容和辅助内容，还是将辅助内容放置在其他位置。

提升所有状态，包括当前窗口大小类别以及与主要内容和辅助内容中的数据相关的信息。

对于较小宽度的显示屏，可将辅助内容放置在主要内容下方或底部动作条中。对于中等宽度和较大宽度的显示屏，可将辅助内容放置在主要内容旁边，并根据内容和可用空间适当调整辅助内容的大小。对于中等宽度的显示屏，可在主要内容和辅助内容之间平均分配显示空间。对于展开宽度，可为主要内容分配 70% 的空间，并为辅助内容分配 30% 的空间。

SupportingPaneScaffold 是一种高级可组合项，可简化对辅助窗格布局的实现。该可组合函数会根据窗口大小类别自动处理窗格逻辑，在大屏幕上并排显示窗格，或在小屏幕上隐藏辅助窗格。SupportingPaneScaffold 还支持窗格之间的导航。

以下是最低限度的实现：

@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：用于创建导航器以管理窗格可见性（例如，在紧凑型屏幕上隐藏或显示支持窗格）的可组合函数
• mainPane：用于显示主要内容的可组合项
• supportingPane：用于显示补充内容的可组合项

如需查看详细的实现示例，请参阅：

• 构建辅助窗格布局 开发者指南
• supporting-pane-compose 示例

مراجع إضافية

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