Lesson 11

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

والصلاة والسلام على سيدنا محمد صل الله عليه وسلم

ان شاء الله النهارده هنتكلم فى اكتر من حاجه ونبدأ بسم الله ب XML وهو مهم جدا فى الاندرويد لان كل ال layout عبارة عن xml files .

-         XML : اختصار ل Extensible Markup Language

ازاى بنكتب كود داخل ال xml file ؟  اى كلام داخل ال xml file بيكون عبارة عن nodes ، يعنى ايه الكلام ده ؟

مثال :

< node>

</node>

 

-         كلمه node مش شرط تكون موجوده ، ده عبارة عن مثال وممكن نشيل كلمه node ونحط مكانها اى كلمه تانيه بس لازم اللى اكتبه كده < node>

اقفله كده </node> ، نفهم من كده ان ال node التانيه اللى جنبها / هى عبارة عن القفله بتاعت اللى فوق ، زى بالظبط لما كنا نعمل method بعدها نعمل قوسين {} والقوس اللى بنفتحه لازم نقفله فى ال method او ال class او حتى لو هنعمل if statement كان اى قوس نفتحه لازم نقفله ، هى كده بالظبط ال node اللى نفتحها لازم نقفلها ، وممكن بدل ما نعمل السطرين دول نعمل كده <node/> وكده كأننا فتحنا وقفلنا ال node فى نفس السطر ، يعنى عندنا طريقتين اى واحده فيهم نعملها تبقى صح المهم لازم نعمل اى واحده فيهم .

-         ال node هنا كأننا بالظبط خدنا object  من class ، ازاى ؟؟؟

يعنى المثال السابق معناه كالآتى : اننا عندنا Class اسمها node واحنا عايزين نستخدمها ، فبنعمل الشكل اللى فوق ده ، كده معناه اننا خدنا object من ال class اللى اسمها node .

-         نفترض ان ال Class اللى عايزين نستخدمها ديه ليها attribute واحنا عايزين نستخدمها ونضع لها قيم ، هنعمل ايه ؟؟؟

مثال :

 

<node h="3" w="4">

</node>

-         فى المثال السابق نلاحظ وجود h و w وهما دول اللى بيمثلوا ال Attributes  ، يعنى لما نحب نستخدم ال Attributes بتاعت ال Class بكتبها جنبها مكان ال h & w ونضع ليهم القيم اللى احنا عايزينها. 

-         ولازم ناخد بالنا لما نستخدم ال Attributes اننا نضع القيم بتاعتهم مابين double quotation  يعنى ما بين " "    .

-         نكتفى بالجزء ده فى ال xml المهم نفهم اللى فات كويس جدا والموضوع هيبقى واضح اكتر لما ندخل فى ال layout اللى فى الاندرويد .

 

-         نتكلم دلوقتى عن شويه ملاحظات كده فى الاندرويد :

 

-     ازاى ممكن نغير ال icon بتاعت ال application بتاعنا ؟؟؟

هندخل فى ال manifest file  وهنلاقى الشكل ده :

1-    مبدئيا لما بفتح ال manifest file نضغط على AndroidManifest.xml اللى موجوده فى اسفل الصورة ، وبكده نفهم ان ال manifest ده عبارة عن xml file .

-         نلاحظ ايضا ان <application  زيها زى ال node اللى شرحناها فى اول الدرس يعنى ايه ؟؟ يعنى application ديه عبارة عن Class وكده كأننا بناخد object منها ، وكل الكلام اللى جنبها زى ال icon & label والكلام التانى عبارة عن attribute داخل ال application .

-         عشان نغير ال icon الخاص بال application هنلاحظ android:icon=   وهو ده المكان اللى بنغير فيه ال icon الخاص بال application ، ازاى نغيّره اصلا ؟؟؟

