بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله وبركاته
في درس اليوم إنشاء الله سنتناول بعض التمارين اللازمة لإتقان تخطيط الواجهات ، أري البعض يتسائل لماذا لا نبدأ في كتابة أكواد الجافا JAVA حتي الأن ، و السبب في ذالك أنه يجب أن تتقن جيدا تخطيط الواجهات ، و تنظيمها جيدا حتي تعطيك نوع من المرونة في بناء تطبيقاتك على الأندرويد ، و الأن لنبدأ درس اليوم .
معظم شاشات الأندرويد تحمل هذه المواصفات resolution دقة = 800*480 و حجم الشاشة يكون في الغالب 3.7 إنشات مثل المخطط في الشكل القادم.
في درس اليوم إنشاء الله سنتناول بعض التمارين اللازمة لإتقان تخطيط الواجهات ، أري البعض يتسائل لماذا لا نبدأ في كتابة أكواد الجافا JAVA حتي الأن ، و السبب في ذالك أنه يجب أن تتقن جيدا تخطيط الواجهات ، و تنظيمها جيدا حتي تعطيك نوع من المرونة في بناء تطبيقاتك على الأندرويد ، و الأن لنبدأ درس اليوم .
الشاشات
و هنا أقصد بالشاشات هي الشاشات التي تكون في أجهزة الاندرويد مثل شاشات الأجهزة اللوحية و أجهزة الهواتف الذكية ، نجد أن كل الشاشات تحمل خواص فيزيائية مثل الحجم و الدقة resolution و الدقة هنا تقاس بعدد النقاط المضيئة علي شاشة الجهاز مثلا كام نقطة مضيئة في الطول و كم نقطه في العرض. و وحدة القياس هي البيكسيل pixel .معظم شاشات الأندرويد تحمل هذه المواصفات resolution دقة = 800*480 و حجم الشاشة يكون في الغالب 3.7 إنشات مثل المخطط في الشكل القادم.
عدد النقاط في الإنش الواحد يطلق عليها dpi و هي إختصار لكلمة dots per inch ، و بمعادلة بسيطه نستطيع أن نعرف عدد النقاط في الإنش الواحد عن طريق المعادلة الخطية c2 = a2 +b2 ، يتم التعويض عن c بعدد النقاط القطري في الشاشة و a و b هما الطول و العرض الخاصين بتلك الشاشة، و يتم التعويض في المعادلة كما في المثال التالي
c = 3,7 * dpi
(3,7 * dpi)2 = 4802 + 8002
dpi2 = 870400 / 13,69 = 63579
dpi = 252
ومن خلال تلك المعادلة نكتشف أن عدد النقاط في الإنش الواحد = 252 في حالة الشاشة ذات 3.7 إنشات
عرض و إرتفاع الواجهات
تحدثنا قليلا عن العرض (layout_width) والإرتفاع (layout_height) في الدرس السابق. في هذا الدرس سنقوم بتحديد بعض القيم المطلقة المستخدمة في تحديد الأحجام و المسافات في واجهات أندرويد.
- dp أو dip و تعني الكثافة غير وحدة البكسل و لكنها تسمح لتطبيقك بأن يعمل على منصات عمل كثيرة و هي المفضلة من قبل مطوري أندرويد
القيم المطلقة
- dp أو dip و تعني الكثافة غير وحدة البكسل و لكنها تسمح لتطبيقك بأن يعمل على منصات عمل كثيرة و هي المفضلة من قبل مطوري أندرويد
- sp و هي وحدة قياس مستقلة أيضا ولكنها تستخدم فقط في وضع قياس الخطوط الخاصة بالكتابة.
- pt و يتم تعريفها على أنها عبارة عن 1/72 من البوصة.
- px و تعني بكسيل و من أسمها واضح مقياسها ولكنها في الوقت نفسة غير مفضلة من قبل مطوري الأندرويد حيث أنها تعطي نتائج مختلفه في منصات العمل المختلفة .
- px و تعني بكسيل و من أسمها واضح مقياسها ولكنها في الوقت نفسة غير مفضلة من قبل مطوري الأندرويد حيث أنها تعطي نتائج مختلفه في منصات العمل المختلفة .
- MM هي المليمتر، يحددها الحجم المادي من الشاشة.
- IN = شبر واحد، يحددها الحجم المادي من الشاشة.
الثوابت
وهي القيم الثابتة التي تعطيها للخصائص فتقوم بعمل معين مثل
match_parent أو fill_parent - يعني أن العنصر سوف تحتل كل ما هو متاح العرض / الارتفاع في واجهة الإستخدام.
wrap_content - أي أن العرض/ الإرتفاع سيتم تحديده تلقائيا عند تحديد حجم العصر الذي سيحتويه هذا العنصر.
و الأن لنقوم بإنشاء مشروع جديد
أنت تعرف الطريقة طبعا و إن كنت غير متأكد منها الرجاء مراجعة الدروس السابقة.
و الأن لنقوم بإنشاء مشروع جديد
أنت تعرف الطريقة طبعا و إن كنت غير متأكد منها الرجاء مراجعة الدروس السابقة.
مثلا
اسم المشروع: LayoutProp001
يعمل على : 4.0.1
اسم التطبيق: LayoutProp
الواجهة التفاعلية : MainActivity
الأن اذهب إلي الملف main.xml و الأن قم بإضافة عنصر button إلي الواجهة من لوحة palette كما هو مبين في الشكل القادم
ثم اذهب إلي الخاصية width و height و تاكد من أنهما يحتويان على القيمة wrap_content .
الأن اذهب إلي الملف main.xml و الأن قم بإضافة عنصر button إلي الواجهة من لوحة palette كما هو مبين في الشكل القادم
ثم اذهب إلي الخاصية width و height و تاكد من أنهما يحتويان على القيمة wrap_content .
الأن قم بتغير محتوي الخاصية text من button إلي button with text و الأن ستري شكل العنصر تغير كما في الصورة
الأن قم بتغيير قيمة العرض و ضعها 250dp و ستري أن العرض تغير كما هو مبين في الصورة
و الأن قد جاء الوقت حتي تغير القيمة إلي match_parent ولكت تأكد من ان الواجهة layout التي تحمل العنصر تحتوي على نفس الخاصية أيضا. و سيظهر لك كما في الشكل القادم
قم بإعادة الخاصية width إلي الوضع warp_content ثم قم بتغير الخاصية text إلي B1 وقم بإضافة button أخر و قم بتسميته B2 ثم أذهب إلي خاصية الorientation في الlayout و قم بتغيرها إلي horizontal ، ثم نذهب إلي خاصية الوزن weight و نضع في كلا العنصرين رقم 1 داخل تلك الخاصية و سنري ما يحدث ؟؟؟ لقد تقسما العنصرين الواجهة كما هو مبين في الشكل القادم.
قم بتغير الأرقام الداخلة في خانة الوزن و ستلاحظ التغيرات القادمة في كل مرة ، ثم قم بإضافة عنصر جديد button و قم تغير ال text إلي B3 و ايضا ضع رقم في الوزن و لتكن B1 إدخل 1 و B2 إدخل 3 , B3 إدخل 2 و ستري التغير كما بالشكل التالي
قم بإعادة الخاصية width إلي الوضع warp_content ثم قم بتغير الخاصية text إلي B1 وقم بإضافة button أخر و قم بتسميته B2 ثم أذهب إلي خاصية الorientation في الlayout و قم بتغيرها إلي horizontal ، ثم نذهب إلي خاصية الوزن weight و نضع في كلا العنصرين رقم 1 داخل تلك الخاصية و سنري ما يحدث ؟؟؟ لقد تقسما العنصرين الواجهة كما هو مبين في الشكل القادم.
قم بتغير الأرقام الداخلة في خانة الوزن و ستلاحظ التغيرات القادمة في كل مرة ، ثم قم بإضافة عنصر جديد button و قم تغير ال text إلي B3 و ايضا ضع رقم في الوزن و لتكن B1 إدخل 1 و B2 إدخل 3 , B3 إدخل 2 و ستري التغير كما بالشكل التالي
و حينما تلقي نظرة على كود ال XML ستجده كالتالي
جاذبية الواجهات layout gravity
الخاصية layout_gravity من الخواص الممتعة في خواص تخطيط الواجهات فانت ستجدها تتشابه كثيرا مع طرق التخطيط التي كنت تستخدمها في ورد word وا أكسيل Excel ، فبإمكانك الان أن تضع العنصر الخاص بك في وضع محاذي لأقصي اليسار من أعلي أو في وضع المنتصف أو في أي وضع تختاره و الأن لنبدأ المثال القادم لتتعرف أكثر على تلك الخاصية.
قم بإنشاء ملف XML و ليكن grlayout.xml
قم بتح الXML ثم قم بنسخ هذا الكود القادم و ضعه بداخل الملف
ستجد أن الواجهه تغيرت للشكل القادم
و إذا قمت بتفحص كل button على حدة ستجد السبب على وجوده في هذا المكان مكتوب داخل الخاصية text الخاصة بكل button على حدة و يمكنك أيضا أن تقوم بغير الخواص حتي تصل للمعرفة اللازمة بتلك الأدوات.
الهوامش layout margin
لو كنت مبرمج HTML ستجد أن الهوامش مفيدة جدا لك فهي من تعطي المساحة اللازمة لكل عنصر من فوق و تحت و يمين و يسار حتي يحقق تنسيق ذو شكل جمالي بدون تداخل مع الأدوات المستخدمه على الواجهة.،
الأن قم بإنشاء ملف marginlayout.xml و ثم قوم بنسخ الكود القادم فيه لتقوم بعمل جدول من العناصر كما هو مبين في الشكل القادم
الأن أذهب إلي العنصر button المسمي margin ثم أذهب إلي الخاصية margin و ضع فيها قيمة 50dp و ستجد الواجهة تتغير كما في الشكل القادم .
الأن قم بإلغاء القيمة السابقة و ضيف في الخصائي margin - left قيمة 10dp و margin - Top قيمة 20dp و ستري التغيرات كما في الشكل القادم .
بإمكانك الأن أن تقوم بوضع قيم مختلفة في الخصائص الأخري الخاصة بالتبويب margin مثل Right و Bottom و Start و End.
أعرف أن الكثيرين منكم قد ضجر من كثرة المحضرات التي تكلمت عن الواجها و لكن كان جزء مهم جدا لم يمكن إختصاره مهما فعلت في أقل مما تم نشره بالفعل .. و المحضرات القادمة بإذن الله سنبدأ في كتابة الأكواد وربطها بالوجهات التي تعلمنا أن نقوم بتصميمها … أتمني أن أكون وفقت في شرح الجزء الماضي من الكورس و اتمني أن كون قد أفدتكم و نلتقي إنشاء الله في الدرس القادم ..
أحمد محمدي
الأن قم بإلغاء القيمة السابقة و ضيف في الخصائي margin - left قيمة 10dp و margin - Top قيمة 20dp و ستري التغيرات كما في الشكل القادم .
بإمكانك الأن أن تقوم بوضع قيم مختلفة في الخصائص الأخري الخاصة بالتبويب margin مثل Right و Bottom و Start و End.
أعرف أن الكثيرين منكم قد ضجر من كثرة المحضرات التي تكلمت عن الواجها و لكن كان جزء مهم جدا لم يمكن إختصاره مهما فعلت في أقل مما تم نشره بالفعل .. و المحضرات القادمة بإذن الله سنبدأ في كتابة الأكواد وربطها بالوجهات التي تعلمنا أن نقوم بتصميمها … أتمني أن أكون وفقت في شرح الجزء الماضي من الكورس و اتمني أن كون قد أفدتكم و نلتقي إنشاء الله في الدرس القادم ..
أحمد محمدي
