كثافات البكسل المختلفه

الإعلانات

دعم كثافات البكسل المختلفه

 

 

كثافات البكسل المختلفه

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

أي، بينما يحتوي أحد الأجهزة على 160 بكسل لكل بوصة مربعة، فإن جهاز آخر يناسب 480 بكسل في نفس المساحة.

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

تبين لك هذه الصفحة كيف يمكنك تصميم تطبيقك، ليدعم كثافات البكسل المختلفة، بإستخدام وحدات قياس مستقلة الدقه، وتوفير مصادر بديله للصور النقطيه لكل كثافة بكسل.

شاهد الفيديو أدناه للحصول على نظرة عامة عن هذه التقنيات.

لمزيد من المعلومات حول تصميم أصول الأيقونات الفعلية، راجع دليل مواد تصميم الأيقونات.

 

 

 

 

أستخدم بكسلات مستقلة الكثافة


أول عائق يجب عليك تجنبه هو إستخدام وحدة البكسل لتحديد المسافات أو الأحجام. دعم كثافات البكسل المختلفه

يعد تحديد الأبعاد بالبكسل مشكلة، لأن كثافة البكسل تختلف بإختلاف الشاشة، لذا نفس عدد البكسلات، قد يتطابق مع أحجام مادية مختلفة على أجهزة مختلفة.

الشكل 2: قد يكون لشاشتين من نفس الحجم عدد مختلف من وحدات البكسل

 

للحفاظ على الحجم المرئي من واجهة مستخدمك، على الشاشات ذات الكثافات المختلفة، يجب عليك تصميم واجهة مستخدمك، بإستخدام بكسلات مستقلة الكثافة (dp) كوحدة قياس.

واحد dp هي وحدة بكسل إفتراضية، تساوي تقريباً بكسل واحد، على شاشة متوسطة الكثافة (160 نقطة في البوصة؛ كثافة “خط الأساس”).

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

مثال، ضع في إعتبارك الجهازين في الشكل 2. إذا كنت ستحدد معاينة لتكون بعرض “100 بكسل”..

فستظهر كبيرة جداً على الجهاز الذي في الجانب الأيمن. لذا بدلاً من ذلك، يجب عليك إستخدام “100dp” لضمان ظهورها بنفس الحجم على كلتا الشاشتين.

عند تحديد أحجام النص، بدلاً من ذلك، يجب عليك إستخدام وحدات البكسل، القابلة للتحجيم (sp) كوحدات (ولكن لا تستخدم أبداً sp لتحديد أحجام المخطط).

إفتراضياً، وحدة sp تكون بنفس حجم وحدة dp، ولكن يتم تغيير حجمها بناءً على حجم النص المفضل للمستخدم.

مثال، عندما تحدد المسافة بين معاينتين، أستخدم وحدة dp:

<Button android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/clickme"
    android:layout_marginTop="20dp" />

عند تحديد حجم النص، إستخدم دائماً وحدة sp:

<TextView android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="20sp" />

 

 

 

 

 

تحويل وحدات dp إلى وحدات بكسل


في بعض الحالات، ستحتاج إلى التعبير عن الأبعاد بوحدة dp، ثم تحويلها إلى وحدة البكسل.

عملية تحويل وحدات dp إلى وحدات بكسل للشاشة بسيطة:

 

تخيل تطبيقاً، يتم فيه إدراك حركة التمرير أو حركة القذف، بعد تحريك إصبع المستخدم بمقدار 16 بكسل على الأقل.

على شاشة خط الأساس، يجب أن يتحرك المستخدم بمقدار 16 بكسل / 160 نقطة لكل بوصة، وهو ما يساوي 1/10 من البوصة (أو 2.5 مم) قبل إدراك الإيماءة.

أما على الجهاز المزود بشاشة عرض عالية الكثافة (240 نقطة في البوصة)، يجب أن يتحرك المستخدم بمقدار 16 بكسل / 240 نقطة لكل بوصة

وهو ما يساوي 1/15 من البوصة (أو 1.7 مم). المسافة أقصر بكثير وبالتالي سيظهر التطبيق أكثر حساسية “سريع جداً ” للمستخدم.

لإصلاح هذه المشكلة، يجب التعبير عن حد الإيماءة في الكود بوحدة dp ثم تحويلها إلى وحدات بكسل فعلية. مثال:

KOTLIN

