الدرس 17 : أساسيات تصميم الواجهات User InterFace في الاندرويد

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

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

وسنتعلم في هذا الدرس بعض المفاهيم وهي كمايلي:

1-ماهو الـ View وماهو الـ ViewGroup؟

2- تعرف على View structure In android.

1-ماهو الـ View وماهو الـ ViewGroup؟

الـ View :

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

الـ View Group؟

وهو أيضا عبارة عن اوبجكت يأخذ مساحة مستطيلة في الشاشة وهو الذي يقوم بالتحكم في كيفية عرض الـ views على الشاشة ولكنه مختلف قليلا عن الـ View ومن هذه الاختلافات:

1-غير مرئي .. لايمكن للمستخدم أن يراه.

2-يمكن أن يحتوي على بعض الـ Views بداخله كما يمكن أن يحتوي أيضا على viewGreoup بداخله.

وياتي للـ ViewGroup عدة أنواع منها :

1-Linear Layout: ويقوم بعرض العناصر بطريقة خطية أي على خط واحد.

2-Relative Layout: ويقوم بعرض العناصر بطريقة علائقية.

3-Frame Layout: ويقوم بعرض عنصر واحد فقط على الشاشة والتحكم في ظهور واخفاء العناصر المتبقية.

4-Tabel Layout : ويقوم بعرض العناصر في صفوف واعمدة.

5-Grid Layout: ويقوم بعرض العناصر بطريقة شبكية.

وسنقوم بشرح هذه الأنواع في الدروس القادمة بأذن الله.

2- تعرف على View structure In ِAndroid.

كما درسنا في الدروس السابقة انه يتم إضافة العناصر الى الشاشة بطريقيتين:

1- عن طريق السحب والافلات إلى الواجهة الرسومية.

2- عن طريق إضافة كود xml .

كل ملف Xml يحتوى على ما يسمى root Tag وهو الوسم الذ يكون في اعلى ملف xml.

الشكل ادناه يوضح View Structure in android

من الشكل نستنج مايلي:

1-ViewGroup : يكون في اعلى ملف xml أي يكون root tag .

2-بداخل viewGroup يكون view ويمكن أن يكون أيضا view group آخر كما توضحه الصورة أعلاه.

ولتوضيح اكثر لمفهوم الـ View structure In android انظر إلى الصورة ادناه:

1-حيث يمثل المستطيل الأحمر ViewGroup وهو Linear Layout والذي قوم بعرض العناصر بطريقة خطية.

2- ويوجد بداخل الـ ViewGroup زر Button و يوجد أيضا مربع نص EditText أي قام الـ view group بالتحكم في طريقة عرض العناصر بداخله وقام بعرضهم بطريقة عمودية كما في الشكل أعلاه.

ولننظر بشكل أعمق إلى الشكل أعلاه حيث سيكون ملف xml للتصميم أعلاه كما في الكود ادناه:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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:oriention="virtical"
   >

     <EditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="send"
        
        />
</LinearLayout>