شرح طريقة برمجة Custom AlertDialog في الاندرويد

يستخدم مربع الحوار المخصص DIALOG لإنشاء تنبيه مخصص في android studio. يعرض مربع الحوار نافذة صغيرة مثل نافذة منبثقة تجذب انتباه المستخدم إلى النشاط قبل أن يواصل المضي قدمًا. يظهر مربع الحوار فوق النافذة الحالية ويعرض المحتوى المحدد فيه.

AlertDialog مقابل التنبيه المخصص

في حوار تنبيه ومخصص تنبيه الحوار كل من المطالبات نافذة صغيرة لجعل القرار. يستخدم AlertDialog المكونات أو الأساليب المحددة مثل setIcon و setTitle و setmessage وما إلى ذلك ولكن مع Custom AlertDialog يمكننا تخصيص مربع الحوار ويمكننا تحديد تخطيط مربع الحوار كما هو مطلوب. يمكنك قراءة المزيد عنها في البرنامج التعليمي لمربع حوار التنبيهات .

---

مثال على مربع حوار التنبيه المخصص في Android Studio:

يوجد أدناه مثال "مربع التنبيه المخصص" الذي يتم فيه تحديد وظيفة "مربع التنبيه" عبر النقر فوق الزر . في هذا المثال ، استخدمنا زرًا بسيطًا وفوق هذا الزر ، ستظهر نافذة حوار التنبيه.

يمكنك أدناه تنزيل الكود ، والاطلاع على الإخراج النهائي والشرح خطوة بخطوة لمثال مربع حوار التنبيه المخصص في Android Studio.

تنزيل كود (كلمة المرور: abhiandroid)

الخطوة 1: قم بإنشاء مشروع جديد وقم بتسميته CustomAlertDialog .

الخطوة 2: افتح res -> layout -> activity_main. xml (أو) main. xml وأضف الكود التالي:

هنا نقوم بإنشاء XML للزر وعرض النص . عند النقر فوق الزر ، سيظهر مربع حوار التنبيه المخصص ويكون عرض النص لمطالبة المستخدم بالنقر فوق الزر.

<?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="com.example.customalertdialog.MainActivity">

  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/buttonShowCustomDialog"
  android:onClick="exit"
  android:textStyle="normal|bold"
  style="@android:style/Widget.DeviceDefault.Button.Inset"
  android:layout_alignParentBottom="true"
  android:layout_centerHorizontal="true"
  android:layout_marginBottom="131dp"
  android:text="@string/click"/>

  <TextView
  android:text="CLICK TO VIEW CUSTOM ALERT DIALOG"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_above="@+id/buttonShowCustomDialog"
  android:layout_centerHorizontal="true"
  android:layout_marginBottom="86dp"
  android:id="@+id/textView"
  android:gravity="center"
  android:textStyle="normal|bold"
  android:textSize="18sp"
  tools:ignore="HardcodedText" />
  </RelativeLayout>

الخطوة 3: الآن قم بإنشاء اسم ملف تخطيط كـ custom.xml.
في هذا الملف سنقوم بتعريف XML لمظهر الحوار المخصص. مربع نص وصورة وزر.

<?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">

  <TextView
  android:text="@string/alert"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/text"
  android:textStyle="normal|bold"
  android:textSize="18sp"
  android:layout_alignParentTop="true"
  android:layout_toRightOf="@+id/image"
  android:layout_toEndOf="@+id/image"
  android:layout_marginLeft="21dp"
  android:layout_marginStart="21dp"
  android:layout_marginTop="12dp" />

  <ImageButton
  android:layout_width="35dp"
  android:layout_height="35dp"
  app:srcCompat="@drawable/stop"
  android:id="@+id/image"
  android:layout_alignParentLeft="true"
  android:layout_alignParentStart="true"
  android:layout_marginLeft="5dp"
  android:layout_marginTop="5dp"
  tools:ignore="ContentDescription,RtlHardcoded" />

  <Button
  android:id="@+id/dialogButtonOK"
  android:layout_width="200dp"
  android:layout_height="wrap_content"
  android:text="@string/dismiss"
  android:layout_marginTop="23dp"
  android:paddingRight="5dp"
  android:layout_below="@+id/image"
  android:layout_alignLeft="@+id/image"
  android:layout_alignStart="@+id/image"
  android:textSize="18sp"
  style="@style/Widget.AppCompat.Button.Colored"
  tools:ignore="RtlHardcoded,RtlSymmetry" />

  </RelativeLayout>

الخطوة 4: الآن افتح التطبيق -> java -> package -> MainActivity. جافا وإضافة الكود أدناه.

في هذا الرمز ، تتم إضافة onclick فوق الزر ، ثم يتم استخدام Dialog لإنشاء مربع حوار تنبيه مخصص.

package com.example.customalertdialog;

  import android.app.Dialog;
  import android.content.Context;
  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;
  import android.view.View;
  import android.widget.Button;
  import android.widget.ImageView;
  import android.widget.TextView;

  public class MainActivity extends AppCompatActivity {
  final Context context = this;
  private Button button;

  public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  button = (Button) findViewById(R.id.buttonShowCustomDialog);
  // add button listener
  button.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View arg0) {
  // custom dialog
  final Dialog dialog = new Dialog(context);
  dialog.setContentView(R.layout.custom);
  Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
  // if button is clicked, close the custom dialog
  dialogButton.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  dialog.dismiss();
  Toast.makeText(getApplicationContext(),"Dismissed..!!",Toast.LENGTH_SHORT).show();
  }
  });
  dialog.show();
  }
  });
  }
  }

المخرجات :

الآن قم بتشغيل التطبيق وعندما تضغط على الزر. سيظهر مربع حوار التنبيه المخصص على الشاشة.

تعديل المقال