// The gesture threshold expressed in dp
private const val GESTURE_THRESHOLD_DP = 16.0f
...
private var mGestureThreshold: Int = 0
...
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // Get the screen's density scale
    val scale: Float = resources.displayMetrics.density
    // Convert the dps to pixels, based on density scale
    mGestureThreshold = (GESTURE_THRESHOLD_DP * scale + 0.5f).toInt()

    // Use mGestureThreshold as a distance in pixels...
}

JAVA

// The gesture threshold expressed in dp
private static final float GESTURE_THRESHOLD_DP = 16.0f;

// Get the screen's density scale
final float scale = getResources().getDisplayMetrics().density;
// Convert the dps to pixels, based on density scale
mGestureThreshold = (int) (GESTURE_THRESHOLD_DP * scale + 0.5f);

// Use mGestureThreshold as a distance in pixels...

 

يحدد حقل DisplayMetrics.density معامل المقياس الذي يجب عليك إستخدامه، لتحويل وحدات dp إلى بكسل، بناءً على كثافة البكسل الحالية.

على شاشة متوسطة الكثافة، فإن DisplayMetrics.density يساوي 1.0؛ و على شاشة عالية الكثافة يساوي 1.5؛ على شاشة أعلى كثافة، يساوي 2.0 ؛ وعلى شاشة منخفضة الكثافة، يساوي 0.75.

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

 

 

 

 

أستخدم قيم التكوين المقاسه مسبقاً


يمكنك إستخدام فئة ViewConfiguration للوصول إلى المسافات، السرعات والأوقات الشائعة المستخدمة من قبل نظام الأندرويد.

مثال، يمكن الحصول على المسافة بالبكسل، و التي يستخدمها الإطار كحدود للتمرير بإستخدام ()getScaledTouchSlop:

KOTLIN

private val GESTURE_THRESHOLD_DP = ViewConfiguration.get(myContext).scaledTouchSlop

JAVA

private static final int GESTURE_THRESHOLD_DP = ViewConfiguration.get(myContext).getScaledTouchSlop();

 

الدوال في ViewConfiguration التي تبدأ بالبادئة getScaled ، تضمن إرجاع القيمة بالبكسل والتي سيتم عرضها بشكلٍ صحيح، بغض النظر عن كثافة البكسل الحالية.

 

 

 

توفير بدائل للصور النقطية


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

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

الشكل 1. الأحجام النسبية للصور النقطية في أحجام كثافات مختلفة

 

هناك العديد من مجموعات الكثافة، المتاحة للإستخدام في تطبيقاتك. يصف الجدول 1 مؤهلات التكوين المختلفة المتاحة، وأنواع الشاشة التي تناسبها.

 

جدول 1. مؤهلات التكوين لكثافات البكسل المختلفه. 

مؤهل الكثافه الوصف
ldpi مصادر للشاشات (ldpi) منخفضة الكثافة (~ 120 dpi)
mdpi مصادر للشاشات (mdpi) متوسطة الكثافه (~160 dpi)

(هذه هي الكثافة الأساسيه)

hdpi مصادر للشاشات (hdpi) عالية الكثافه (~240 dpi)
xhdpi مصادر للشاشات (xhdpi) عالية الكثافه اكسترا (~320 dpi)
xxhdpi مصادر للشاشات (xxhdpi) عالية الكثافة اكسترا اكسترا (~480 dpi)
xxxhdpi مصادر للشاشات (xxxhdpi) عالية الكثافة اكسترا اكسترا اكسترا (~640 dpi)
nodpi مصادر لجميع الكثافات. هذه مصادر مستقلة الكثافه. لا يقوم النظام بتحجيم المصادر الموسومة بهذا المؤهل، بغض النظر عن كثافة الشاشة الحاليه.
tvdpi مصادر للشاشات في مكان ما بين mdpi و hdpi؛ ما يقارب 213dpi. هذه لا تعتبر مجموعة كثافه “أساسيه”.

وهي مخصصة في الغالب لأجهزة التلفاز ومعظم التطبيقات لا تحتاج إليها، توفير مصادر mdpi و hdpi تعد أمراً كافياً لمعظم التطبيقات، وسيقوم النظام بتحجيمهم حسب الحاجه.

إذا وجدت أنه من الضروري توفير مصادر tvdpi، فيجب عليك قياسهم بعامل 1.33*mdpi. مثال، الصورة 100 بكسل * 100 بكسل للشاشات mdpi يجب أن تكون 133 بكسل * 133 بكسل tvdpi.

 

لإنشاء رسوميات نقطية بديله للكثافات المختلفة، يجب أن تتبع نسب القياس 3:4:6:8: 12:16 بين الكثافات الست الأساسيه.

