الشبكات والوحدات

إنّ وحدات البكسل غير المرتبطة بالكثافة (dp) ووحدات البكسل القابلة للتوسّع (sp) ضرورية ل إنشاء تنسيقات وعرض خطوط تستجيب بشكلٍ موحّد للمجموعة الواسعة من كثافات الشاشة وفئات الحجم وأشكال الأجهزة ونسب العرض إلى الارتفاع التي تشكّل أجهزة Android.

الخلاصات

  • إذا كنت تستخدم شبكة أساسية، التزم بالمقاييس 4 و8.
  • يجب تدوين المواصفات بوحدات dp وsp بدلاً من البكسل.
  • تصدير الرسومات الممسوحة ضوئيًا/المخطّطة لجميع الحِزم
  • يجب تصميم المحتوى مع وضع التنسيقات المختلفة في الاعتبار، مثل فئات الحجم ودرجات الدقة و نسب العرض إلى الارتفاع.
  • وحدات البكسل المستقلة الكثافة (dp): وحدات البكسل المستقلة الكثافة هي units مرنة يتم تكبيرها للحصول على أبعاد متّسقة على أي شاشة. وتستند إلى الكثافة المادية للشاشة. تكون هذه الوحدات نسبية لشاشة بكثافة 160 نقطة لكل بوصة (نقطة لكل بوصة)، حيث يساوي 1 وحدة بكسل مستقلة الكثافة تقريبًا 1 بكسل.
  • وحدات البكسل القابلة للتوسّع (sp): تؤدي وحدات البكسل القابلة للتوسّع الوظيفة نفسها التي تؤديها وحدات البكسل غير المرتبطة بالكثافة، ولكن للخطوط. القيمة التلقائية لـ sp هي نفسها القيمة التلقائية لملف dp. يحسب نظام Android حجم الخط الفعلي المراد استخدامه استنادًا إلى الجهاز والإعدادات المفضّلة للمستخدم التي تم ضبطها في تطبيق "الإعدادات" على جهاز Android.
الشكل 1: كتابة dp مقابل sp

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

يستخدم نظام التشغيل Android هذه الوحدات للمساعدة في التوسيع والترجمة على مستوى مجموعة الأجهزة ودرجات الدقة.

حِزم الكثافة

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

يُجمِّع نظام التشغيل Android نطاقات كثافة الشاشة في "مجموعات" ويستخدمها ل عرض المجموعة المثلى من مواد العرض على جهازك. إنّ مجموعات الكثافة الأكثر استخدامًا هي mdpi وhdpi وxhdpi وxxhdpi وxxxhdpi (يشيرnodpi و anydpi إلى مجموعة لا يتم توسيعها حسب درجة دقة الجهاز، وعادةً ما يتم استخدامها لعناصر الرسم المتجه)، ويتوافق كل منها مع ملف موارد في تطبيقك.

تبلغ كثافة mdpi x1، وكثافة hdpi x1.5،
            وتبلغ كثافة xhdpi x2، وكثافة xxhdpi x3،
            وتبلغ كثافة xxxhdpi x4.
الشكل 2: شمام حفلة بكثافات مختلفة

لاحتساب dp:

‫dp = (العرض بالبكسل * 160) / كثافة الشاشة

الشبكات

شبكة الإعلانات الأساسية

يساعد استخدام شبكة أساسية في إنشاء مسافات وموضع متسقين في واجهة المستخدم. تستخدِم واجهة مستخدم Android شبكة بكثافة 8 dp للتخطيط والمكوّنات والتباعد.

الفيديو 1: عرض شبكة بكثافة 8 dp مع تمييز الزيادة بمقدار 8 dp

إنّ العناصر الأصغر حجمًا، مثل الأيقونات والنص وبعض العناصر ضمن المكوّنات، تتم alinment بأفضل شكل مع شبكة 4 dp.

الشكل 3: تُعدّ الشبكات التي تبلغ دقتها 8 نقاط تناسب معظم عناصر واجهة المستخدم، في حين أنّه تُعدّ الشبكة التي تبلغ دقتها 4 نقاط تناسب العناصر الأصغر حجمًا، مثل الرموز.

شبكة الأعمدة

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

الشكل 4: شبكة من أربعة أعمدة

اطّلِع على صفحة التنسيقات الأساسية في Material 3 للحصول على تفاصيل حول إنشاء تصاميم مرنة على جميع أشكال الأجهزة.

فئات الحجم

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

نِسب العرض إلى الارتفاع

نسبة العرض إلى الارتفاع هي نسبة عرض العنصر إلى ارتفاعه. تتم كتابة نسب العرض إلى الارتفاع على النحو التالي: العرض:الارتفاع.

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

ننصحك باستخدام نسب العرض إلى الارتفاع التالية في واجهة المستخدم:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3