الدرس الخامس - تخطيط الواجهة و بداية كتابة الاكواد

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

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



إن أردت أن تكمل على المشروع السابق الذي قمت بإنشائه أما إن اردت إنشاء مشروع جديد فعليك العوده للدرس الثالث و إنشاء مشروع جديد ثم العودة لتكلمه الدرس الحالي معنا .

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

/Android001/src/com.school4dev.android001/MainActivity.java

كما هو مبين في الصورة القادمة

و حينما تفتح ملف الجافا ستجد أكواد الJAVA مكتوبة بشكل جاهز لكي تضع أكوادك الخاصة في داخل ذالك الملف … و سيكون كالشكل التالي :

و الأن لنستعرض مكونات الملف MainActivity.JAVA :

في أول سطر ستجد جملة

package com.school4dev.android001;

و هذا السطر يدل على إسم الحزمة Name Space الذي ستعمل من خلاله

أما في  الجزء الثاني من الملف ستجد هذا الكود

import android.os.Bundle;import android.app.Activity;import android.view.Menu;

و في هذا المكان ستجد التصريحات الخاصة بالمكتبات التي سوف تستخدما داخل ملف الجافا.

أما عن الجزء الأخير في الملف ستجد الCalss و هنا سنقوم بالشرح المفصل لأنه المكان الذي سوف تضع فيه أكوادك الخاصة.
في داخل الClass ستجد دالتين تم إنشائهما بشكل تلقائي الداله الأولي هي onCreate و الثانية هي onCreateOptionsMenu
من إسم الدالة الاولي فهي تعمل في وقت إنشاء الClass و يكون تكوينها كما بالشكل

أما الداله الأخري سنقوم بشرحها بشكل مفصل فيما بعد، و لنعد لدالة onCreate  ستجد أن بها سطران من الأكواد ، في السطر الاول ستجد كلمه super و هذه الداله تستدعي الداله onCreate من الClass الأب الذي هو Activity

كلمة extends تعني أن الClass الحالي الذي هو  MainActivity يرث من الClass الأب Activity كل خصائصة و دوالة ،
أما السطر الثاني من الكود فيحتوي على تلك الجملة

setContentView(R.layout.activity_main);

و هي تعني أن الدالة ستعطي أمر لتكوين واجهه مستخدم كالتي موجودة بداخل الإمتداد R.layout.activity_main ، و لكي نستعرض الموجود داخل تلك المسار علينا بتتبعه ، إذهب إلي

/Android001/gen/com/school4dev/android001/R.java

في داخل الملف R.java ستجد أن مزود الeclipse وضع بداخلة مجموعة من الأكواد بشكل أوتوماتكي  و هي تمثل كل الأدوات و الواجهات التي تستخدمها في مشروعك و بذالك تستطيع أن تربط بين التصميم في ملفات الXML و ملفات العمل JAVA فهو يأخذ التصميم و الشكل من ملفات XML ثم يجعلها تعمل وفق أوامر الجافا .. ملحوظه يمكنك فتح هذا الملف ولكن يجب أن لا تقوم بتغيير أي شيء بداخله فكما اخبرتك من قبل أن الeclipse يقوم بإنشاء الأكواد بداخله بشكل أوتوماتيكي ولكني شحرته لك للتوضيح ليس أكثر من هذا..
يبدوا أن الأمر صعب الفهم حتي هذه اللحظه ولكن أستمروا معي و إنشاء الله سوف نعرف أكثر حينما نقوم بإنشاء تطبيقات على الأندرويد أن الأمر أسهل بكثير مما تخيلتم ولكنه فقط قد يحتاج إلي بعض الوقت.

الأن إذهب إلي
/Android001/res/layout/activity_main.xml

الأن دعونا ننشئ ملف XML جديد و لنقوم بهذا علينا أن نقف بالمؤشر على المجلد layout ثم نضغط على الزر New Avtivity كما هو مبين بالشكل.

الأن ستظهر لنا هذه الشاشة .. إدخل إسم الملف و ليكن mytest إحرص على أن تكون الحروف صغيرة و بدون علامات ، ثم إختار من linearLayout و الأن إضغط إنهاء Finish .

الأن أنت لديك واجهه جديدة في تطبيقك ، الأن إذهب إلي  Palette و إسحب Large TextView  و من ثم ضعه على الشاشة كما هو مبين في الشكل،

قوم بتغير النص الظاهر على الTextView ، عن طريق إضغط بالزر الايمن بالماوس على الأداة و إختار Edit Text …

ستظهر لك الشاشة القادمة، إدخل النص الجديد و ليكن the New test form ثم إضغط موافق OK لتقوم بتعديل النص في TextView و الأن إذهب إلي الملف MainActivity.java و أفتحه و بداخلة إذهب إلي الدالة onCreate و قم بتغيير الكود بدلا من R.layout.activity_main إجعلة R.layout.mytest ، كما هو مبين في الصورة القادمة

