الدرس الخامس : تصميم الواجهات باستخدم الـ Views

أهلا وسهلا بكم في الدرس الخامس من سلسلة تعلم معنا برمجة الأندرويد .. أسأل الله أن ينفعنا وإياكم بما علمنا.

تعلمنا في الدرس السابقة كيفية التعامل مع الـ Activity وهو في حد ذاته ليس له أي وجود علي الشاشة ، ولكنه يقوم برسم واجهة المستخدم التي تظهر علي الشاشة باستخدام الـ Views والـ ViewGroups ، وفي هذا الدرس سنتعلم كيفية عمل واجهة المستخدم (UI اختصارا لـ User Interface) وكيف للمستخدم أن يتفاعل معها ، وكما نري في الصورة السابقة فهناك تطور ملحوظ في شكل واجهات المستخدم في نسخ الأندرويد الحديثة فجوجل قد أعطت التصميم اهتمام كبير فهو يعتبر من أحد العوامل الرئيسية لجذب المستخدمين وإثارة إعجابهم ، فيجب علينا أيضا لإنشاء تطبيقات ناجحة أن نولي واجهات المستخدم أهمية كبيرة.

النقاط الرئيسية :

1-    فهم مكونات الشاشة.

2-    أهم سمات أو خصائص الـ Views.

3-    كيفية الاستماع إلي تنبيهات الـ Views.

4-    تطبيق لذيذ خفيف شامل جامع.

أولا : فهم مكونات الشاشة :

الأكتفيتي بيقوم بعرض الـ UI والتي تحتوي علي views مثل الأزرار – buttons ، والتسميات – labels ، وصناديق النصوص – text boxes ، وأثناء عرضهم يوجد مرحلتين

• أثناء وقت التشغيل – run time  :

بيتم تحميل الـ UI في ميثود onCrate داخل كلاس الأكتفيتي بإستخدام ميثود setContentView وإعطاءها الـ Id الخاص بملف الـ xml.

• أثناء الترجمة – compilation :

كل عنصر في ملف الـ xml بيتم ترجمته لما يعادله من كلاسات الـ GUI في الأندرويد ، والسمات – attributes بيتم تمثيلها بالميثود – methods.

تعريف الـ Views والـ ViewGroups :

الـ View يقصد بها الأشكال المستطيله التي تظهر في مساحة معينة علي الشاشة وأبسط أنواعها هي التي تستخدم لعرض نص كتابي مثل Button و EditText ، وأي فيو بيكون مشتق من كلاس رئيسي المشار إليه في هذه الحزمه android.view.View

الـ ViewGroup هي عباره عن مجموعه من فيو واحد أو أكثر من فيو ، يتم جمعهم معا في شكل تخطيطي معين (Layout) الذي يقوم بتحديد شكل ظهورهم وترتيبهم علي الشاشة ، مثل LinearLayout و RelativeLayout و TableLayout ، وهو بيكون مشتق من الكلاس الرئيسي android.view.ViewGroup وفي الدرس القادم سنتحدث عنه بالتفصيل إن شاء الله.

ثانيا : أهم سمات أو خصائص الـ Views :

فلنفرض مثلا أن هذا هو ملف الـ main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#ffffff" >
 
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
 
<Button
android:id="@+id/btn_ok"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Ok"/>
 
</LinearLayout>

فسيكون هذا هو شكل واجهة المستخدم

والسمات المستخدمه هنا أو ما يعرف بـ attributes الموجوده بداخل العناصر كل سمه تأخذ قيمه معينه بالشكل التالي:

• android:layout_width

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

• android:layout_height

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

• android:background

تحدد خلفية هذا الـ layout ويمكن من خلاله تغير لون الخلفية بإعطاءها قيمة اللون المحدد ، وقيم الألوان عباره عن 6 خانات كل خانتين تمثل لون من الألوان الرئيسية الأحمر والأخضر والأزرق ويرمز لهم بـ RGB ويتم تحديد درجة كل لون باستخدام ترقيم الـ hexadecimal مسبوق بعلامة # ، ومن هذا الموقع يمكنك أن تجد قيم معظم الألوان.

• android:text

يتم وضع به النص الذي نريده أن يظهر.

• android:id

هنا بضيف للعنصر أي اسم أو ما يعرف بالـ id لاستطيع أن أتعامل مع هذا العنصر فيما بعد ، فيمكنني مثلا أن أستدعيه من خلال كلاس الأكتفيتي ، وهذه السمة تأخذ قيمة بهذا الشكل id/any_name+@ فالجزء الأول ثابت وهو عباره عن علامة @ متبوعه بعلامة + لتعريف التطبيق أن هذا id جديد فيتم إضافته في ملف R.java

سؤال : لماذل في كل سمة – attribute نستخدم في بدايتها كلمة android ؟ هل لاحظتم ذلك ؟ سأنتظر الإجابة في التعليقات …

ثالثا : كيفية الاستماع إلي تنبيهات الـ Views :

الـ Views تطلق ما يسمي بـ events عندما يتفاعل معها المستخدمين ، في الأندرويد يوجد أكثر من طريقة للتعامل مع التنبيهات أو الأحداث – events الناتجة عن تفاعل المستخدم مع التطبيق ، منها:

الـ event listeners تطلق علي تجميعة من الكلاسات التي تسمي بـ interfaces أي التي تحتوي علي methods ولكن ليس بها أي كود برمجي لذلك يتم عمل لها override في كلاس الأكتفيتي ، كل هذه الميثود مجمعة في الكلاس الرئيسي View ويقوم النظام بإستدعاءها عند حدوث أي تفاعل مع فيو معين فلذلك يطلق عليها callback methods (هل هذه الجزئية تذكركم بشيء سابق؟ نعم إنها نفس فكرة الميثود الخاصة بتغير حالة الأكتفيتي في دورة حياته).

مثال : لو فرضنا أن عندنا فيو مثل Button تم لمسه ، فسيتم استدعاء ميثود onTouchEvent

وهذا كود بسيط لتوضيح كيفية عمل ذلك مع ميثود onClick

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Create an anonymous implementation of OnClickListener
private OnClickListener mCorkyListener = new OnClickListener() {
    public void onClick(View v) {
      // do something when the button is clicked
    }
};
 
protected void onCreate(Bundle savedValues) {
    ...
    // Capture our button from layout
    Button button = (Button)findViewById(R.id.corky);
    // Register the onClick listener with the implementation above
    button.setOnClickListener(mCorkyListener);
    ...
}

لا تنسي تكملة الدرس في الصفحة التالية.