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

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

الخلاصات

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

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

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

حِزم الكثافة

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

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

الشكل 2: قطعة شمام بكثافة كل منها

لاحتساب وحدة بكسل مستقلة الكثافة:

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

الشبكات

الشبكة الأساسية

يساعد الإنشاء باستخدام شبكة أساسية في إنشاء تباعد ومحاذاة متناسقة عبر واجهة المستخدم لديك. واجهة مستخدم Android تستخدم شبكة بحجم 8 وحدات بكسل مستقلة الكثافة للتخطيط والمكونات والمسافات.

الفيديو 1: عرض شبكة من 8 وحدات بكسل مستقلة الكثافة مع إبراز 8 وحدات بكسل مستقلة الكثافة (dp)

من الأفضل محاذاة العناصر الأصغر مثل الرموز والنوع وبعض العناصر داخل المكونات مع شبكة بحجم 4 وحدات بكسل مستقلة الكثافة.

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

شبكة الأعمدة

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

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

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

فئات المقاسات

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

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

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

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

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

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