AlertDialog（对话框）详解

.基本使用流程

Step 1：创建AlertDialog.Builder对象；

Step 2：调用setIcon()设置图标，setTitle()或setCustomTitle()设置标题；

Step 3：设置对话框的内容：setMessage()还有其他方法来指定显示的内容；

Step 4：调用setPositive/Negative/NeutralButton()设置：确定，取消，中立按钮；

Step 5：调用create()方法创建这个对象，再调用show()方法将对话框显示出来；

2.几种常用的对话框使用示例

运行效果图：

核心代码：

MainActivity.java：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private Button btn_dialog_one;

private Button btn_dialog_two;

private Button btn_dialog_three;

private Button btn_dialog_four;

private Context mContext;

private boolean[] checkItems;

private AlertDialog alert=null;

private AlertDialog.Builder builder=null;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mContext=MainActivity.this;

bindView();

}

private void bindView() {

btn_dialog_one=(Button) findViewById(R.id.btn_dialog_one);

btn_dialog_two=(Button) findViewById(R.id.btn_dialog_two);

btn_dialog_three=(Button) findViewById(R.id.btn_dialog_three);

btn_dialog_four=(Button) findViewById(R.id.btn_dialog_four);

btn_dialog_one.setOnClickListener(this);

btn_dialog_two.setOnClickListener(this);

btn_dialog_three.setOnClickListener(this);

btn_dialog_four.setOnClickListener(this);

}

@Override

public void onClick(View v) {

switch (v.getId()) {

//普通对话框

case R.id.btn_dialog_one:

alert=null;

builder=new AlertDialog.Builder(mContext);

alert=builder.setIcon(R.mipmap.ic_icon_fish)

.setTitle("系统提示：")

.setMessage("这是一个最普通的AlertDialog,\n带有三个按钮，分别是取消，中立和确定")

.setNegativeButton("取消", new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

Toast.makeText(mContext, "你点击了取消按钮~", Toast.LENGTH_SHORT).show();

}

})

.setPositiveButton("确定", new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

Toast.makeText(mContext, "你点击了确定按钮~", Toast.LENGTH_SHORT).show();

}

})

.setNeutralButton("中立", new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

Toast.makeText(mContext, "你点击了中立按钮~", Toast.LENGTH_SHORT).show();

}

}).create(); //创建AlertDialog对象

alert.show(); //显示对话框

break;

//普通列表对话框

case R.id.btn_dialog_two:

final String[] lesson=new String[]{"语文", "数学", "英语", "化学", "生物", "物理", "体育"};

alert=null;

builder=new AlertDialog.Builder(mContext);

alert=builder.setIcon(R.mipmap.ic_icon_fish)

.setTitle("选择你喜欢的课程")

.setItems(lesson, new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

Toast.makeText(getApplicationContext(), "你选择了" + lesson[which], Toast.LENGTH_SHORT).show();

}

}).create();

alert.show();

break;

//单选列表对话框

case R.id.btn_dialog_three:

final String[] fruits=new String[]{"苹果", "雪梨", "香蕉", "葡萄", "西瓜"};

alert=null;

builder=new AlertDialog.Builder(mContext);

alert=builder.setIcon(R.mipmap.ic_icon_fish)

.setTitle("选择你喜欢的水果，只能选一个哦~")

.setSingleChoiceItems(fruits, 0, new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

Toast.makeText(getApplicationContext(), "你选择了" + fruits[which], Toast.LENGTH_SHORT).show();

}

}).create();

alert.show();

break;

//多选列表对话框

case R.id.btn_dialog_four:

final String[] menu=new String[]{"水煮豆腐", "萝卜牛腩", "酱油鸡", "胡椒猪肚鸡"};

//定义一个用来记录个列表项状态的boolean数组

checkItems=new boolean[]{false, false, false, false};

alert=null;

builder=new AlertDialog.Builder(mContext);

alert=builder.setIcon(R.mipmap.ic_icon_fish)

.setMultiChoiceItems(menu, checkItems, new DialogInterface.OnMultiChoiceClickListener() {

@Override

public void onClick(DialogInterface dialog, int which, boolean isChecked) {

checkItems[which]=isChecked;

}

})

.setPositiveButton("确定", new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

String result="";

for (int i=0; i < checkItems.length; i++) {

if (checkItems[i])

result +=menu[i] + " ";

}

Toast.makeText(getApplicationContext(), "客官你点了:" + result, Toast.LENGTH_SHORT).show();

}

})

.create();

alert.show();

break;

}

布局就是四个简单的按钮，这里就不贴出来了，用法非常简单~无非就是创建一个Builder对象后，进行相关设置，然后create()生成一个AlertDialog对象，最后调用show()方法将AlertDialog 显示出来而已！另外，细心的你可能发现我们点击对话框的外部区域，对话框就会消失，我们可以为builder设置setCancelable(false)即可解决这个问题！

