整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
.基本使用流程
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 xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@mipmap/iv_icon_exit_pressed"/>
<item android:drawable="@mipmap/iv_icon_exit_normal"/>
</selector>
btn_selctor_choose.xml：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@mipmap/bg_btn_pressed"/>
<item android:drawable="@mipmap/bg_btn_normal"/>
</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,
};
},
};
方法名說明參數返回值Dialog展示彈窗optionsPromiseDialog.alert展示消息提示彈窗optionsPromiseDialog.confirm展示消息確認彈窗optionsPromiseDialog.setDefaultOptions修改默認配置，對所有 Dialog 生效optionsvoidDialog.resetDefaultOptions重置默認配置，對所有 Dialog 生效-voidDialog.close關閉彈窗-void
通過函數調用 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
通過組件調用 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-
通過組件調用 Dialog 時，支持以下事件：
事件說明回調參數confirm點擊確認按鈕時觸發-cancel點擊取消按鈕時觸發-open打開彈窗時觸發-close關閉彈窗時觸發-opened打開彈窗且動畫結束后觸發-closed關閉彈窗且動畫結束后觸發-
通過組件調用 Dialog 時，支持以下插槽：
名稱說明default自定義內容title自定義標題
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
