如何在安卓中创建自定义对话框?

406
我想创建一个类似下面的自定义对话框:

enter image description here

我尝试了以下几种方法:
  1. 创建了一个AlertDialog.Builder的子类,并使用自定义标题和自定义内容视图,但结果不如预期。

  2. 另一种尝试是创建DialogFragment的子类,并在onCreateDialog中自定义对话框,但结果不如预期。

  3. 然后我尝试使用普通的Dialog类。结果不如预期。

在这三种情况下,当我忽略标题视图时,对话框的大小不如预期,当我使用标题视图时,结果是内容视图周围有一个厚厚的边框(看起来真的很糟糕)。现在我脑海中有两个问题...
  1. 我该如何实现?由于我已经尝试了很多方法,直接回答将更加赞赏。

  2. 在Android应用程序中显示错误或警报对话框的最佳方法是什么?

编辑 Android开发文档建议我们使用DialogFragments或Dialogs来向用户显示错误/警报消息。然而在某一个点上,他们说...

提示:如果你想要一个自定义对话框,你可以代替使用Dialog APIs来显示一个Activity作为对话框。只需创建一个活动并将其主题设置为manifest元素中的Theme.Holo.Dialog即可。

这是什么意思?难道仅为了显示错误消息就使用一个Activity太过于浪费了吗?


仅因为问题的第二部分尚未回答...向用户显示错误/警报消息的最佳方法是什么? - Amit
@sumit-bijwani:我不明白你需要什么,已经有被接受的答案了,你为什么要提供悬赏? - Akhil
3
使用DialogFragment比接受的答案更好。 - Benoit
@Amit 根据图片来看,你想要实现的对话框似乎包含与标准 AlertDialog 相同的元素(标题、内容、按钮栏)。因此,我猜你可以仅通过样式来实现你想要的外观。 - Anderson
要使用Dialog Fragment实现此功能,请参见http://learnzone.info/android-tutorial-custom-alert-dialog-using-dialogfragment/。 - Madhav Bhattarai
21个回答

4
您可以尝试这个简单的Android弹出对话框库来简化冗杂的对话框代码。在您的活动中使用非常简单。 之后,您可以在您的活动中使用以下代码显示对话框:
Pop.on(this).with().title(R.string.title).layout(R.layout.custom_pop).show();

其中的R.layout.custom_pop是您自定义布局,用于装饰对话框。


4

Kotlin中的全屏自定义警报对话框类

  1. Create XML file, same as you would an activity

  2. Create AlertDialog custom class

    class Your_Class(context:Context) : AlertDialog(context){
    
     init {
      requestWindowFeature(Window.FEATURE_NO_TITLE)
      setCancelable(false)
     }
    
     override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.your_Layout)
      val window = this.window
      window?.setLayout(WindowManager.LayoutParams.MATCH_PARENT,
                         WindowManager.LayoutParams.MATCH_PARENT)
    
      //continue custom code here
      //call dismiss() to close
     }
    }
    
  3. Call the dialog within the activity

    val dialog = Your_Class(this)
    //can set some dialog options here
    dialog.show()
    

注意:如果您不想让对话框全屏显示,请删除以下行

      val window = this.window
      window?.setLayout(WindowManager.LayoutParams.MATCH_PARENT,
                         WindowManager.LayoutParams.MATCH_PARENT)

接下来,在XML文件中编辑您顶部布局的layout_width和layout_height,可以将它们设置为wrap_content或者指定一个固定的DP值。

通常我不建议使用固定的DP值,因为您可能希望您的应用能够适应多个屏幕尺寸,但如果您将尺寸值保持足够小,那么应该可以正常工作。


3

这是一个警示对话框的类,让你可以从任何活动中调用该类以重用代码。

