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

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

الدرس الثاني والعشرون

مرحبا بكم في درس جديد من دروس سلسلة برمجة تطبيقات الأندرويد التعليمية، سنتعلم في درسنا اليوم عنصر جديد من العناصر التي سنستخدمها في الكثير من تطبيقاتنا وهو عنصر الاختيار Check Box فهي بنا نتعرف عليه ولنستخدمه في مثال بسيط نوضح فيه كيفية التعامل معه ...

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

وفكرة التطبيق ببساطة تكمن في أنه عبارة عن سلة شرائية مصغرة من ثلاث منتجات من الممكن أن يقوم المستخدم بشرائها (افتراضياً) ومن ثم سنعرض ما قام بشرائه عند الضغط على زر Buy بعد أن يختار من المنتجات الثلاثة ما يريد.

وقبل أن نبدأ بتصميم الواجهة الرسومية لابد أن نوضح الفرق بين عنصر الاختيار من النوع Radio Button وعنصر الاختيار من النوع Check Box وهو كما يلي:

في النمط Radio Button لا يستطيع المستخدم سوى اختيار عنصر واحد فقط أما في النمط Check Box فإن المستخدم يستطيع اختيار العدد الذي يريده من الخيارات وهذا هو الفرق الرئيسي بينهما.

لنقم بتصميم الواجهة الرسومية بحيث تحوي ما يلي:

1- 3 عناصر من النوع Check Box والتي تمثل المنتجات.

2- عنصر الزر Button وسنسميه Buy.

ويوضح الشكل التالي الواجهة الرسومية:

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

لننتقل الآن إلى الكود البرمجي ولنبدأ، كما المعتاد، بتعريف الزر في الطريقة onCreate() كما يلي:

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

ومن ثم نضيف الطريقة onClick() لمعالجة الحدث كما يلي:

@Override
public void onClick(View v) {

}

والآن سنبدأ بمعالجة الحدث وفق الأسلوب التالي:

"إذا قام المستخدم باختيار الخيارات الثلاثة فإننا سنكتب أسماء المنتجات الثلاثة في متحول نصي من النوع String وإن قام باختيار اثنين فقط فإننا سنكتب هذين الاثنين فقط ونفس الأمر بالنسبة لاختياره لخيار واحد من المنتجات".

يمكن الملاحظة، كنظرة أولى، أن العملية أكثر تعقيداً من التعامل مع عنصر الاختيار من النوع Radio Button وهذا منطقي جداً كوننا نستطيع اختيار أكثر من خيار هنا.

لنبدأ بتعريف العناصر برمجياً ضمن الطريقة onClick() كما يلي:

CheckBox c1=(CheckBox)findViewById(R.id.checkBox);
CheckBox c2=(CheckBox)findViewById(R.id.checkBox2);
CheckBox c3=(CheckBox)findViewById(R.id.checkBox3);

ولنقم الآن بكتابة الشروط بالشكل المناسب كما يلي:

if(c1.isChecked() && c2.isChecked() && c3.isChecked()){

}
else if(c1.isChecked() && c2.isChecked() ){

}

else if(c1.isChecked() && c3.isChecked()) {

}

else if(c2.isChecked() && c3.isChecked()){

}

else if(c1.isChecked()){

}

else if(c2.isChecked()){

}

else if(c3.isChecked()){

}

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

String val="";
if(c1.isChecked() && c2.isChecked() && c3.isChecked()){
val=c1.getText().toString()+" "+c2.getText().toString()+" "+c3.getText().toString();
}
else if(c1.isChecked() && c2.isChecked() ){
val=c1.getText().toString()+" "+c2.getText().toString();
}

else if(c1.isChecked() && c3.isChecked()) {
val=c1.getText().toString()+" "+c3.getText().toString();
}

else if(c2.isChecked() && c3.isChecked()){
val=c2.getText().toString()+" "+c3.getText().toString();
}

else if(c1.isChecked()){
    val=c1.getText().toString()
}

else if(c2.isChecked()){
    val=c2.getText().toString()
}

else if(c3.isChecked()){
    val=c3.getText().toString()
}

وكنا قد تعلمنا في الدروس السابقة استخدام الطريقتين getText() و toString() وببساطة استخدمناهما مع الشرط المناسب للحصول على ما هو مكتوب ضمن عناصر الاختيار المناسبة.

وفي النهاية وبغض النظر عن أي شرط قد تحقق سنقوم بطباعة ما اختاره المستخدم وفق التعليمة التالية:

Toast.makeText(getApplicationContext(), val, Toast.LENGTH_LONG).show();

لم يبقى عليكم سوى تنفيذ التطبيق ومعاينة النتيجة وسنطرح عليكم سؤال واحد فقط في نهاية الدرس وهو على الشكل التالي:

هل قمنا بمعالجة جميع الحالات؟! وإن كان الجواب لا فما هي الحالة التي لم نعالجها؟! جواب السؤال السابق يعتبر بمثابة تدريب لكم.... نلقاكم في الدرس القادم بإذن الله