الثلاثاء، 30 أغسطس 2016

الدرس 18-أساسيات تصميم الواجهات User Interface في الاندرويد الجزء الثاني


السلام عليكم درسنا في الدرس السابق  كيفية وضع الـ views  على الشاشة والتحكم في مواقعها على الشاشة , اما في هذا الدرس سنتعلم كيفية التحكم في احجامها بالاعتماد على حجم شاشة الجهاز الذي يشتغل عليه التطبيق كما سنتعلم في هذا الدرس كيفية تصميم واحهة UI  لتطبيق اندرويد تتلائم مع جميع احجام الشاشات المحتلفة.







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

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

لكي نقوم بتصميم واجهة تتلائم مع جميع مقاسات واحجام الشاشات لابد ان تعرف بعض المفاهيم الاساسية وهو ما سنتعلمه في هذا الدرس :-

1-ماهو حجم الشاشة Screen Size؟
2-ماهي كثافة الشاشة screen density؟
3-ماهو دقة الشاشة screen resoiution؟
4- وحدات قياس أحجام المكونات Views  في الاندرويد
5-ماهي الكثافة المعتمدة على البكسل density indenepdent pixle؟ 
6-ماهو scaled pixels؟

ونبدأ بشرح بهذا المفاهيم

1-ماهو حجم الشاشة Screen Size؟

يقاس الحجم الفيزيائي للشاشة بطول قطر الشاشة.
تاتي احجام الشاشات بأربع فئات وهي : small, normal, large, extra Large   كما في الصورة ادناه:


2-ماهي كثافة الشاشة screen density؟

هي عبارة عن عدد البكسلات في الانش الواحد  1 inch من الشاشة وهو  ما يعرف بـ dpiـ   (dots per inch) .
تأتي هناك اربع فئات لكثافات الشاشة وهي:-
1-xhdp.(الكثافة الاعلى)
2-hdpi.(كثافة عالية )
3-mdpi.(كثافة متوسطة)
4-ldpi.(كثافة منخفضة)

وهو ما ستلاحظه فعليا عند انشاء أي مشروع اندرويد يكون هناك مجلد خاص بالصور وايقونات التطبيق كمافي الصورة ادناه:


حيث يحتوي كل مجلد على الصور والايقونات الخاصة بكل نوع من أنواع كثافة الشاشة حيث كل جهاز اندرويد يحتوي على كثافة شاشة مختلفة من جهاز لاخر  كما تبينه الصورة ادناه :


نلاحظ من الصورة ثلاث دوائرحيث تمثل كل دائرة مايلي:-
الدائرة 1 : تمثل الكثافة العالية حيث تحتوي النقطة الواحدة من الشاشة على 9 بكسل.
الدائرة 2 : تمثل الكثافة المتوسطة حيث تحتوي النقطة الواحدة من الشاشة على 4 بكسل.
الدائرة 3 : تمثل الكثافة العالية حيث تحتوي النقطة الواحدة من الشاشة على1 بكسل.

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



3-ماهو دقة الشاشة screen resoiution؟


هو عدد البكسلات الموجودة في الشاشة ولاينصح باستخدامها في وضع احجام المكونات views على الشاشة ينصح فقط بالتعامل مع حجم الشاشة وكثافتها.

4- وحدات قياس أحجام المكونات Views  في الاندرويد

توجد هناك وحدات قياس للاندرويد كما في الصورة ادناه:



وسنقوم الان بشرحها:
1-  mm , in , pt :-وتعتمد اعتماد كليا على حجم الشاشة الفيزيائي ولاينصح باستخدامها.
2- dp :- وهي وحدة قياس الكثافة للشاشة وسيتم شرحها بالتفصيل في الفصل القادم من هذا الدرس.
3- sp :-  وهي وحدة قياس تستخدم لقياس احجام النصوص والخطوط وسيتم شرحها بالتفصيل في هذا الدرس.


5-ماهي الكثافة المعتمدة على البكسل density indenepdent pixle؟ 

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

(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 في قياس احجام الخطوط والنصوص..

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

جميع الحقوق محفوضة لدى مدونة مطيع الجابري |

تصميم : مدونة علوم و تقنيات