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

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

تتوافق التصاميم الأساسية مع الهواتف ذات الشاشات الصغيرة والأجهزة اللوحية والأجهزة القابلة للطي وأجهزة 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. تطبيق وسائط اجتماعية يعرض المشاركات في بطاقات بأحجام مختلفة

التنفيذ

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

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

بالنسبة إلى عناوين الأقسام أو الفواصل أو العناصر الأخرى المصمّمة لتشغل العرض الكامل للخلاصة، استخدِم 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

يكمن سرّ الخلاصة التكيُّفية في إعدادات columns. تنشئ السمة GridCells.Adaptive(minSize = 180.dp) شبكة يكون فيها كل عمود بعرض 180.dp على الأقل. بعد ذلك، تعرض الشبكة أكبر عدد ممكن من الأعمدة التي يمكن أن تتسع لها المساحة المتاحة.

للاطّلاع على مثال على التنفيذ، يمكنك مراجعة نموذج الخلاصة باستخدام Compose.

لوحة الدعم

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

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

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

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

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

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

الشكل 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

مراجع إضافية

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