السلام عليكم درسنا في الدرس السابق كيفية وضع الـ views على الشاشة والتحكم في مواقعها على الشاشة , اما في هذا الدرس سنتعلم كيفية التحكم في احجامها بالاعتماد على حجم شاشة الجهاز الذي يشتغل عليه التطبيق كما سنتعلم في هذا الدرس كيفية تصميم واحهة UI لتطبيق اندرويد تتلائم مع جميع احجام الشاشات المحتلفة.
كماهو معروف ان نظام الاندرويد مفتوح المصدر وهذا مايعني إن بإمكان الجميع استخدامه وتخصيصه وهكذا نجد الكثير من الشركات المصنعة للهواتف تتخذ من نظام الاندرويد كنظام تشغيل للهواتف التي تقوم بانتاجها كمثال على تلك الشركات Samsung و HTC و LG وغيرها من الشركات. وهذا يعني اننا سنجد احجام شاشات مختلفة ودقات مختلفة للشاشات .
ويبقى التحدي لمبرمج تطبيقات اندرويد كيف يقوم انتاج تطبيق يتلائم مع جميع مقاسات ودقات الشاشات وسنتعلم في هذا الدرس كيفية ذلك .
لكي نقوم بتصميم واجهة تتلائم مع جميع مقاسات واحجام الشاشات لابد ان تعرف بعض المفاهيم الاساسية وهو ما سنتعلمه في هذا الدرس :-
1-ماهو حجم الشاشة Screen Size؟
2-ماهي كثافة الشاشة screen density؟
3-ماهو دقة الشاشة screen resoiution؟
4- وحدات قياس أحجام المكونات Views في الاندرويد
4- وحدات قياس أحجام المكونات Views في الاندرويد
5-ماهي الكثافة المعتمدة على البكسل density indenepdent pixle؟
6-ماهو scaled pixels؟
ونبدأ بشرح بهذا المفاهيم
1-ماهو حجم الشاشة Screen Size؟
تاتي احجام الشاشات بأربع فئات وهي : small, normal, large, extra
Large كما في الصورة ادناه:
2-ماهي كثافة الشاشة screen density؟
تأتي هناك اربع فئات لكثافات الشاشة وهي:-
1-xhdp.(الكثافة الاعلى)
2-hdpi.(كثافة عالية )
3-mdpi.(كثافة متوسطة)
4-ldpi.(كثافة منخفضة)
وهو ما ستلاحظه فعليا عند انشاء أي مشروع اندرويد يكون هناك مجلد خاص بالصور وايقونات التطبيق كمافي الصورة ادناه:
حيث يحتوي كل مجلد على الصور والايقونات الخاصة بكل نوع من أنواع كثافة الشاشة حيث كل جهاز اندرويد يحتوي على كثافة شاشة مختلفة من جهاز لاخر كما تبينه الصورة ادناه :
نلاحظ من الصورة ثلاث دوائرحيث تمثل كل دائرة مايلي:-
الدائرة 1 : تمثل الكثافة العالية حيث تحتوي النقطة الواحدة من الشاشة على 9 بكسل.
الدائرة 2 : تمثل الكثافة المتوسطة حيث تحتوي النقطة الواحدة من الشاشة على 4 بكسل.
الدائرة 1 : تمثل الكثافة العالية حيث تحتوي النقطة الواحدة من الشاشة على 9 بكسل.
الدائرة 2 : تمثل الكثافة المتوسطة حيث تحتوي النقطة الواحدة من الشاشة على 4 بكسل.
الدائرة 3 : تمثل الكثافة العالية حيث تحتوي النقطة الواحدة من الشاشة على1 بكسل.
ولهذا لاينصح باستخدام البكسل في قياس احجام المكونات views فانه فان البكسل الواحد لايحتوي على عدد نفس النقاط وذلك باختلاف كثافة شاشة الجهاز وهذا سيؤدي إلى ختلاف احجام المكونات views على الشاشة باختلاف احجام وكثافة الشاشة وهذا ما لانريده .. نريد
ان تظهر المكونات views بنفس الحجم مهما اختلفت كثافة وحجم الشاشة.
توجد هناك وحدات قياس للاندرويد كما في الصورة ادناه:
ويقصد بهذا المفهوم :- مثلا لو قمت بوضع عنصر على الشاشة وقمت بتحديد بعض الخواص كالطول والعرض الخ.. بالاعتماد على dpi فإنك لن تكون مهتما كيف سيظهر شكل هذا العنصر على الشاشات المختلفة فإن نظام الاندرويد سيقوم بهذه المهمة بالنيابة عنك لان النظام يقوم بتحويل dpi إلى بكسل عندما يكون تطبيقك شغال وذلك لاعطاء حجم مناسب للمكون على الشاشة وتتم عملية التحويل باستخدام المعادلة الاتية:
3-ماهو دقة الشاشة screen resoiution؟
هو عدد البكسلات الموجودة في الشاشة ولاينصح باستخدامها في وضع احجام المكونات views على الشاشة ينصح فقط بالتعامل مع حجم الشاشة وكثافتها.
4- وحدات قياس أحجام المكونات Views في الاندرويد
وسنقوم الان بشرحها:
1- mm , in , pt :-وتعتمد اعتماد كليا على حجم الشاشة الفيزيائي ولاينصح باستخدامها.
2- dp :- وهي وحدة قياس الكثافة للشاشة وسيتم شرحها بالتفصيل في الفصل القادم من هذا الدرس.
3- sp :- وهي وحدة قياس تستخدم لقياس احجام النصوص والخطوط وسيتم شرحها بالتفصيل في هذا الدرس.
5-ماهي الكثافة المعتمدة على البكسل density indenepdent pixle؟
(Px=dp*(dots per inch in your device /160
حيث من المعادلة إعلاه تبين لك عدد البكسلات التي سيأخذها العنصر على الشاشة كما في الجدول التالي:-
حيث 1dpi يمثل 0.75 بكسل على الشاشة الخ..
ولتوضيح اكثر انظر إلى الصورة ادناه حيث تم وضع نفس العنصر على شاشتين مختلفتين في الكقافة dpi لاحظ الفرق بينهما:
حيث dpi بالنسبة للصورة العلوية =148
وال dpi بالنسبة للصورة الثانية= 208
نلاحظ من الصورتين انه تم وضع جميع العناصر بنفس الترتيب ونفس الحجم رغم اختلاف الكثافة dpi للشاشتين .
ولهذا ينصح باستخدام الـ dpi لقياس احجام العناصر views على الشاشة.
لكن ماذا يحدث إذا لم نقم باستخدام dpi لقياس احجام العناصر على الشاشة ؟؟
إذا لم نقوم باستخدام dpi ستظهر العناصر باحجام مختلفة عندما تختلف الكثافة للشاشات كما في الصورة ادناه:
نلاحظ من الصورة أعلاه اختلاف احجام العناصر باختلاف الشاشات عندما لم نقوم باستخدام الـ dpi والعكس.
6-ماهو scaled pixels؟
كما ذكرنا سبقا ان الـ dpi يستخدم لوضع احجام المكونات views على الشاشة.. لكن scaled pixles يستخدم لوضع احجام الخطوط ويتم تطبيقه على حجم النص في الشاشات المختلفة كما في الصورة ادناه:
لاحظ من الصورة أعلاه اختلاف النص باختلاف dpi للشاشة لهذه لابد إن يتم استخدام sp لقياس احجام الخطوط:
لهذا عندما يتم استخدام sp في احجام الخطوط سيظهر الخط بنفس الحجم مهما اختلفت احجام الشاشات والعكس صحيح.
خلاصة الدرس هي:
قم باستخدام الـ dp في قياس احجام المكونات مثل Button,TextView ,EditText الخ..
وقم باستخدام sp في قياس احجام الخطوط والنصوص..
وهنا نكون وصلنا إلى نهاية الدرس ..
ارجو ان يكون الدرس مفهوم ورايكم يهمني بالتعليقات.