public class MessageOkFragmentDialog extends DialogFragment {
Typeface Lato;
String message = " ";
String title = " ";
int messageID = 0;

public MessageOkFragmentDialog(String message, String title) {
    this.message = message;
    this.title = title;
}


@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {

    AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

    LayoutInflater inflater = getActivity().getLayoutInflater();

    View convertview = inflater.inflate(R.layout.dialog_message_ok_box, null);


    Constants.overrideFonts(getActivity(), convertview);
    Lato = Typeface
            .createFromAsset(getActivity().getAssets(), "font/Lato-Regular.ttf");


    TextView textmessage = (TextView) convertview
            .findViewById(R.id.textView_dialog);

    TextView textview_dialog_title = (TextView) convertview.findViewById(R.id.textview_dialog_title);

    textmessage.setTypeface(Lato);
    textview_dialog_title.setTypeface(Lato);



    textmessage.setText(message);
    textview_dialog_title.setText(title);



    Button button_ok = (Button) convertview
            .findViewById(R.id.button_dialog);
    button_ok.setTypeface(Lato);

    builder.setView(convertview);
    button_ok.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View arg0) {
            dismiss();

        }
    });


    return builder.create();

}
}

相应的 XML 文件如下:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:gravity="center_vertical|center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue_color"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textview_dialog_title"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:gravity="center"
                android:textColor="@color/white_color"
                android:textSize="@dimen/txtSize_Medium" />


        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/txt_white_color" />

        <TextView
            android:id="@+id/textView_dialog"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="@dimen/margin_20"
            android:textColor="@color/txt_gray_color"
            android:textSize="@dimen/txtSize_small" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/txt_white_color"
            android:visibility="gone"/>

        <Button
            android:id="@+id/button_dialog"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/margin_40"
            android:layout_gravity="center"
            android:background="@drawable/circular_blue_button"

            android:text="@string/ok"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="@dimen/margin_10"
            android:textColor="@color/txt_white_color"
            android:textSize="@dimen/txtSize_small" />
    </LinearLayout>

</LinearLayout>

3

改变背景颜色和文字样式的最简单方法是为Android警报对话框制作自定义主题,如下所示:

只需将以下代码放入styles.xml中:

    <style name="AlertDialogCustom" parent="@android:style/Theme.Dialog">
    <item name="android:textColor">#999999</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowTitleStyle">@null</item>
    <item name="android:typeface">monospace</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:textSize">@dimen/abc_text_size_medium_material</item>
    <item name="android:background">#80ff00ff</item>
</style>

现在自定义部分已经完成,现在只需将其应用到您的alertBuilder对象中:

    AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this,R.style.AlertDialogCustom);

希望这能帮到你!

3
创建自定义警告对话框
cumstomDialog.xml
<ImageView
    android:id="@+id/icon"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    app:srcCompat="@drawable/error" />

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:fontFamily="@font/muli_bold"
    android:text="Title"
    android:layout_marginTop="5dp"
    android:textColor="@android:color/black"
    android:textSize="15sp" />


<TextView
    android:id="@+id/description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    android:fontFamily="@font/muli_regular"
    android:text="Message"
    android:textColor="@android:color/black"
    android:textSize="12dp" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="20dp"
    android:gravity="center"
    android:orientation="horizontal">

    <Button
        android:id="@+id/cancelBTN"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_margin="5dp"
        android:background="@drawable/bground_radius_button_white"
        android:text="No"
        android:textColor="@color/black" />

    <Button
        android:id="@+id/acceptBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_margin="5dp"
        android:background="@drawable/bground_radius_button"
        android:text="Yes"
        android:textColor="@color/white" />
</LinearLayout>

在您的活动中显示自定义对话框:

  public void showDialog(String title, String des, int icon) {

    final Dialog dialog = new Dialog(this);
    dialog.setContentView(R.layout.custom_dialog);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

    Button cancelBTN = dialog.findViewById(R.id.cancelBTN);
    Button acceptBTN = dialog.findViewById(R.id.acceptBtn);
    TextView tvTitle = dialog.findViewById(R.id.title);
    TextView tvDescription = dialog.findViewById(R.id.description);
    ImageView ivIcon = dialog.findViewById(R.id.icon);

    tvTitle.setText(title);
    tvDescription.setText(des);
    ivIcon.setImageResource(icon);

    cancelBTN.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            dialog.dismiss();
        }
    });

    acceptBTN.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

        }
    });

    dialog.show();
}

调用方式:

showDialog("标题", "消息", R.drawable.warning);


(注:保留原有的html标签)

2
创建警告对话框布局,类似于以下内容:
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:text="Custom Alert Dialog"
        android:layout_height="40dp">
    </Button>
</LinearLayout>