-         هنلاحظ فى الشكل السابق الكلام ده "@drawable/ic_launcher" والكلام ده معناه ان لما نحب نغير اى صورة فى ال application مش مجرد icon  بس هنعمل ايه ؟؟ هنحط الصورة اللى عايزينها فى ال folder اللى اسمه drawable وده شرحناه الدرس السابق بالتفصيل ، وديه الطريقه اللى بستخدم بيها الصور اللى فى ال folder ده اننا نكتب "@drawable/" والكلمه اللى بعد العلامه ديه /  هى عبارة عن اسم الصورة اللى عايزين نستخدمها ومن هنا بتغير الصور اللى احنا عايزينها ، والطريقة ديه مش هتعملنا بس ازاى نغير icon  احنا كده اتعملنا ازاى نستخدم الصور من داخل ال xml file فى الاندرويد .

 

2-   ازاى نغير الاسم الخاص بال application بتاعنا ؟؟؟ نرجع للصورة اللى فاتت ونشوف ، هنلاحظ android:label="@string/app_name"  وده المكان اللى بنغيّر منه ال label يعنى الاسم الخاص بال application  ، بس يعنى ايه @string ؟؟ يوجد ملف اسمهstrings   ده عبارة عن file موجود داخل ال res  à values à strings.xml ولو فتحنا ال file ده هنلاقية كده :

 

-         وال file ده عبارة عن xml file بنكتب فيه كل ال strings اللى بنستخدمها فى ال application وكل string بنعمله بياخد مننا اسم زى اول واحد كده اللى عليه مربع احمر  ، هو ده اللى موجود فى ال manifest file فى الجزء الخاص بتغيير ال application name ، هنلاقى  "@string/app_name" موجود ، وده معناه ان البرنامج دخل جوه ال string file وراح جاب ال string  اللى اسمه app_name اللى انا فى البرنامج عندى اسمه TestProject ، كل اللى فات فى الجزء الخاص بتغيير ال application name  مش مجرد هنستخدمه بس فى حاله تغيير ال application name ، احنا كده اتعملنا ازاى نتعامل مع ال  strings file ولو عايزين نضيف string جديد هنكتب كده داخل ال strings file

<string name="My_string">
string test</string>

3-   دلوقتى ان شاء الله هنتكلم عن ال layout وزى ما قولنا قبل كده هو بيمثل ال user interface اللى من خلاله ال user بيتعامل مع ال application ، وهنلاحظ واحنا بنعمل new android application  ان البرنامج هيعملنا من نفسه layout واحد واحنا بقه لو عايزين نزود عدد ال layout براحتنا نعمل اللى احنا عايزينه على حسب احتياجتنا فى ال application ، وده شكل ال layout اللى البرنامج بيعمله وبيكون اسمه activity_main.xml :

-         هنشرح اللى موجود فى الشكل السابق بس قبلها لازم نعرف حاجات مهمة وهى :

Concept of Design in android

 

-         View : عبارة عن كل الادوات اللى بنستخدمها فى ال design الخاص بال layout  زى الامثلة اللى موجوده فى الشكل السابق : TextView  وده بيظهر فيه ال Text وال ImageView وده بنستخدمه لو عايزين نضع صورة فى الlayout  وال ListView اللى بنعرض فيها قائمة من اى حاجه احنا عايزينها ، وطبعا الامثلة اللى موجوده ديه مش كلها فيه غيرها كتير ، ومع عمل اكتر من application هنكتشف فايدة ال Views ديه وطريقة استخدامها .

             -          View Group: وده عبارة عن الوعاء اللى بيحتوى على ال Views اللى فى الlayout  وامثلة ال ViewGroup موجوده فى الشكل السابق ، ولو لاحظنا فى الصورة الخاصة بال layout (activity_main.xml) هنلاقى فى بداية ال file مكتوب <RelativeLayout وهو ده ال ViewGroup اللى فى ال file اللى بيحتوى كل ال Views اللى داخل ال file.

-         اكتر ViewGroup بنستخدمه فى الاندرويد هما ال LinearLayout وال RelativeLayout ، بس ايه هو الفرق بينهم  ؟؟؟

1-   RelativeLayout :  فى هذا ال ViewGroup بنقدر نضع ال Views اللى جواه فى اى مكان فى الشاشة مجرد ما اسحب ال View واعملّه Drag and drop فى اى مكان فى الشاشة بيقبل عادى انه يكون فى اى مكان عكس ال LinearLayout  ، بس لازم نجرب الكلام ده بأيدينا .

 

 

