سلسلة تعليم برمجة تطبيقات الأندرويد (الدرس الواحد والعشرون)

سلسلة تعليم برمجة تطبيقات الأندرويد

الدرس الواحد والعشرون

نرحب بكم أصدقاءنا في درس جديد من سلسلة تعليم برمجة تطبيقات الأندرويد واليوم سوف ننتقل إلى فكرة جديدة ومثال جديد لنتعلم فكرة جديدة مهمة ألا وهي التعامل مع الصور برمجياُ ولتحقيق الغرض السابق سنقوم بتصميم واجهة بسيطة وإضافة كود برمجي لها، فهل أنتم على استعداد لذلك؟! هي بنا ...

 لنذهب إلى برنامج أندرويد استديو ولنقم بإنشاء تطبيق جديد و نسميه ImageSrc كما في الشكل التالي:

ولنقم بإضافة العناصر التالية إلى ملف الواجهة التصميمية المسمى activity_main.xml:

1- عنصر الصورة Image View.

2- عنصر الزر Button.

3- عناصر الاختيار من النوع Radio Button وعددها ثلاث عناصر.

ولنقم بإضافة ثلاثة صور إلى المجلد drawable الموجود في المجلد res عبر نسخ الصور ولصقها ضمنه (بالضغط بالزر الأيمن للماوس عليه واختيار paste) ولا ننسى أن اسم أي صورة يجب أن يكون بحروف صغيرة كما في الشكل التالي:

لنقم بإضافة العناصر وإجراء التسميات المناسبة كما تعلمنا في الدروس السابقة بحيث يصبح شكل الواجهة كما في الشكل التالي:

وفي الواجهة السابقة كنا قد استخدمنا ما يلي:

1- عنصر Radio Group وأضفنا إليه ثلاث أزرار من النوع Radio Button وقمنا بوضع المحاذاة لكل عنصر من العناصر نحو اليسار وجعلنا حجم الخط 18pt.

2- عنصر الزر Button وكنا قد جعلنا حجم الخط فيه أيضاً 18pt.

3- عنصر الصورة Image View واخترنا أحد الصور الموجودة ضمن المجلد drawable عبر الخاصية src من خصائص العنصر.

وبعد الانتهاء من تصميم الواجهة الرسومية علينا الانتقال الآن إلى الكود البرمجي ولذلك سنقوم كما اعتدنا بتعريف عنصر الزر فقط ضمن الطريقة onCreate() كما يلي:

Button b=(Button)findViewById(R.id.button); b.setOnClickListener(this);

وبعدها سنضيف معالجة للحدث أي الضغط على الزر عبر إضافة الطريقة onClick() كما يلي:

@Override public void onClick(View v) { }

والآن ولكي نتمكن من التعامل مع عناصر أزرار الاختيار لابد من تعريف العناصر برمجياً وفق الكود البرمجي التالي:

RadioButton r1=(RadioButton)findViewById(R.id.radioButton); RadioButton r2=(RadioButton)findViewById(R.id.radioButton2); RadioButton r3=(RadioButton)findViewById(R.id.radioButton3);

والآن وقبل كتابة الكود البرمجي المسؤول عن تغيير الصورة لابد من صياغة ما سيقوم به التطبيق بشكل بسيط:

"إذا قام المستخدم باختيار عنصر الاختيار الأول المسمى First Image فإنه سيتم عرض الصورة الأولى ضمن عنصر الصورة Image View وإذا قام باختيار عنصر الاختيار المسمى Second Image فإنه سيتم عرض الصورة الثانية ضمن عنصر الاختيار وإذا تم اختيار العنصر الثالث المسمى Third Image فإنه سوف يعرض الصورة الثالثة".

بما أنه ورد ذكر كلمة "إذا" باللغة العربية فهذا يعني أننا بحاجة إلى شرط وكنا قد تعلمنا أن التعليمة الشرطية المناسبة لذلك هي تعليمة if ولذلك سيصبح تحقيق الشروط كما يلي:

if(r1.isChecked()){         } else if(r2.isChecked()){    } else if(r3.isChecked()){    }

ولم يبقى أمامنا سوى تعليمة تغيير الصورة وهي على الشكل التالي:

ImageView i=(ImageView)findViewById(R.id.imageView); i.setImageDrawable(getResources().getDrawable(R.drawable.how_adv));

والطريقة setImageDrawable التي تستخدم مع العنصر البرمجي Image View هي المسؤولة عن تحديد الصورة التي ستعرض فيه وسيتم أخذ الصورة من المجلد drawable حسب اسمها كما هو موضح في التعليمة وبالتالي يصبح الشكل النهائي للكود البرمجي وفق ما يلي:

if(r1.isChecked()){     i.setImageDrawable(getResources().getDrawable(R.drawable.how_adv)); } else if(r2.isChecked()){     i.setImageDrawable(getResources().getDrawable(R.drawable.how_share)); } else if(r3.isChecked()){     i.setImageDrawable(getResources().getDrawable(R.drawable.how_win)); }

إذاً ببساطة اختبر الشرط فإن تحقق اعرض الصورة المناسبة في عنصر Image View وبهذه الطريقة في كل مرة نختار خيار من الخيارات الثلاثة المتاحة، ستظهر لنا صورة مختلفة عند الضغط على الزر ولم يبقى أمامكم سوى تجربة ما سبق للتأكد من أنه يعمل وفق الشكل الصحيح المناسب.

نتمنى أن تكونوا قد استفدتم من هذا الدرس ......نلقاكم كالمعتاد في الدرس القادم.