الدرس السادس : أنواع تخطيط الواجهات

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

أنواع الواجهات

سوف أستعرض لك الأن انواع الواجهات التي سوف نقوم بشرحها في هذا الدرس و لكن الأن سأعطيك فقط نبذه عن كل واجهه علي أن أقوم بشرحها بطريقة مفصلة في باقي الدرس إن شاء الله.
1- LinearLayout الواجهة الخطيةو هي عبارة عن تخطيط شكل عناصر الواجهة في شكل عمود واحد (إذا كان الوضع عموديا Vertical) أو في شكل صف واحد (إذا كان الوضع أفقيا  Horizontal ) و هي الطريقة التي قمنا بإستخدامها من قبل من خلال الدرس السابق.

2- TableLayout واجهة الجدولوهي الواجهة التي تعرض العناصر في شكل جدول مكون من صفوف و أعمدة

3-  RelativeLayout الواجهة النسبية و هي التي بإمكانها وضع بعض عناصر الواجهة في حجم يتوقف بشكل نسبي مع أحجام العناصر الأخري

4- AbsoluteLayout الواجهة المتاحة و التي تمكنك من وضع عناصر الواجهة بدون قيود و بشكل مطلق على الواجهة فقط بنظام الإحداثيات (x,y) أعتقد أن مبرمجين ال.Net سيعجبهم هذا الأسلوب .

و الأن لنستعرض لكم كل أسلوب منهم على حده

1- LinearLayout الواجهة الخطية

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

و الأن لنقوم بعمل مثال لتطبيق الطريقة.
إما أن تنشئ مشروع جديد أو تقوم فتح الملف القديم المهم أن تذهب إلي الملف activity_main.xml  و تقوم بعمل إستعراض لمكونات الXML كما في الصورة

و الأن إستبدل الكود الموجود بداخل الملف بهذا الكود

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"></LinearLayout>

الأن أنت لديك واجهة خطية و إتجاه العناصر الاخري عليها إتجاه عمودي

الأن أسحب ثلاثة أزرار Buttons من اللوحة التي على اليسار Palette كما هو مبين في الصورة

في خانة الخواص إذهب إلي الخاصية Orientation وقم بتغيرها من راسي Vertical إلي أفقي Horizontal ستجد التغير يحدث على الواجهة كما هو مبين في الصورة.

من المربع Palette إذهب إلي التبويب Layouts و إختارLinearLayout ثم قوم بسحبه و وضعة على الLayout الاساسي و قم بسحب كل الButtons و ضعها بداخل الlayout الجديد الأن ستري الموضوع في شكل شجري كما هو مبين في الصورة قم بنسخ الlayout الجديد و قم بلصق المنسوخ على نفسي الlayout الأساسي. الخلاصة يستطيع الlayout ان يتضمن واجهات أخري بشكل متعدد و ستظهر لك في مربع الOutline بهذا الشكل الشجري كما هو مبين في الصورة و تسمي هذه الخاصية Nested أي التداخل.

2- TableLayout واجهة الجدول

يساعد هذا الViewGroup أو layout على وضع العناصر الخاصة بك في وضع الجدول حيث التنظيم عبارة عن أعمدة و صفوف رأسيه و لتجربة هذا النوع من الواجهات أذهب إلي إنشاء XML جديد و ليكن إسمة tlayout.xml كما هو مبين في الصورة 

الأن اضف ثلاثة صفوف tableRow في داخل الtable layout عن طريق أن تقف على الواجهة الأساسية و تضغط بالماوس بالزر الأيمن فستظهر لك قائمة إختار منها add Row كما هو مبين في الشكل القادم .

الأن أذهب إلي المربع Palette و إختار Button و أسحب إثنين منها و في كل صف من الصفوف كما هو مبين في الشكل القادم

ضع إثنين Buttons إضافيين في الصف الأول ، الأن أنت لديك جدول مكون من 3 صفوف و 4 أعمدة كما هو مبين بالشكل على الرغم من كون الصف الثاني و الصف الثالث بهم خانات فارغة ولكن تحديد عدد الأعمدة دائما يعود إلي الصف ذو العناصر الأكثر.
أذهب إلي الصف الثاني و ضع textView عن طريق سحبها من الPalette و ضع ايضا Button الأن كرر العملية مع الصف الثالث ،نري الأن ان تلك العناصر قد شغلت بشكل تلقائي الأماكن الفارغة الموجودة في العمود الثالث و الرابع و الأن قم بتفريخ الخاصية Text في كل العناصر  ال TextView  في الواجهة الخاصة بك ستجد أنه و بسبب التفريغ أنه توجد خانه فارغة في كل من الصف الثالث و الثاني.

المتحكم الأساسي في عرض كل عمود هو عرض العنصر المحتوي علية فمثلا لو ذهبنا إلي أحد عناصر ال textView في الصف الثاني أو الثالث و أدخلنا في الخاصية text نصا كبيرا مثلا this is the biggest text in the world ستجد أن حجم عرض العمود قد ذات تلقائيا لكي يحاكي حجم النص كما أن حجم العناصر الأخري المشتركة في نفس العمود أيضا قد ذاد حجمها كما هو مبين في الصورة القادمة.

3-  RelativeLayout الواجهة النسبية

كما ذكرنا سابقا في هذا النوع من التخطيط يتم وضع أحد عناصر الواجهة في علاقة نسبية مع عنصر أخر أو مجموعة عناصر و تكون تلك العلاقة في بعض الصور كالآتي .

