السلام عليكم ورحمة الله،
ابدء معكم على بركة الله بسلسلة دروس لتعلم الاندرويد
طبعا انا حديث التعلم للأندرويد – لكن الفكرة هو ان اضع هنا كل جديد اتعلمه – و الجميع مدعو للمشاركة لتكون دروس مفيدة ان شاء الله في المستقبل.
لن أذهب بعيدا في الامال بخصوص هذه الدروس فالوقت ضيق، لكن ان شاء الله احاول قدر المستطاع ان اضيف دروس كلما سنح لي الوقت.
الدروس – غالبا – و الله اعلم - ستكون مقسمة الى مجموعة اجزاء، فبعد المقدمة التي تشرح اساسيات برنامج الاندرويد، سيكون الجزء الاول خاص بالـ GUI .
لن اتكلم عن كيفية تنصيب متطلبات العمل - تستطيع ان تجدها بسهولة على النت – او من كتاب الاخ الاستاذ محمد بدوي في هذا الرابط
لنبدأ على بركة الله
لإنشاء مشروع جديد – من برنامج ال Eclipse
كون مشروع جديد كما في الصورة
(صورة رقم 1)
ثم
(صورة رقم 2)
ثم اكتب اسم المشروع
(صورة رقم 3)
وضغط على Next ثم Next لتحصل على هذه النافذة
(صورة رقم 4)
سنقوم فقط بتغيير أسم الـ package – مثلا سنكتب
net.arabteam2000.Android1
(صورة رقم 5)
ثم نضغط على Finish
يمكنك الان ان ترى مشروعك و جميع الملفات الخاصة به من خلال الـ Package Explorer . سنتكلم عن كل ملف او مجلد وقت الحاجة له.
الان لدي اهم ملفين هما – كما في الصورة
(صورة رقم 6)
الملف الاول – و يحوي على كود الجافا الخاص بالبرنامج ، اما الملف الثاني (ملف الـ xml) فهو يحوي على الكود الخاص بتصميم الواجهة الخاصة بالبرنامج.
قم بالضغط double-click على ملف الجافا ليفتح الكود الخاص بالبرنامج. الان وقبل ان نتكلم بصورة اكثر عن الكود و هذه الملفات – قم بتنفيذ البرنامج (من المفترض اولا انك قد قمت بأعداد المحاكي.)
عند التنفيذ – ستظهر لك هذه النافذة
(صورة رقم 7)
اختر منها خيار الـ Android Application
و هذه واجهة التنفيذ
(صورة رقم 8)
البرنامج سيقوم بعرض نص ترحيبي – كما في الصورة التي بالأعلى.
الان أترك المحاكي يعمل وقم بالرجوع الى الـ Eclipse لنتكلم قليلا عن البرنامج.
لنتكلم اولا عن ملف الـ xml والذي كما ذكرت هو الخاص بتصميم الواجهة. قم بالنقر عليه ليفتح كما في الصورة
(صورة رقم 9)
من خلال هذه النافذة يمكنك تصميم الواجهة الخاصة ببرنامجك. كما توضح الصورة التي في الاعلى، يمكنك اضافة الـ views الى برنامجك عن طريق خاصية الـ drag-and-drop .
ملاحظة: في الاندرويد الـ views تساوي الـ controls (اذا كنت مبرمج دوت نت)
يعني مثلا لو أردنا ان نضيف زر، يمكننا بكل سهولة بسحب Button من جهة اليسار و أضافته الى واجهة برنامجنا. و اذا ضغطنا على الزر المضاف بـ right-click يمكننا من تعديل الخصائص الخاصة بالزر
(صورة رقم 10)
او يمكننا تعديل الخصائص من نافذة properties في الجهة اليمنى.
طريقة ثانية للتحكم بالـ views في برنامجي – اذا لاحظت في الصورة رقم 9 – هناك في الاسفل خيارين:
- Graphical Layout
- Main.xml
نحن في الاساس في الـ Graphical Layout وهو الذي يمكنك من اضافة و التحكم في الـ views عن طريق الواجهات.
يمكنك الانتقال الى الـ main.xml حيث يمكنك استخدام الـ xml للأضافة او التحكم بالـ views.
الان انتقل الى main.xml عن طريق النقر عليه لتحصل على النافذة التالية
- -صورة رقم 11 -
طبعا لو تقارن الكود الذي في الاعلى مع واجهة برنامجك، يمكنك ان تستنتج الكثير من الامور. سنتكلم بكل تأكيد بصورة اكثر عن هذا الملف مستقبلا لأننا سنتعامل معه بشكل أساسي.
لو تلاحظ في الصورة التي بالأعلى هناك خط اصفر تحت هذا السطر
android:text=”Button”
ما معنى هذا؟
هيكلية برنامج الاندرويد تختلف عن غيرها (اقلها عن برامج الدوت نت – التي انا قادم منها!!)
الاندرويد يقوم بتعريف ملف من نوع xml اسمه strings و من الافضل ان تقوم بتعريف جميع المتغيرات من نوع string داخل هذا الملف. وعندما تريد ان تستخدمها من خلال برنامجك عليك ان تشير اليها. أين يمكن أن تجد هذا الملف؟
حسنا هذا الملف موجود في المجلد values تحت الـ res
كما في الصورة
- صورة رقم 12 -
وايضا كما تلاحظ لو قمت بفتح هذا الملف انه يمكن التعامل معه اما عن طريق الماوس والواجهات، او عن طريق ملف الـ xml
الان لو نرجع الى المشكلة و التي كانت في هذا السطر
android:text=”Button”
هذا السطر الغرض منه انه يقوم بأضافة نص الى الزر. قمنا بوضع النص بصورة مباشرة بين علامتي اقتباس، وكما ذكرنا انه من الافضل ان نقوم بتعريف جميع المتغيرات من نوع string في ملف الـ strings.xml
الان لو اردنا ان نضيف متغير داخل هذا الملف، كل ماعلينا هو اضافة هذا السطر (اذا استخدمنا طريقة الـ xml)
<string name="btn1">Hello</string>
بكل بساطة انت الان عرفت متغير اسمه btn1 يحوي على القيمة Hello
وهذه صورة ملف الـ strings.xml بعد الاضافة
(صورة رقم 13)
الان لو اردنا ان نستخدم هذا المتغير من داخل البرنامج، بالعودة الى ملف الـ main.xml ، وتحديدا الى السطر الذي كان به مشكلة
سنقوم بتعديل السطر من
android:text=”Button”
الى
android:text="@string/btn1”
الان لو تنتقل الى الـ Graphical Layout الخاصة بـ main.xml ستلاحظ تغيير النص الظاهر على الزر.
اتمنى ان الصورة الان واضحة.
تلخيص: نقوم بتعريف المتغيرات من نوع string في ملف strings.xml ثم نقوم بالوصول واستخدام هذه المتغيرات من داخل برنامجنا حسب الحاجة.
ربما مستقبلا سنتكلم ان شاء الله بتفاصيل اكثر عن هذا الملف وما الفائدة من ورائه.
الان بقي شيء أخير نتكلم عنه في هذا الدرس، وهو الملف الخاص بكود الجافا (في مثالنا هنا اسمه Android1Activity.java)
قم بالنقر عليه ليفتح كما في الصورة التالية
(صورة رقم 14)
لن اتكلم كثيرا عن هذا الكود الان على وعد ان افصل به ان شاء الله مستقبلا. ما اود ان اشير له الان هو المصطلح Activity
مرة اخرى، اذا كنت قادم من الدوت نت
الـ Activity هي تساوي الـ Form في بيئة الدوت نت.
سنتكلم بصورة مفصلة في الدرس القادم عن الـ onCreate و أخواتها بأذن الله.
فكر معي :resentful:
منذ بداية تعلمي للبرمجة عرفت ان لكل برنامج له main تعتبر هي الـ entry point التي يبدأ البرنامج منها التنفيذ. لذا كنت اسأل نفسي : يا ترى أين الـ main في برنامج الاندرويد؟
يتبع... اذا كان في العمر و الوقت متسع.
و السلام عليكم و رحمة الله