مثال، إذا كانت لديك صورة نقطية بحجم 48 × 48 بكسل للشاشات متوسطة الكثافة، فيجب أن تكون جميع الأحجام المختلفة:

  • (36×36 (0.75x للكثافة المنخفضة (ldpi)
  • 48×48 (خط الأساس 1.0x) لمتوسطة الكثافة (mdpi)
  • (72×72 (1.5x للكثافة العالية (hdpi)
  • 96 × 96 (2.0x) للكثافة العالية جداً (xhdpi)
  • (144×144 (3.0x للكثافة عالية عالية الكثافة (xxhdpi)
  • (192×192 (4.0x للكثافة عالية عالية عالية الكثافة (xxxhdpi)

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

res/
  drawable-xxxhdpi/
    awesome-image.png
  drawable-xxhdpi/
    awesome-image.png
  drawable-xhdpi/
    awesome-image.png
  drawable-hdpi/
    awesome-image.png
  drawable-mdpi/
    awesome-image.png

 

ثم، متى ما أشرت إلى drawable/awesomeimage@، يقوم النظام بتحديد الصورة النقطية المناسبة بناءً على dpi (نقطة لكل بوصه) للشاشة.

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

 

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

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

 

 

 

ضع أيقونات التطبيق في أدلة mipmap


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

تعرض بعض منصات التطبيقات أيقونة تطبيقك بما يصل إلى 25% أكبر مما يسمى مجموعة كثافة الجهاز.

مثال، إذا كانت مجموعة كثافة الجهاز هي xxhdpi وكانت أيقونة التطبيق الأكبر التي قمت بتوفيرها تقع في drawable-xxhdpi ..

فإن منصة التطبيق ستزيد من مقاسات هذه الأيقونه، وهذا يجعلها تبدو أقل سلاسه. لذا يجب عليك توفير أيقونة منصه أعلى كثافة في الدليل  mipmap-xxxhdpi.

وهكذا يمكن للمنصه إستخدام الأصول بحجم xxxhdpi بدلاً من زيادة المقاسات.

لأنه قد يتم تكبير حجم أيقونة تطبيقك على هذا النحو، يجب عليك وضع جميع أيقونات تطبيقك في أدلة mipmap بدلاً من أدلة الرسوميات.

بعكس أدلة الرسوميات، يتم الإحتفاظ بجميع أدلة mipmap في ملف APK حتى لو كنت تنشئ ملفات APK محددة الكثافة.

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

res/
  mipmap-xxxhdpi/
    launcher-icon.png
  mipmap-xxhdpi/
    launcher-icon.png
  mipmap-xhdpi/
    launcher-icon.png
  mipmap-hdpi/
    launcher-icon.png
  mipmap-mdpi/
    launcher-icon.png

 

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

للحصول على مساعدة في إنشاء أيقونات التطبيقات، راجع إنشاء أيقونات التطبيقات بإستخدام Image Asset Studio.

 

 

 

 

أستخدم الرسومات المتجهة “رسوم فيكتور” بدلاً من ذلك


بديل لإنشاء إصدارات متعددة للكثافة المحدده للصورة، وهي تنشئ رسم فيكتور واحد فقط.

تقوم رسومات فيكتور بإنشاء صورة بإستخدام XML لتعريف المسارات والألوان، بدلاً من إستخدام صور البكسل النقطية.

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

على الرغم من أنها عادة ما تكون أفضل للصور التوضيحيه مثل الأيقونات، وليس للصور الفوتوغرافية.

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

يمكنك بسهوله تحويل ملف SVG إلى رسوم فيكتور من أندرويد ستوديو بإستخدام Vector Asset Studio كما يلي:

1- في نافذة المشروع، أنقر بزر الماوس الأيمن على الدليل res وحدد
New> Vector Asset.
2- حدد الملف المحلي (SVG ، PSD).
3- حدد موقع الملف الذي تريد إستيراده وقم بإجراء أي تعديلات.

الشكل 2. إستيراد ملف SVG بإستخدام Android Studio

 

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

ولكن هذا لن يمنعك من الإستيراد — فالخصائص الغير مدعومة يتم تجاهلها ببساطه.

4- أنقر فوق التالي. 

5- في الشاشة التالية، قم بتأكيد مجموعة المصدر حيث تريد أن يظهر الملف في مشروعك، ثم أنقر فوق إنهاء.

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

res/
  drawable/
    ic_android_launcher.xml

لمزيد من المعلومات حول إنشاء رسومات فيكتور، اقرأ وثائق رسومات فيكتوردعم كثافات البكسل المختلفه

 

 

 

 

نصيحة لمشاكل الكثافة الغير شائعه


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

وكيف يمكنك التحكم بشكلٍ أكبر في كيفية رسم الصور النقطية لكثافات مختلفة. ما لم يقم تطبيقك بمعالجة الرسومات…

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

لفهم أفضل لكيفية دعم الكثافات المتعددة، عند معالجة الرسومات أثناء التشغيل، يجب أن تفهم أن النظام يساعد على ضمان الوصول للمقياس المناسب للصور النقطية بالطرق التالية:

 

1- التحجيم المسبق للمصادر (مثل الرسوميات النقطية)

بناءً على كثافة الشاشة الحالية، يستخدم النظام أي مصادر للكثافات المحددة من تطبيقك.

في حالة عدم توفر المصادر بالكثافة المطلوبه، يقوم النظام بتحميل المصادر الإفتراضية ويقوم بإعادة قياسها “تكبير\تصغير” حسب الحاجة.

يفترض النظام أن المصادر الإفتراضية (الموجودة في دليل لا يحتوي مؤهلات تكوين) مصممة لكثافة البكسل الأساسية (mdpi)..

وسيقوم بإعادة تحجيم هذه الصور النقطية إلى الحجم المناسب لكثافة البكسل الحالية.

إذا طلبت أبعاد مصدر تم قياسه سابقاً، سيعيد النظام القيم التي تمثل الأبعاد بعد إعادة القياس.

مثال، يتم تغيير حجم الصورة النقطية المصممة عند الحجم 50×50 بكسل لشاشة mdpi إلى الحجم 75×75 بكسل على شاشة hdpi (إذا لم يكن هناك مصدر بديل لـ hdpi)..

ويقوم النظام بالإبلاغ عن الحجم على هذا الأساس. دعم كثافات البكسل المختلفه

هناك بعض الحالات التي قد لا ترغب فيها أن يقوم الأندرويد بتحجيم مصدر ما مسبقاً. إن أسهل طريقة لتجنب التحجيم المسبق..

هو بوضع المصدر في دليل المصادر بإستخدام مؤهل التكوين nodpi. مثال:

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

 

2-القياس التلقائي لأبعاد وإحداثيات البكسل

يمكنك تعطيل أبعاد وصور القياس المسبق عن طريق تعيين android:anyDensity إلى القيمه “خطأ” في ملف الإيضاح..

أو برمجياً للصورة النقطية من خلال تعيين inScaled إلى القيمة “خطأ”.

في هذه الحالة، يقوم النظام بالقياس التلقائي لأي إحداثيات بكسل مطلقة وقيم أبعاد البكسل أثناء الرسم.

يفعل هذا لضمان، أن عناصر الشاشة المحددة بالبكسل، لا تزال ظاهرة بنفس الحجم الفعلي تقريباً كما لو كانت عند كثافة البكسل الأساسية (mdpi).

يعالج النظام هذا التحجيم بشفافية للتطبيق، ويبلغ التطبيق عن أبعاد البكسل المقاسه، بدلاً من أبعاد البكسل الفعلية.

مثال، لنفترض أن جهازاً يحتوي على شاشة WVGA عالية الكثافة، التي تبلغ 480×800 وحجمها تقريباً بنفس حجم شاشة HVGA التقليدية..

ولكنها تشغل تطبيقاً قام بتعطيل ميزة المقياس المسبق. في هذه الحالة، سيقوم النظام “بالكذب” على التطبيق عندما يستعلم عن أبعاد الشاشة..

ويبلغ عن 320×533 (ترجمة mdpi التقريبية لكثافة البكسل). بعد ذلك ، عندما يقوم التطبيق بإجراء عمليات الرسم، مثل إبطال المستطيل من (10،10) إلى (100 ، 100)..

يقوم النظام بتحويل الإحداثيات عن طريق قياسها بالقيمة المناسبه، في الواقع إبطال المنطقة (15،15) إلى (150 ، 150).

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

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

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

 

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

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

فستحتاج إلى إستخدام قيم البكسل ذات الكثافة المستقلة، بدلاً من وحدات البكسل الفعلية، ولكن يمكنك التحويل بسهولة بين قيم dp و px.

 

 

 

 

إختبار على كافة كثافات البكسل


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

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

إذا كنت تفضل إجراء الإختبار على جهاز فعلي، ولكنك لا تريد شراء الأجهزة، فيمكنك إستخدام Firebase Test Lab للوصول إلى الأجهزة في مركز بيانات قوقل.

 


للإطلاع على المقال باللغة الإنجليزية أضغط هنا.

الإعلانات