在您的Activity类中添加以下代码:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    LayoutInflater inflate = LayoutInflater.from(this);
    alertView = inflate.inflate(R.layout.your_alert_layout, null);
    Button btn= (Button) alertView.findViewById(R.id.btn);

    showDialog();
  }

 public void showDialog(){
        Dialog alertDialog = new Dialog(RecognizeConceptsActivity.this);
        alertDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        alertDialog.setContentView(alertView);
        alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        alertDialog.show();
    }

2

对话框片段是创建自定义警报对话框的最简单方法。按照上述代码创建对话框的自定义视图,然后使用对话框片段实现它。将以下代码添加到您的布局文件中:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="80dp"
    android:background="#3E80B4"
    android:orientation="vertical">

    <TextView
        android:id="@+id/txt_dia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="Do you realy want to exit ?"
        android:textColor="@android:color/white"
        android:textSize="15dp"
        android:textStyle="bold" />


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#3E80B4"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_yes"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:background="@android:color/white"
            android:clickable="true"
            android:text="Yes"
            android:textColor="#5DBCD2"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btn_no"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_marginLeft="5dp"
            android:background="@android:color/white"
            android:clickable="true"
            android:text="No"
            android:textColor="#5DBCD2"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>

1
导入自定义警告框:
LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.dse_location_list_filter, null);
final Dialog dialog = new Dialog(Acitvity_name.this);
dialog.setContentView(view);
dialog.setCancelable(true);
dialog.setCanceledOnTouchOutside(true);
dialog.show();

1

以下是使用 Kotlin 创建自定义视图对话框的代码。以下是对话框布局文件。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="300dp"
    android:layout_height="400dp">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

创建对话框并更新文本视图中的文本。
val dialog = Dialog(activity!!)
dialog.setContentView(R.layout.my_dialog_layout)
dialog.tvTitle.text = "Hello World!!"
dialog.show()

1
使用此代码正确显示自定义对话框的简单方法

dialog_choose_photo.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:orientation="vertical">

<LinearLayout
    android:id="@+id/l_buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/_5sdp"
    android:layout_marginRight="@dimen/_5sdp"
    android:layout_marginBottom="@dimen/_5sdp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_dialog_smallround_white"
        android:orientation="vertical">

        <TextView
            android:id="@+id/txt_camera"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:paddingTop="@dimen/_10sdp"
            android:paddingBottom="@dimen/_10sdp"
            android:text="Take a Photo"
            android:textColor="#3080C7"
            android:textSize="18sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#F1F0F0" />

        <TextView
            android:id="@+id/txt_gallery"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:paddingTop="@dimen/_10sdp"
            android:paddingBottom="@dimen/_10sdp"
            android:text="Choose from Gallery"
            android:textColor="#3080C7"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_5sdp"
        android:background="@drawable/bg_dialog_smallround_white"
        android:orientation="vertical">

        <TextView
            android:id="@+id/txt_cancel_dialog"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:paddingTop="@dimen/_10sdp"
            android:paddingBottom="@dimen/_10sdp"
            android:text="Cancel"
            android:textColor="@color/colorPrimary"
            android:textSize="18sp" />
    </LinearLayout>


</LinearLayout>


</RelativeLayout>

只需调用此函数

 public void openPhotoDialog() {
    final Dialog dialog = new Dialog(this);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.setContentView(R.layout.dialog_choose_photo);
    dialog.setCancelable(true);

    // Setting dialogview

    final Window window = dialog.getWindow();
    window.setLayout(AbsListView.LayoutParams.MATCH_PARENT, AbsListView.LayoutParams.WRAP_CONTENT);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    WindowManager.LayoutParams wlp = window.getAttributes();

    wlp.gravity = Gravity.BOTTOM;
    window.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
    window.setDimAmount(0.5f);
    window.setAttributes(wlp);


    TextView txt_camera = dialog.findViewById(R.id.txt_camera);
    TextView txt_gallery = dialog.findViewById(R.id.txt_gallery);
    TextView txt_cancel_dialog = dialog.findViewById(R.id.txt_cancel_dialog);

    txt_camera.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
            dialog.dismiss();
        }
    });
    txt_gallery.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
            dialog.dismiss();
        }
    });
    txt_cancel_dialog.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
            dialog.dismiss();
        }
    });

    dialog.show();

}

bg_dialog_smallround_white.xml 是一个 drawable 资源文件。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white" />

<corners
    android:radius="@dimen/_5sdp" />
</shape>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接