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