احترف برمجة الاندرويد: [دوره برمجه تطبيقات الاندرويد] الدرس الرابع - اللياوت

بسم الله الرحمن الرحيم

سنتعرف اليوم على بعض اهم العناصر داخل ال layout , والتي تتكرر كثيرا وتقريبا لا يخلو منها اى تطبيق , ومهم جدا أن تحفظ اسمائها برمجيا .

لا شك إنه لا يخلو إي تطبيق من النصوص, لذلك فالنص TextView يعتبر العنصر الاهم من عناصر الواجهات التي تعرض لمستخدم التطبيق. فنستطيع من خلاله توضيح الاشارات والدلالة على أشياء معينة, وأما الزر Button فبواسطته تستطيع التنقل بين أرجاء التطبيق, ولا يخلو تطبيق من أزرار, وأما الصوره ImageView فتزيد من جمال التطبيق وتحسن منظره .

فى هذه الصوره نستطيع فهم العناصر بشكل اوضح :

خصائص العناصر :

تظهر فى شاشة ال TEXT أسفل وسم البداية للعنصر جميع الخصائص المستخدمة له, اما فى شاشة ال DESIGN تظهر لك جميع الخصائص ونستخدم ما نحتاج منها. وتتغير بعض الخصائص على حسب العنصر الذي تم تحديده.
الخصائص المشتركة لجميع العناصر ولا نستطيع الاستغناء عنا هي :
عرض العنصر android:layout_width=""
ارتفاع العنصر android:layout_height=""

و يوجد لبعض العناصر خصائص خاصة بها كذلك اجبارية له. تختلف حسب العنصر.
و الخاصية التي يجب استخدامها لكل عنصر تريد التحكم به برمجيا هي خاصية المعرف. معرف للعنصر android:id=""

قبل إن ابدأ بشرح أهم الخصائص, أغلب الخصائص بهذا الشكل android:layout_gravity="center"
تبدأ بـ layout, ولكن بعضها تستطيع استخدامها بدون layout مثلا android:gravity = "center"
والفرق هو, إن لكل عنصر حد, مثل حدود ال TextView فكلمة layout نقصد العنصر بالكامل, وبدون layout نقصد ما داخل العنصر وغالبا ما بداخل العنصر نص. كما فى الصورة :

خاصيتا العرض والارتفاع :

كود:

""=android:layout_width
""=android:layout_height

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

بالنسبه للقيم الثابته هى : fill_parent ,match_parent ,wrap_content , وتوضع القيمة هذه بداخل "".
بالنسبة لقيمة fill_parent تم إهمالها بعد المستوى 8 API و أصبحت هي match_parent.
match_parent : يأخذ العنصر العرض أو الارتفاع حسب العنصر الاب Parent له.
wrap_content : يأخذ العنصر العرض أو الارتفاع الذي يحتاجه فقط.
هذه الصور توضح الفرق :

خاصية الاتجاه | Orientation :

كود:

android:orientation=""

وهي الخاصية التي تعتبر اجبارية لـ LinearLayout اي النمط أو الترتيب الخطي, القيمة الفتراضية له هي horizontal وجميع الخصائص الاخرى لها قيم افتراضية واقصد بهذا ان جميع الخصائص مفعلة او موجودة للعنصر ولكن غير ظاهرة لانها تأخذ القيمة الفتراضية فلو استخدمتها إذا أنت تريد تغيير القيمة الفتراضية لها ,و خاصيه الاتجاه غير مهمه إذا كانت اللياوت LinearLayout تحتوى على عنصر واحد فقط, لانها سوف تأخذ كما ذكرت االترتيب الافقي, ولكن لو كان يحتوى على اكثر من عنصر يجب استخدامها ويجب تحديد أحد القيمتين : horizontal أو vertical

horizontal : الترتيب الافقي للعناصر اى بجانب بعضها
vertical : الترتيب العمودي للعناصر اي فوق بعضها. وهذه صورة للتوضيح والفرق بينها :

خاصية الهامش | Margin :

كود:

android:layout_margin=""

الهامش خاصية مميزة ,ولا يمكن الاستغناء عنها في اي تطبيق , لانها مهمه جدا للتنسيق , هوامش العنصر ليست من حدوده, بشكل أوضح إنها المسافة بينه وبين ما حوله, وتستطيع استخدامها لتحديد الهامش من جميع الجهات أو من جهة معينة.
هذه الصورة توضح طريقة استخدامها :

خاصية الحشو | Padding:

كود:

android:padding=""

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

خاصية الوزن | Weight:

كود:

android:layout_weight=""

نستطيع تسميتها بخاصية التقسيم, لتقسيم الشاشة أو ال layout للعناصر, كل منها يأخذ نصيبه. والصور هي فقط تستطيع أن تشرح ما هذه الخاصية .

مثال على ذلك:

خاصية المعرف | ID :

كود:

android:id=""

خاصية المعرف للعنصر, لكي تعطيه إسم يميزه للتعامل معه برمجيا , سواء كان صورة أو نص او غيرهما من العناصر. عن طريق هذا المعرف نستطيع إعطاء الاوامر أو التحكم بهذا العنصر برمجيا , ويكتب بالشكل التالي :

كود:

android:id="@+id/button"

استبدل button بالذي تريده, ومعنى +id إي اضف هذا المعرف للموارد R, كما إن بدون + يصبح المعنى استخدم المعرف الموجود فعليا, وسوف نتعرف عليها اكثر من خلال الاستخدام.

اغلب الخصائص الاخرى واضحة المعنى مثلا text للنص المكتوب text size لحجم النص و text color للون النص إلخ.
بالنسبة لـلون النص, تستطيع استخدام الوان معرفة في ملف الالوان بال values او الاختيار من الالوان فى واجهة ال design

الان انتهينا من التعرف على بعض العناصر واهم خصائصها وادعوكم للتعرف على باقى العناصر من خلال التجربه لن تجدو صعوبه باذن الله

فى الدرس القادم ان شاء الله سنتطرق الى كيفية التعامل مع العناصر برمجيا من خلال الكود بلغة الجافا