و الأن قم بعمل run للتطبيق و ستري النتيجة كما هو مبين في الشكل القادم.

إستعراض ملف الLayout

عند فتح ملف mytest.xml إذهب إلي علامة التبويب mytest.xml كما هو مبين بالشكل, سيفتح لك الملف في شكل ملف XML و بإمكانك التحكم بالملف عن طريق هذا الأسلوب لو كنت من الذين يحبون لغة الXML ،

ستري بداخل هذا الملف وصف كامل و دقيق لكل مكونات واجهه المستخد layout و بإمكانك إجراء التعديلات اللازمة كما هو مبين في الشكل التالي و سوف نقوم بتغير خاصية الtext للعنصر textView  كما هو مبين في الشكل

الأن إحفظ الملف و من ثم قم بتشغيل التطبيق لتري التغيرات بنفسك

تخطيط الملف عند تغيير اتجاه الشاشة

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

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <TextView        android:id="@+id/textView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Some Text Here"        android:textAppearance="?android:attr/textAppearanceLarge" />  <LinearLayout        android:id="@+id/linearLayout1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical">    <Button        android:id="@+id/button1"        android:layout_width="100dp"        android:layout_height="100dp"        android:text="Button1">    </Button>    <Button        android:id="@+id/button2"        android:layout_width="100dp"        android:layout_height="100dp"        android:text="Button2">    </Button>    <Button        android:id="@+id/button3"        android:layout_width="100dp"        android:layout_height="100dp"        android:text="Button3">    </Button>    <Button        android:id="@+id/button4"        android:layout_width="100dp"        android:layout_height="100dp"        android:text="Button4">     </Button>  </LinearLayout>    </LinearLayout>

الان عد إلي علامة التبويب  Graphical layout و ستري الفارق كما في الشاشة القادمة

قم بعمل Run للتطبيق و الأن ستعمل الشاشه في وضعها الرأسي العادي كما في الصورة السابقة
و الأن قم بالضغط على الأزرار CTR + F12 و ستجد الشاشة ذهبت إلي الوضع الأفقي و ستجد تطبيقك يظهر كما في الصورة القادمه.

ولكن كما هو معروف من قدرات الأندرويد فأنك كلما غيرت إتجاه الشاشة تغير شكل البرنامج لوضع يلائم الوضع الجديد و لفعل هذا علينا ان نبني layout جديد حتي يتلائم مع الوضع الأفقي land view ولعمل هذا الوضع في البدايه عليك بإنشاء مجلد جديد داخل المجلد res يسمي layout-land ، قف على المجلد res ثم اضغط بالزر الأيمن من الماوس و إختار New→ Folder ثم إدخل في خانة ال Folder Name أسم المجلد الجديد و هوه layout-land كما هو مبين في الشكل القادم.

الأن حرك المؤشر على مجلد layout-land و من ثم إختار New Android XML File كما هو موضح في الصورة

إدخل نفس إسم الواجهه التي تريد أن تعمل منها شكل أخر وهي حسب المثال المطروح mytest.xml كما هو موضح في الصورة القادمه ثم إضغط Next

تأكد ان القائمة Chosen Qualifiers بها و الأن إضغط Finish

سيظهر لك الملف كماهو في الشكل القادم

الأن خذ هذه الأكواد و إستبدلها بأكواد الملف عن طريق التبويب XML

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >      <LinearLayout        android:id="@+id/linearLayout1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">      <Button        android:id="@+id/button1"        android:layout_width="100dp"        android:layout_height="100dp"        android:text="Button1">      </Button>      <Button        android:id="@+id/button2"        android:layout_width="100dp"        android:layout_height="100dp"        android:text="Button2">      </Button>     <Button        android:id="@+id/button3"        android:layout_width="100dp"        android:layout_height="100dp"        android:text="Button3">      </Button>     <Button        android:id="@+id/button4"        android:layout_width="100dp"        android:layout_height="100dp"        android:text="Button4">      </Button>   </LinearLayout></LinearLayout>

و الان  عد إلي علامة التبويب التي تظهر شكل التصميم ستجد التصميم كماهو مبين في الصورة القادمة

قم بعمل run للتطبيق و الأن قم بعد أن ظهر لك التطبيق قم بالغط على CTRL + F12 و أعد المحاوله أكثر من مره و الأن أنت تعلمت كيف أن تجعل لتطبيقك أكثر من وضع أثناء التشغيل و إلي القاء في الدرس القادم إنشاء الله
و السلام عليكم و رحمة الله و بركاته.