علبة حوار للخروج من التطبيق بتصميمك
السلام عليكم ورحمة الله وبركاته
في هذه التدوينة اقدم لك فيها كيف تقوم بتصميم علبة حوار (Dialog) للخروج من التطبيق حيث تتحكم بلونها وشكلها وبأمكانك ايضا اضافة الصور تعتبرها كازرار للموافقة وغير الموفقة طبعا يمكنك اضافة هذه علبة الحوار في زر او عند الضغط على زر الرجوع الخاص بالهاتف فنبدأ بالشرح على بركة الله .
الشرح
اولا : يتوجب لدينا صفحة في (Custom View) لتصميم علبة الحوار فنتبع الخطوات الاتية :
_ نضغط على السهم المجاور لزر تجميع التطبيف الموجود في صفحة التصميم وهي (VIEW) .
_ بعد الضغط على السهم نختار (Custom View) وبعدها نضغط على زر الاضافة (+) لاضافة صفحة كما موضح بالصورة ادناه .
_ نقوم بتسمية الصفحة custom او اي اسم لكن مع حفظ اسم الصفحة لاننا سنحتاجه في الكود .
*هذه الصفحة هي علبة الحوار فأنت تقوم بتصميم علبة الحوار التي ستظهر للمستخدم .
ثانيا : الان سنقوم بأضافة في الصفحة (Linear"V) ومن خلال الخصائص الخاصة به نضغط على خاصية Gravity ونختار من الخيارات التي ظهرت (Center_Horzinatol) وايضا (Center_Vertical) .
_ نضغط على السهم المجاور لزر تجميع التطبيف الموجود في صفحة التصميم وهي (VIEW) .
_ بعد الضغط على السهم نختار (Custom View) وبعدها نضغط على زر الاضافة (+) لاضافة صفحة كما موضح بالصورة ادناه .
*هذه الصفحة هي علبة الحوار فأنت تقوم بتصميم علبة الحوار التي ستظهر للمستخدم .
ثانيا : الان سنقوم بأضافة في الصفحة (Linear"V) ومن خلال الخصائص الخاصة به نضغط على خاصية Gravity ونختار من الخيارات التي ظهرت (Center_Horzinatol) وايضا (Center_Vertical) .
ثالثا : ايضا نتوجه الى خاصية Height ونختار من الخيارات التي ظهرت (wrap_content) .
رابعا : الان سنقوم بأضافة في (Linear"V) حاجة وهي textview ونضغط من خلال الخصائص الخاصة بها على text ونستبدل النص من textview الى هل أنت متأكد من الخروج من التطبيق .
خامسا : بعد اضافة الحاجة نقوم بأضافة (Linear"H)اسفل الحاجة textview ومن خلال الخصائص الخاصة به نضغط على Gravity ونختار من الخيارات التي ظهرت (Center_Horzinatol) وايضا (Center_Vertical) .
سادسا : نضيف الازرار في (Linear"H) والتي عددها اثنين الاول للموافقة والثاني لعدم الموافقة حسب الخطوات الاتية :
_ نضيف الزر الاول ومن خلال الخصائص نضغط على خاصية text ونغير النص من button1 الى نعم .
_ نضيف الزر الثاني ومن خلال الخصائص نضغط على خاصية text ونغير النص من button1 الى لا .
سابعا : بعد الانتهاء من الخطوات اعلاه نضغط على السهم المجاور لزر التجميع وبعدها نضغط على viewوبعدها نضغط على main.xml .
ثامنا : نضيف في صفحة التصميم وهي (VIEW) زر وهذا الزر يختص بالخروج من التطبيق بعد الضغط عليه اذن بعد اضافته من خلال خصائصه نضغط على خاصية text ونغير النص من button1 الى خروج .
تاسعا : ندخل الى الحدث الخاص بالزر ومن خلالoperator نضيف اخر بلوك وهو (add source directly) ونضيف فيه الكود ادناه كما موضح بالصورة القادمة .
خامسا : بعد اضافة الحاجة نقوم بأضافة (Linear"H)اسفل الحاجة textview ومن خلال الخصائص الخاصة به نضغط على Gravity ونختار من الخيارات التي ظهرت (Center_Horzinatol) وايضا (Center_Vertical) .
سادسا : نضيف الازرار في (Linear"H) والتي عددها اثنين الاول للموافقة والثاني لعدم الموافقة حسب الخطوات الاتية :
_ نضيف الزر الاول ومن خلال الخصائص نضغط على خاصية text ونغير النص من button1 الى نعم .
_ نضيف الزر الثاني ومن خلال الخصائص نضغط على خاصية text ونغير النص من button1 الى لا .
سابعا : بعد الانتهاء من الخطوات اعلاه نضغط على السهم المجاور لزر التجميع وبعدها نضغط على viewوبعدها نضغط على main.xml .
ثامنا : نضيف في صفحة التصميم وهي (VIEW) زر وهذا الزر يختص بالخروج من التطبيق بعد الضغط عليه اذن بعد اضافته من خلال خصائصه نضغط على خاصية text ونغير النص من button1 الى خروج .
تاسعا : ندخل الى الحدث الخاص بالزر ومن خلالoperator نضيف اخر بلوك وهو (add source directly) ونضيف فيه الكود ادناه كما موضح بالصورة القادمة .
View popupView = getLayoutInflater().inflate(R.layout.custom, null);
final PopupWindow popup = new PopupWindow(popupView, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, true);
Button b1 = popupView.findViewById(R.id.button1);
Button b2 = popupView.findViewById(R.id.button2);
b1.setOnClickListener(new OnClickListener() { public void onClick(View view) { MainActivity.this.finish();
} });
b2.setOnClickListener(new OnClickListener() { public void onClick(View view) {
popup.dismiss();
} });
popup.showAtLocation(popupView, Gravity.CENTER, 0, 0);
ملاحظات عن الكود فقط
_ اللون الاخضر هو اسم الصفحة التي قمت بتصميم علبة الحوار فيها فأذا غيرته غير custom تستبدل النص الذي اسميت به الصفحة بدلا من custom التي باللون الاخضر .
_ اللون البرتقالي وهو (button1) هو الايدي الخاص بزر الموافقة اما الثاني وهو (button2) مختص بزر عدم الموافقة .
عاشرا : بعد الانتهاء من الخطوات اعلاه نضغط على الزر الخاص بتجميع التطبيق (Run) الموجود في صفحة التصميم (VIEW) .
اختصار لما تم استعماله في هذه التدوينة
* نبذة مختصرة عن قسم CustomView
يستخدم هذا القسم لانشاء صفحات معينة حسب الغرض من انشاءها ويكون الوصول اليها والتحكم بما فيها من تخطيطات او حاجيات من خلال اي صفحة موجودة في القسم view ويكون التصميم ايضاً لما موجود في هذه الصفحة من حاجيات او تخطيطات في اي صفحة في القسم view .
استعمالات شائعة لهذه الصفحة
1 - تصميم علبة حوار الخروج او علبة حوار التنزيل
2 - تصميم شكل المحادثات وكمثال شائع كبرامج التواصل الاجتماعي
* نبذة مختصرة عن Linear V
يستخدم هذا التخطيط عند الحاجة في ترتيب التخطيطات او الحاجيات بشكل عمودي فما عليك بعد اضافة هذا اللاينر سوى سحب الحاجة او التخطيط الذي تريده وسيتم ترتيبه بشكل تلقائي داخل اللاينر .
* نبذة مختصرة عن Textview
تستخدم هذه الحاجة عند رغبة المبرمج باضافة نصوص لتطبيقهُ وهو شائع الاستخدام في برامج التواصل فمثلا منشورات تطبيق ميتا ( فيسبوك سبقاً ) وانستغرام فالمنشورات في الواجهة الرئيسية للتطبيق تحتوي على هذه الحاجة .
* نبذة مختصرة عن الزر Button
يستخدم هذا الزر لتنفيذ اوامر معينة بعد الضغط عليه وهو يحتوي على ثلاثة احداث ونبدأ بأول حدث وهو شائع الاستخدام بشكل كبير في التطبيقات وهو حدث عند الضغط
_ حدث onClick
في هذا الحدث تضاف الاوامر التي تريد تنفيذها بمجرد الضغط على الزر .
اما الحدث الثاني وهو :
_ حدث onTouch
في هذا الحدث تضاف الاوامر التي تريد تنفيذها بمجرد لمسة خفيفة على الزر .
والحدث الاخير :
_ حدث onLongClicked
في هذا الحدث تضاف الاوامر التي تريد تنفيذها بمجرد الضغط المطول على الزر اي تستمر بالضغط على الزر الى حين تنفيذ الاوامر التي تمت اضافتها داخل هذا الحدث .
