تُعدّ التنسيقات الأساسية مثبَتة ومتعددة الاستخدامات توفّر تجربة مثالية للمستخدم على مجموعة متنوعة من أشكال الأجهزة.
تتوافق التنسيقات الأساسية مع الهواتف ذات الشاشات الصغيرة بالإضافة إلى الأجهزة اللوحية والأجهزة القابلة للطي وأجهزة ChromeOS. تستند التنسيقات إلى إرشادات التصميم المتعدد الأبعاد، وهي ملفتة للنظر وعملية في الوقت نفسه.
يتضمّن إطار عمل Android مكونات مخصّصة تسهّل تنفيذ التنسيقات بشكل مباشر وموثوق.
تُنشئ التنسيقات الأساسية واجهات مستخدم جذابة تعزّز الإنتاجية، وهي تشكل أساس التطبيقات الرائعة.
إذا كنت على دراية بالتنسيقات الأساسية للتطبيق التكيُّفي، ولكنك لست للاطّلاع على واجهات برمجة تطبيقات Android المطلوب استخدامها، انتقِل إلى قابلية التطبيق. للمساعدة في تحديد التنسيق المناسب لحالات استخدام تطبيقك.
عرض على شكل قائمة مع تفاصيل
يتيح تخطيط تفاصيل القائمة للمستخدمين استكشاف قوائم العناصر التي تحتوي على معلومات وصفية أو توضيحية أو معلومات تكميلية أخرى - تفاصيل العنصر.
يقسم التخطيط نافذة التطبيق إلى جزأين متجاورين: أحدهما للقائمة، والآخر للتفاصيل. يختار المستخدمون سلعًا من القائمة لعرض تفاصيلها. تؤدي الروابط المؤدية إلى صفحات معيّنة في التفاصيل إلى عرض محتوى إضافي في لوحة التفاصيل.
تلائم الشاشات ذات العرض الموسّع (راجِع استخدام فئات حجم النوافذ) كلّ من القائمة والتفاصيل في الوقت نفسه. يؤدي اختيار عنصر من القائمة إلى تعديل panedetail لعرض المحتوى ذي الصلة بالعنصر المحدّد.
تعرض شاشات العرض ذات العرض المتوسط والمدمَج إما القائمة أو التفاصيل، وذلك استنادًا إلى تفاعل المستخدم مع التطبيق. عندما تكون القائمة فقط مرئية، يؤدي اختيار أحد عناصر القائمة إلى عرض التفاصيل بدلاً من القائمة. عندما تكون التفاصيل فقط مرئية، يؤدي الضغط على زر الرجوع إلى إعادة عرض القائمة.
يمكن أن تؤدي تغييرات الإعدادات، مثل تغييرات اتجاه الجهاز أو تغييرات حجم نافذة التطبيق، إلى تغيير فئة حجم نافذة العرض. يستجيب تنسيق قائمة التفاصيل وفقًا لذلك، مع الحفاظ على حالة التطبيق:
- إذا تم تصغير شاشة العرض ذات العرض الموسّع التي تعرض كلّ من لوحتَي القائمة والتفاصيل ليصبح حجمها متوسطًا أو صغيرًا، تظل لوحة التفاصيل ظاهرة ويتم إخفاء لوحة القائمة.
- إذا كان العرض المتوسط أو المكثّف يعرض جزء التفاصيل فقط وتم توسيع فئة حجم النافذة لتوسيعها، يتم عرض القائمة والتفاصيل معًا، وتشير القائمة إلى أنّه تم تحديد العنصر المقابل للمحتوى في جزء التفاصيل
- إذا كانت شاشة العرض متوسطة أو مدمجة العرض لا تعرض سوى لوحة القائمة ويتم توسيعها إلى وضع موسّع، يتم عرض القائمة ولوحة تفاصيل العنصر النائب معًا.
يُعدّ عرض التفاصيل في شكل قائمة مثاليًا لتطبيقات المراسلة أو مدراء جهات الاتصال أو برامج تصفّح الملفات أو أي تطبيق يمكن فيه تنظيم المحتوى كقائمة من العناصر التي تكشف عن معلومات إضافية.
التنفيذ
يمكن إنشاء تنسيق تفاصيل القائمة باستخدام مجموعة متنوعة من التكنولوجيات، بما في ذلك الإنشاء وطرق العرض وتضمين الأنشطة (للتطبيقات القديمة). راجِع قسم قابلية التطبيق للحصول على مساعدة في تحديد التكنولوجيا الأكثر ملاءمةً لتطبيقك.
تم تصميم مكتبة SlidingPaneLayout لتنفيذ تصاميم
قائمة التفاصيل استنادًا إلى طرق العرض أو الأجزاء.
أولاً، يجب تعريف SlidingPaneLayout كعنصر جذر لتنسيق XML.
بعد ذلك، أضِف العنصرَين الفرعيين، أي العرضَين أو المقتطفَين، اللذين يمثّلان المحتوى المعروض في القائمة والمحتوى التفصيلي.
نفِّذ منهجية تواصل لنقل البيانات بين طرق عرض التفاصيل في القائمة
أو الأجزاء. ننصحك باستخدام ViewModel بسبب قدرته على تخزين
منطق النشاط التجاري واستمرار عمله في حال تغيير الإعدادات.
يحدِّد SlidingPaneLayout تلقائيًا ما إذا كان سيتم عرض القائمة وال Detail معًا أو بشكلٍ منفصل. في نافذة بها مساحة أفقية كافية لاستيعاب
كِلا كليهما، تظهر القائمة والتفاصيل جنبًا إلى جنب. في نافذة
لا تتوفّر فيها مساحة كافية، يتم عرض القائمة أو التفاصيل استنادًا إلى
تفاعل المستخدم مع التطبيق.
للاطّلاع على مثال على التنفيذ، يمكنك الاطّلاع على نموذج التفاصيل في القائمة مع اللوحة المنزلقة.
تضمين الأنشطة
استخدِم ميزة "تضمين النشاط" لتفعيل التطبيقات القديمة التي تتضمّن عدّة أنشطة لعرض نشاطين بجانب بعضهما على الشاشة نفسها أو مُكدَّمَين (أحدهما مُتراكبًا على الآخر). إذا كان تطبيقك ينفّذ القائمة والتفاصيل في تنسيق قائمة مع تفاصيل في أنشطة منفصلة، يتيح لك تضمين الأنشطة إنشاء تنسيق قائمة مع تفاصيل بدون إعادة صياغة الرمز البرمجي أو بأقل قدر ممكن من إعادة الصياغة.
يمكنك تنفيذ ميزة تضمين الأنشطة من خلال تحديد تقسيم نافذة المهمة باستخدام ملف ضبط XML. يحدِّد التقسيم النشاط الأساسي الذي يبدأ عملية الالتقسيم، ونشاطًا ثانويًا. حدِّد الحد الأدنى لعرض الشاشة للقسم باستخدام نقاط التوقف لفئة حجم النافذة. عندما ينخفض عرض الشاشة عن الحد الأدنى لنقطة التوقف، يتم عرض الأنشطة فوق بعضها. على سبيل المثال، إذا كان الحد الأدنى لعرض الشاشة هو 600dp، يتم عرض الأنشطة فوق بعضها على الشاشات المدمجة، ولكن جنبًا إلى جنب على الشاشات المتوسطة والعريضة.
تتوفّر ميزة تضمين الأنشطة على الإصدار 12L من نظام التشغيل Android (المستوى 32 لواجهة برمجة التطبيقات) والإصدارات الأحدث، ولكن قد تتوفّر أيضًا على مستويات أقل لواجهة برمجة التطبيقات إذا نفّذها صنّاع الأجهزة. عندما لا يكون تضمين النشاط متاحًا على أحد الأجهزة، يؤدي السلوك البديل إلى أن يشغل نشاط القائمة أو نشاط التفاصيل نافذة التطبيق بالكامل استنادًا إلى تفاعل المستخدم مع التطبيق.
لمزيد من المعلومات، يُرجى الاطّلاع على تضمين الأنشطة.
للحصول على مثال على التنفيذ، اطّلِع على نموذج تفاصيل القائمة مع تضمين النشاط.
الخلاصة
يرتب تنسيق الخلاصة عناصر المحتوى المكافئة في شبكة قابلة للتهيئة للحصول على عرض سريع ومناسب لكمية كبيرة من المحتوى.
يحدّد الحجم والموضع العلاقات بين عناصر المحتوى.
يتم إنشاء مجموعات المحتوى من خلال جعل العناصر متماثلة الحجم ووضعها معًا. يتمّ جذب الانتباه إلى العناصر من خلال جعلها أكبر من العناصر المجاورة.
إنّ البطاقات والقوائم هي مكوّنات شائعة لتنسيقات الخلاصات.
يتيح تنسيق الخلاصة العروض بأي حجم تقريبًا لأن الشبكة يمكن أن تتكيف من عمود تمرير واحد إلى خلاصة تمرير متعددة الأعمدة للمحتوى.
تُعدّ الخلاصات مناسبة بشكل خاص لتطبيقات الأخبار ووسائل التواصل الاجتماعي.
التنفيذ
يعرض RecyclerView عددًا كبيرًا من العناصر بكفاءة في عمود واحد. يعرض GridLayoutManager العناصر في شبكة، ما يتيح
ضبط أحجام العناصر ومدى انتشارها.
يمكنك ضبط أعمدة الشبكة استنادًا إلى حجم مساحة العرض المتاحة لتحديد أدنى عرض مسموح به للعناصر.
يمكن إلغاء استراتيجية النطاق التلقائية GridLayoutManager، وهي نطاق واحد لكل عنصر،
من خلال إنشاء SpanSizeLookup مخصّص. اضبط المساحة لشدّ انتباه المستخدمين إلى بعض العناصر أكثر من غيرها.
في الشاشات ذات العرض المكثّف التي تتضمن مساحة كافية لعمود واحد فقط، استخدِم LinearLayoutManager بدلاً من GridLayoutManager.
للاطّلاع على مثال على التنفيذ، يمكنك الاطّلاع على نموذج الخلاصة التي تتضمّن مشاهدات.
اللوحة الداعمة
يُنظِّم تنسيق اللوحة المتوافق مع الشاشة محتوى التطبيق في مساحتَي الشاشة الأساسية والثانوية.
تشغل منطقة العرض الأساسية معظم مساحة نافذة التطبيق (عادةً ثلثيها تقريبًا) وتحتوي على المحتوى الرئيسي. منطقة العرض الثانوية عبارة عن جزء يشغل ما تبقى من نافذة التطبيق ويقدم المحتوى الذي يدعم المحتوى الرئيسي.
تعمل تنسيقات اللوحة المتوافقة بشكل جيد مع شاشات العرض الموسّعة (راجِع استخدام فئات حجم النافذة) في الاتجاه الأفقي. شاشات العرض ذات العرض المتوسط أو المكثّف تتيح إظهار منطقتي العرض الأساسية والثانوية إذا كان المحتوى قابلاً للتكيف مع مساحات العرض الأضيق، أو إذا كان من الممكن إخفاء المحتوى الإضافي مبدئيًا في ورقة سفلية أو جانبية يمكن الوصول إليها عن طريق عناصر تحكم مثل قائمة أو زر.
يختلف تنسيق اللوحة الداعمة عن تنسيق التفاصيل في القائمة من حيث علاقة المحتوى الأساسي بالمحتوى الثانوي. لا يكون محتوى اللوحة الثانوية مفعّلاً إلا في ما يتعلّق بالمحتوى الأساسي. على سبيل المثال، لا تكون نافذة أداة اللوحة الداعمة ذات صلة بحد ذاتها. ومع ذلك، فإنّ المحتوى الإضافي في لوحة التفاصيل من تنسيق التفاصيل في القائمة يكون ذا معنى حتى بدون المحتوى الأساسي، على سبيل المثال، وصف منتج من بطاقة بيانات المنتج.
تشمل حالات استخدام اللوحة الداعمة ما يلي:
- تطبيقات الإنتاجية: وثيقة أو جدول بيانات مصحوبة بتعليقات المراجع في جزء داعم
- تطبيقات الوسائط: فيديو يتم بثه مع قائمة بالفيديوهات ذات الصلة في لوحة داعمة، أو عرض ألبوم موسيقي مع ميزة إضافة قائمة تشغيل
- تطبيقات البحث والرجوع: نموذج إدخال طلب بحث مع النتائج في pane داعمة
التنفيذ
يتم تنفيذ تخطيط جزء داعم باستخدام تخطيط مساعد مثل
LinearLayout أو ConstraintLayout إنشاء فئات حجم النافذة
تقسم مقدار مساحة العرض الأفقية المتاحة لتطبيقك إلى
ثلاث فئات: مدمجة (أقل من 600 بكسل مستقل الكثافة)، ومتوسط (>= 600 بكسل مستقل الكثافة)، وموسّع
(>= 840 بكسل مستقل الكثافة).
لكل فئة من فئات حجم النوافذ، حدِّد التنسيقات على النحو التالي:
- مكثّف: في مجلد
layoutالخاص بموارد التطبيق، ضَع محتوى يؤدي إلى عرض اللوحة الداعمة أسفل المحتوى الرئيسي أو داخل ورقة سفلية. - متوسط: في مجلد
layout-w600dp، قدِّم محتوى اللوحة الداعمة الذي يؤدي إلى عرض المحتوى الرئيسي واللوحة الداعمة جنبًا إلى جنب، وقسم مساحة العرض الأفقية بالتساوي. - موسّع: في المجلد "
layout-w840dp"، يمكنك تضمين محتوى الجزء الداعم. تؤدي إلى عرض المحتوى الرئيسي وعرض الجزء المتوافق جنبًا إلى جنب؛ على الرغم من ذلك، لا يشغل الجزء الداعم سوى 30% من المساحة الأفقية، مع ترك 70% المتبقية للمحتوى الرئيسي
يمكنك استخدام ViewModel للتواصل بين المحتوى الرئيسي
لوحة الدعم، سواء باستخدام طرق العرض أو الأجزاء أو مزيجًا من العناصر.
للحصول على أمثلة على التنفيذ، يمكنك الاطّلاع على النماذج التالية:
قابلية التطبيق
تنشئ التخطيطات الأساسية عروضًا تقديمية متعددة الأوجه للمحتوى لتيسير الوصول إليها والاستكشاف العميق. استخدِم المخطّط الانسيابي التالي لتحديد استراتيجية التنفيذ والتنسيق الأنسب لحالات استخدام تطبيقك.
للاطّلاع على أمثلة للتنسيقات الأساسية التي تم تنفيذها في أنواع مختلفة من التطبيقات، يمكنك مراجعة معرض الشاشات الكبيرة.
مصادر إضافية
- تصميم متعدد الأبعاد: التنسيقات الأساسية