3.通过Builder的setView()定制显示的AlertDialog

我们可以自定义一个与系统对话框不同的布局，然后调用setView()将我们的布局加载到 AlertDialog上，上面我们来实现这个效果：

运行效果图：

关键代码：

首先是两种不同按钮的selctor的drawable文件：

btn_selctor_exit.xml：

<?xml version="1.0" encoding="utf-8"?>

</selector>

btn_selctor_choose.xml：

<?xml version="1.0" encoding="utf-8"?>

</selector>

接着是自定义的Dialog布局：view_dialog_custom.xml：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/RelativeLayout1"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<RelativeLayout

android:id="@+id/titlelayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:background="#53CC66"

android:padding="5dp">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:text="提示信息"

android:textColor="#ffffff"

android:textSize="18sp"

android:textStyle="bold" />

<Button

android:id="@+id/btn_cancle"

android:layout_width="30dp"

android:layout_height="30dp"

android:layout_alignParentRight="true"

android:background="@drawable/btn_selctor_exit" />

</RelativeLayout>

<LinearLayout

android:id="@+id/ly_detail"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_below="@+id/titlelayout"

android:layout_centerInParent="true"

android:orientation="vertical">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:layout_marginTop="20dp"

android:text="通过setView()方法定制AlertDialog"

android:textColor="#04AEDA"

android:textSize="18sp" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:layout_marginTop="10dp"

android:text="作者:Coder-pig"

android:textColor="#04AEDA"

android:textSize="18sp" />

</LinearLayout>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/ly_detail"

android:layout_marginTop="10dp"

android:orientation="horizontal">

<Button

android:id="@+id/btn_blog"

android:layout_width="match_parent"

android:layout_height="40dp"

android:layout_margin="5dp"

android:layout_weight="1"

android:background="@drawable/btn_selctor_choose"

android:text="访问博客"

android:textColor="#ffffff"

android:textSize="20sp" />

<Button

android:id="@+id/btn_close"

android:layout_width="match_parent"

android:layout_height="40dp"

android:layout_margin="5dp"

android:layout_weight="1"

android:background="@drawable/btn_selctor_choose"

android:text="关闭"

android:textColor="#ffffff"

android:textSize="20sp" />

</LinearLayout>

</RelativeLayout>

最后是MainActivity.java：

public class MainActivity extends AppCompatActivity {

private Button btn_show;

private View view_custom;

private Context mContext;

private AlertDialog alert=null;

private AlertDialog.Builder builder=null;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mContext=MainActivity.this;

btn_show=(Button) findViewById(R.id.btn_show);

//初始化Builder

builder=new AlertDialog.Builder(mContext);

//加载自定义的那个View,同时设置下

final LayoutInflater inflater=MainActivity.this.getLayoutInflater();

view_custom=inflater.inflate(R.layout.view_dialog_custom, null,false);

builder.setView(view_custom);

builder.setCancelable(false);

alert=builder.create();

view_custom.findViewById(R.id.btn_cancle).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

alert.dismiss();

}

});

view_custom.findViewById(R.id.btn_blog).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getApplicationContext(), "访问博客", Toast.LENGTH_SHORT).show();

Uri uri=Uri.parse("http://blog.csdn.net/coder_pig");

Intent intent=new Intent(Intent.ACTION_VIEW, uri);

startActivity(intent);

alert.dismiss();

}

});

view_custom.findViewById(R.id.btn_close).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getApplicationContext(), "对话框已关闭~", Toast.LENGTH_SHORT).show();

alert.dismiss();

}

});

btn_show.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

alert.show();

}

});

}

4.示例代码下载

AlertDialogDemo.zip

AlertDialogDemo1.zip

本节小结：

好的，本节给大家介绍了一下AlertDialog的基本使用，写了几个调用AlertDialog的例子，最后还通过setView方法自定义了一下我们的AlertDialog！是不是还意犹未尽呢？但这说不上真正的自定义控件，我们把自定义控件放到进阶系列，到时后会有个专题来和大家探讨下自定义控件