2-   LinearLayout : وهذا النوع من ال ViewGroup يحتوى على نوعين وهما :

-    Vertical LinearLayout : وده بيقسم ال Views فى الشاشة بالشكل ده

 

-         لما بنستخدمه بيرتب ال Views تحت بعض كما فى الشكل السابق Vertical

-    Horizontal LinearLayout : وده بيقسم ال Views فى الشاشة بالشكل ده

-         لما بنستخدمه بيرتب ال Views جنب بعض كما فى الشكل السابق horizontal

·       ملحوظة : نقدر نستخدم ViewGroup داخل ViewGroup على حسب احنا عايزين شكل ال layout يكون عامل ازاى .

مثال عايزين نطبق الشكل ده :

 

-         فى المثال السابق هنتعلم ازاى نفكر فى عمل شكل ال layout :

-         اولاً : هنلاقى ان  الشكل كله متقسم تحت بعض يبقى نفهم من كده ان ال ViewGroup اللى هيضم الشكل كله هيكون عبارة عن LinearLayout Vertical

-         ثانياً : هنلاقى ان اول Row عبارة عن اكتر من View متقسمين جنب بعض ، يبقى اول Row لوحده هيكون عبارة عن LinearLayout horizontal  وجواه كل ال Views الموجوده .

-         ثالثاً : هنلاقى ان ال row الثانى عبارة عن View لوحده مش معاه حاجه تانيه ، يبقى هنحطه لوحده من غير ان ViewGroup معاه

-         رابعاً : هنلاقى الRow  الثالث زى ال Row  الاول ، يبقى هنقسمه برده زى الاول ونضعه داخل LinearLayout horizontal

-         ملحوظة : بنستخدم ال RelativeLayout فى حالة اننا نلاقى View  هنثبته فى اول او فى اخر او فى اى مكان فى ال layout ، يعنى ال linear هى الافضل فى الاستخدام   لكن بنلجأ إلى استخدام ال Relative فى حالة اننا عايزين نثبت View فى مكان معين فى ال layout .

-         وده الحل النهائي اللى هيكون عليه المثال السابق :

 

-         يوجد معايير اساسية لازم واحنا بنعمل View او ViewGroup تكون موجوده

وهم : 1- Width     2- height

لازم يكونوا موجودين ومن غيرهم هيظهر لنا Error لكن فى معيار ثالث هو من غيره مش هيظهر Error لكن احنا ك developer بنحتاجه جدا جدا وهو :

3-   Id  : فى حالة اننا هنستخدم ال View فى الjava classes  لازم نكون حاطين id لل View عشان نقدر نستخدمه ، وده شكل ال View لما نحطله width and height and id

 

-         واحنا بنحط ال width and height لأى View  بيكونوا عبارة  عن :

1-   Match_parent : وده معناه ان ال width or height زى ال parent بتاع ال view ده يعنى لو ال parent واخد عرض الشاشة كلها يبقى هياخد نفس العرض او لو واخد عرض او طول معين برده هياخد نفس العرض او الطول والparent  هنا هو ال RelativeLayout.

2-   Wrap_content : وده معناه على قد المحتوى بتاع ال View هيكون حجم الطول او العرض

3-   Num dp"" : وnum  هنا هنعوض عنها بأى رقم ، وdp معناها dependent pixel ، وده معناه اننا بنحط قيمة محددة لل width او لل height .

-         ازاى نحط id لأى View ؟؟؟    بنكتب  "@+id/View Name" .

وبكده نكون خلصنا الدرس النهارده وهناخد task على درس النهارده عشان تتعودوا تعملوا layout

-         Task :

عايزين ننفذ الشكل ده ، فكروا كده على ورقة ازاى ممكن ننفذه زى المثال اللى خدناه فى الدرس النهارده :

-         يارب تكونوا ستفدوا من الدرس وبالتوفيق يارب

            السلام عليكم ورحمة الله وبركاته