Alert Dialog و Dialog بالعربي

ال Alert Dialog هو عبارة عن نافذة صغيرة تستخدم عادة للتأكيد على شيئ معين عندالضغط على زر ما (حذف عنصر تغيير شيئ الخ..)

وهذا مثال بسيط وعند الضغط على زر معين يتم تنفيذ حدث ما

 

 

 

نبدأ بإنشاء Alert Dialog ولكن قبل ذلك سنبدأ بتجهيز بعض الأشياء

المثال الذي سنضعه هو عبارة عن Button مع TextView ,وعند الضغط على هذا الزر سيظهر Alert Dialog للتأكيد وعند الضغط على زر “نعم” نقوم بتغيير TextView الى “المستودع التقني”

نبدأ بوضع Button و TextView في xml ونربطهم بملف الجافا

 

الآن نضع Listener عند الضغط على Button

وداخله سنقوم بإنشاء AlertDialog (سأضع صورة كاملة للكود وسأشرح كل سطر لوحده)

 AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);

قمنا بإنشاء Alert Dialog وقمنا بإعطاءه الكونتيكست (MainActivity.this)

                builder.setTitle("تأكيد");

بعد ذلك وضعنا عنوان ال Alert Dialog (“تأكيد”)

                builder.setMessage("هل تريد تغيير النص الى المستودع التقني؟");

ثم وضعنا الرسالة (“هل تريد تغيير النص الى المستودع التقني؟”)

بعد ذلك سنضع الأزرار “نعم” و “لا” يمكنك تسميتهم كما تشاء

 builder.setPositiveButton("نعم", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { textView.setText("المستودع التقني"); } });

هنا وضعنا زر يسموه ال “Positive”وهو عادة يكون ل “نعم” ,أياً كان يمكنك تسميته كما تشاء وثم وضع Listener يعمل عند الضغط على هذا الزر

وداخل DialogInterface.OnClickListener يمكنك وضع ماذا تريد أن ينفذ عند الضغط على هذا الزر

في حالتي أريد تغيير نص TextView

بكل بساطة وضعت

                        textView.setText("المستودع التقني");

أما عند الضغط على زر لا نريد إظهار رسالة Toast مثلاً

طبعاً اذا لم ترد مثلاً وضع زر “لا” ,وتريد فقط زر واحد (“Positive فقط على سبيل المثال)  لا تضع builder.setNegativeButton

                builder.setNegativeButton("لا", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        Toast.makeText(MainActivity.this, "لم يتم تغيير النص", Toast.LENGTH_SHORT).show();
                    }
                });

مثلها مثل زر “نعم” او Positive Button ولكن هنا نضع builder.SetNegativeButton

نقوم بإعطاء النص و DialogInterfaceOnClickListener وداخلها نضع الشيئ الذي نريد تنفيذه

في حالتي مجرد رسالة Toast

وأخيراً نقوم بإظهار Alert Dialog

                builder.show();

هذه صورة توضيحية عن العناصر الذي تم ذكرها

نقوم بتشغيل التطبيق

قد تجد بعض المبرمجين يضعون Alert Dialog بهذا الشكل والذي يؤدي نفس الغرض ولكن بدلاً من استدعاء builder. كل مرة

نقوم باستدعاءه مرة واحدة

لاحظ لا يوجد فواصل منقوطة “;” في آخر كل أمر

إنشاء Custom Alert Dialog 

ماذا اذا أردنا إنشاء Alert Dialog يحتوي على EditText وTextView مثلاً؟

نبدأ بإنشاء ملف xml يحتوي على محتويات AlertDialog

سنقوم مثلا بإنشاء EditText ونترك للمستخدم مثلا تسمية ال TextView بدلاً من جعله افتراضياً (“المستودع التقني”)

وسنقوم بإنشاء  Button زر خاص بنا في هذا الDialog

أنشأنا ملف xml وأسميناه custom_dialog على سبيل المثال

وضعنا به EditText و Button

الآن نعود ل MainActivity وداخل Listener ال Button

نقوم بإنشاء AlertDialog ولكن بشكل مختلف بعض الشيئ هذه المرة

AlertDialog dialog = new AlertDialog.Builder(MainActivity.this).create();

ثم نقوم بإنشاء View جديدة أسميناها “prompt”  وهي ملف xml الذي أنشأناه, ثم نقوم بعمل inflate لملف xml ونقوم بإعطاءه ملف custom_dialog

                View prompt = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_dialog,null);

الآن نقوم بتعريف EditText وال Button (نلاحظ أننا قمنا بوضع prompt.findViewById وليس findViewById بشكل مباشر وذلك لأننا داخل View مختلفة)

EditText editText = (EditText) prompt.findViewById(R.id.edit_text);
Button button1 = (Button) prompt.findViewById(R.id.btn_dialog);

ثم وضعنا OnClickListener ل Button عند الضغط عليه يتم تغيير نص TextView الى النص الذي أدخله المستخدم

قمنا بتعريف String أسميناه text وجعلنا قيمته هي editText.getText.toString والتي تقوم بأخذ النص الذي قام المستخدم بإدخالة وتحويله الى String

ثم قمنا بعمل textView.setText(text) لتغيير نص ال TextView

ثم قمنا بإغلاق dialog باستخدام dialog.dismiss()

 button1.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        String text = editText.getText().toString();
                        textView.setText(text);
                        dialog.dismiss();
                    }
                });

وخارج onClick button1 نقوم بعمل setView لوضع ال View الذي قمنا بإنشاءه

dialog.setView(prompt);

وأخيراً أظهرنا ال dialog

                dialog.show();

ليصبح الكود كاملاً

نشغل التطبيق

عند الضغط على الزر سيظهر Dialog

نقوم بكتابة النص (Tec-Store.org مثلاً)  ونقوم بالضغط على زر CLICK TO CHANGE TEXTVIEW

تم تغيير النص بنجاح!

المشروع على Github

إنشاء أكتفتي كامل على شكل Dialog

في هذه الحالة نقوم بإنشاء أكتفتي جديد مثل أي أكتفتي آخر ولكنه سيكون على شكل Dialog,أي أنه لن يغطي كامل الشاشة..

نقوم بإنشاء أكتفتي جديد نسميه activity_as_dialog على سبيل المثال

 

 

بعد ذلك نتوجه الى AndroidManifest.xml

ونقوم بوضع هذا السطر في وسم activity عند “activity_as_dialog” كما في الصورة

ليتم تغيير الشكل الى شكل Dialog

            android:theme="@style/Base.Theme.AppCompat.Light.Dialog">

الآن نعود الى MainActivity وداخل onClickListener  نقوم بتشغيل الأكتفتي الجديد

نشغل التطبيق

لقد قمت بوضع TextView في أكتفتي dialog يحتوي على “Hi i am a Dialog”

 

عن 3llomi

Just A GEEK :)

شاهد أيضاً

إرسال الإشعارات عبر Cloud Functions وبدون سيرفر خارجي

في هذا الشرح سنقوم بطرح كيفية إرسال الإشعارات الى المستخدمين باستخدام Firebase Cloud Functions بدون …

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *