سلسلة تعليم برمجة تطبيقات الأندرويد (الدرس الثامن عشر)

سلسلة تعليم برمجة تطبيقات الأندرويد

الدرس الثامن عشر

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

بالشكل التقليدي لدينا أربع حواف:

·      الحافة العليا

·      الحافة اليمنى

·      الحافة السفلى

·      الحافة اليسرى

ولكل من الحواف السابقة خاصية محددة خاصة بها وهذه الخواص على الشكل التالي:

android:layout_marginLeft="40dp" android:layout_marginRight="40dp" android:layout_marginTop="40dp" android:layout_marginBottom="40dp"

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

ولنفرض أنك أحبب أن تجعل عنصر ما في منتصف الواجهة سواء عمودياً أو حتى أفقياً، عندها يتوجب عليك استخدام واحدة من الخاصيتين التاليتين:

android:layout_centerHorizontal="true" android:layout_centerVertical="true"

تعبر كل من الخاصيتين السابقتين عن التوسط في الواجهة والقيمة true تعني تفعيل هذه الخاصية.

لنقم الآن بإضافة عنصر ImageView ونختار صورة ما لا على التعيين (كنا قد تعلمنا كيفية إضافة الصورة في الدروس السابقة وتحديدها) كما هو واضح في الشكل التالي:

سنتعلم في الخطوات التالية كيفية تغيير حجم الصورة سواء عرضياً أو طولياً، ولتحقيق هذه الغاية سنستخدم واحدة من الخاصيتين التاليتين:

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

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

android:layout_width="100dp" android:layout_height="200dp"

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

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

أيضاً من الخواص المهمة جداً التي يجب أن نتعرف عليها هي الخاصية توسيط النص التي يمكنك استخدامها مع العناصر النصية وهي على الشكل التالي:

android:textAlignment="center"

ومن الخواص المهمة ايضاً محاذاة أي عنصر ليكون في أعلى الصفحة تماماً أو في أسفل الصفحة حسب المطلوب وذلك بالاعتماد على الخاصيتين التاليتين:

android:layout_alignParentTop="true" android:layout_alignParentBottom="true"

فالخاصية الأولى ستضمن ان العنصر ملتصق بالجزء الأعلى من الشاشة دائماً أما الخاصية الثانية فهي مشابهة للأولى مع فرق ان الالتصاق هنا بحافة الشاشة السفلى بدلاً من الحافة العليا.

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

سننتقل الآن إلى الحديث عن أنواع طرق العرض أو ما يسمى Layout في أي تطبيق أندرويد وسنتعرف على نوعين أساسيين من طرق العرض:

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

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

وهكذا نكون قد أنهينا درسنا لليوم نلقاكم بإذن الله في دروس قادمة.