lert组件根据不同的类型会有几个部分的显示(CONFIRMATION类型）：

每个部分都可以自定义css。

1.获取Alert的DialogPane。

2.DialogPane添加css一起学javaFx:css篇

具体代码如下：

绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。

弹出框组件支持函数调用和组件调用两种方式。

函数调用

Dialog 是一个函数，调用后会直接在页面中弹出相应的模态框。

import { Dialog } from 'vant';

Dialog({ message: '提示' });

组件调用

通过组件调用 Dialog 时，可以通过下面的方式进行注册：

import Vue from 'vue';
import { Dialog } from 'vant';

// 全局注册
Vue.use(Dialog);

// 局部注册
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮。

Dialog.alert({
  title: '标题',
  message: '弹窗内容',
}).then(()=> {
  // on close
});

Dialog.alert({
  message: '弹窗内容',
}).then(()=> {
  // on close
});

消息确认

用于确认消息，包含取消和确认按钮。

Dialog.confirm({
  title: '标题',
  message: '弹窗内容',
})
  .then(()=> {
    // on confirm
  })
  .catch(()=> {
    // on cancel
  });

异步关闭

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

function beforeClose(action, done) {
  if (action==='confirm') {
    setTimeout(done, 1000);
  } else {
    done();
  }
}

Dialog.confirm({
  title: '标题',
  message: '弹窗内容',
  beforeClose,
});

全局方法

引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法。

export default {
  mounted() {
    this.$dialog.alert({
      message: '弹窗内容',
    });
  },
};

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

<van-dialog v-model="show" title="标题" show-cancel-button>
  <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog>

export default {
  data() {
    return {
      show: false,
    };
  },
};

API

方法

方法名说明参数返回值Dialog展示弹窗optionsPromiseDialog.alert展示消息提示弹窗optionsPromiseDialog.confirm展示消息确认弹窗optionsPromiseDialog.setDefaultOptions修改默认配置，对所有 Dialog 生效optionsvoidDialog.resetDefaultOptions重置默认配置，对所有 Dialog 生效-voidDialog.close关闭弹窗-void

Options

通过函数调用 Dialog 时，支持传入以下选项：

参数说明类型默认值title标题string-width v2.2.7弹窗宽度，默认单位为pxnumber | string320pxmessage文本内容，支持通过\n换行string-messageAlign内容对齐方式，可选值为left rightstringcenterclassName自定义类名any-showConfirmButton是否展示确认按钮booleantrueshowCancelButton是否展示取消按钮booleanfalseconfirmButtonText确认按钮文案string确认confirmButtonColor确认按钮颜色string#1989facancelButtonText取消按钮文案string取消cancelButtonColor取消按钮颜色stringblackoverlay是否展示遮罩层booleantrueoverlayClass v2.2.7自定义遮罩层类名string-overlayStyle v2.2.7自定义遮罩层样式object-closeOnPopstate v2.0.5是否在页面回退时自动关闭booleanfalsecloseOnClickOverlay是否在点击遮罩层后关闭弹窗booleanfalselockScroll是否锁定背景滚动booleantrueallowHtml v2.8.7是否允许 message 内容中渲染 HTMLbooleantruebeforeClose关闭前的回调函数，
调用 done() 后关闭弹窗，
调用 done(false) 阻止弹窗关闭(action, done)=> void-transition v2.2.6动画类名，等价于 transtion 的name属性string-getContainer指定挂载的节点，用法示例string | ()=> Elementbody

Props

通过组件调用 Dialog 时，支持以下 Props：

参数说明类型默认值v-model是否显示弹窗boolean-title标题string-width v2.2.7弹窗宽度，默认单位为pxnumber | string320pxmessage文本内容，支持通过\n换行string-message-align内容对齐方式，可选值为left rightstringcentershow-confirm-button是否展示确认按钮booleantrueshow-cancel-button是否展示取消按钮booleanfalseconfirm-button-text确认按钮文案string确认confirm-button-color确认按钮颜色string#1989facancel-button-text取消按钮文案string取消cancel-button-color取消按钮颜色stringblackoverlay是否展示遮罩层booleantrueoverlay-class v2.2.7自定义遮罩层类名string-overlay-style v2.2.7自定义遮罩层样式object-close-on-popstate v2.0.5是否在页面回退时自动关闭booleanfalseclose-on-click-overlay是否在点击遮罩层后关闭弹窗booleanfalselazy-render是否在显示弹层时才渲染节点booleantruelock-scroll是否锁定背景滚动booleantrueallow-html v2.8.7是否允许 message 内容中渲染 HTMLbooleantruebefore-close关闭前的回调函数，
调用 done() 后关闭弹窗，
调用 done(false) 阻止弹窗关闭(action, done)=> void-transition v2.2.6动画类名，等价于 transtion 的name属性string-get-container指定挂载的节点，用法示例string | ()=> Element-

Events

通过组件调用 Dialog 时，支持以下事件：

事件说明回调参数confirm点击确认按钮时触发-cancel点击取消按钮时触发-open打开弹窗时触发-close关闭弹窗时触发-opened打开弹窗且动画结束后触发-closed关闭弹窗且动画结束后触发-

Slots

通过组件调用 Dialog 时，支持以下插槽：

名称说明default自定义内容title自定义标题

在线咨询

上一篇：VueHighlightJS如何在网页中格式化代码
下一篇：电子劳动合同来了足不出户也能签约

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

AlertDialog（对话框）详解

绍

函数调用

组件调用

代码演示

消息提示

消息确认

异步关闭

全局方法

组件调用

API

方法

Options

Props

Events

Slots

您的项目需求