1) إلى اليسار واليمين، أعلى أو أسفل العنصر المحدد (layout_toLeftOf، layout_toRightOf، layout_above، layout_below)

2) الانحياز من قبل اليسار واليمين، أعلى أو الحافة السفلية للعنصر المحدد (layout_alignLeft، layout_alignRight، layout_alignTop، layout_alignBottom)

3) محاذاة من اليسار واليمين، أعلى أو أسفل حافة أحد الوالدين (layout_alignParentLeft، layout_alignParentRight، layout_alignParentTop، layout_alignParentBottom)

4) تركز عموديا، أفقيا محورها، وتركزت رأسيا وأفقيا نسبة إلى الأم (layout_centerVertical، layout_centerHorizontal، layout_centerInParent)

و لفهم الموضوع بشكل أكبر تابعوا معي المثال التالي :
قم بإنشاء ملف android XML جديد و ليكن اسمة rllayout.xml و إختار في خانة Root Element الإختيار Relative layout ثم إضغط على إنهاء Finish .

أذهب إلي علامة التبويب XML و قوم بإستبدال الكود الموجود في الملف بهذا الكود 

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:id="@+id/label"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Type here:">

</TextView>

<EditText

android:id="@+id/entry"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/label"

android:background="@android:drawable/editbox_background">

</EditText>

<Button

android:id="@+id/ok"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_below="@+id/entry"

android:layout_marginLeft="10dip"

android:text="OK">

</Button>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignTop="@+id/ok"

android:layout_toLeftOf="@+id/ok"

android:text="Cancel">

</Button>

</RelativeLayout>

الأن عندما تعود إلي خانة التبويب Graphical layout  ستجد أن شكل الواجهة الخاصة بك أصبح كالتالي

و الأن عد من جديد إلي XML وأقرأ الوسوم بنفسك ستجد أسماء الخواص و بعدها علامة = ثم قيمت كل خاصية من تلك الخواص مثلا ستجد.

android:layout_width="match_parent" 

android:layout_height="wrap_content" 

android:id="@+id/entry"

كما هو واضح في كل خاصية تجد كلمة android سابقه ليها ثم العلامة : ثم أسم الخاصية فمثلا الخاصية layout_width هي خاصية عرض الواجهة و القيمة match_parent أي أن حجم عرض الواجهة يساوي حجم عرض الأداة التي تحوي الواجهة و في هذه الحالة الأداة الحاوية هي الصفحة الرئيسية لملف الXML  ، أما القيمة الأخري مثل warp_content فهي تعني أن خاصية الإرتفاع تتوقف على إرتفاع العناصر التي سوف تحتوي عليها الواجهة،  أما الخاصية id  فهي بمثابة التعريف الذي من خلاله يتم التعرف علي أي عنصر و يفترض أن يكون فريدا فلا يجب تكراره داخل صفحة الXML .

و الأن لنلقي نظرة قريبة اكثر عل مكونات الخصائص لبقية العناصر المستخدمة في المشروع.

TextView

android:id="@+id/label" - ID

android:layout_width="match_parent" - معنها أن خاصية العرض لابد أن تحتل كل مساحة العنصر المضيف لها

android:layout_height="wrap_content" - الإرتفاع متوقف على إرتفاع العناصر المحتوية عليها

EditText

android:id="@+id/entry" - ID

android:layout_width="match_parent" - معنها أن خاصية العرض لابد أن تحتل كل مساحة العنصر المضيف لها

android:layout_height="wrap_content" - الإرتفاع متوقف على إرتفاع العناصر المحتوية عليها

android:layout_below="@id/label" -

Button_OK

android:id="@+id/ok" – ID

android:layout_width="wrap_content" - العرض يحدد بواسطة المحتوي

android:layout_height="wrap_content" – الإرتفاع يحدد بواسطة المحتوي  

android:layout_below="@id/entry" -

android:layout_alignParentRight="true" - يتم محاذاة الحافة اليمني من قبل العنصر المحتوي على هذا العنصر

android:layout_marginLeft="10dip" – علي العنصر أن يترك هامش على اليسار بمقدار القيمة المدخلة

Button_Cancel

android:layout_width="wrap_content" -  العرض يحدد بواسطة المحتوي

android:layout_height="wrap_content" –الإرتفاع يحدد بواسطة المحتوي  

android:layout_toLeftOf="@id/ok" - دئما تقع على يسار العنصر المشار إليه

android:layout_alignTop="@id/ok" - دئما يكون على محذاه من الحافة العلوية للعنصر المشار إليه

الأن يمكنك تجربة بعض العناصر الأخري و تجربة الخصائص الخاصة بها  ولو صادفك أي مشكله لا تتردد في طرحها حتي يستفاد منها الجميع.

4- AbsoluteLayout الواجهة المتاحة

بعض المبرمجين يفضلون هذا الوضع حيث يتيح لك أن تضع العناصر المناسبة لك بشكل مطلق على الواجهة فقط عليك تحديد الإحداثيات المناسبة لكل عنصر. و لكي نتعرف على كيفية فعل ذالك فقط تابعوا معي المثال التالي.
أنشئ ملف android XML جديد و ليكن إسمه alayout.xml و إختار من قائمة الroot element  إختيار AbsoluteLayout كما هو مبين في الشكل القادم .

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

و الأن عد إلي التبويب XML  ستجد أن هناك خاصيتين تم إضافتهما إلي كل عنصر و هما layout_x و layout_y و هما المختصتين بتحديد الإحداثيات على الواجهة.

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

بواسطة أحمد محمدى12:41 ص

اقراء المزيد