1. 程式人生 > >精美舒適的對話訊息提示框--第三方開源--SweetAlertDialog

精美舒適的對話訊息提示框--第三方開源--SweetAlertDialog

SweetAlertDialog(sweet-alert-dialog)是一個套製作精美、動畫效果出色生動的Android對話、訊息提示框

SweetAlertDialog(sweet-alert-dialog)在github上的專案主頁是:https://github.com/pedant/sweet-alert-dialog
需要注意的是,SweetAlertDialog(sweet-alert-dialog)作為庫,其自身又依賴另外一個github上的開源庫materialish-progress(其在github上的專案主頁是:https://github.com/pnikosis/materialish-progress

 )。如果使用SweetAlertDialog(sweet-alert-dialog),則需要再把materialish-progress也匯入到Eclipse中作為庫被SweetAlertDialog(sweet-alert-dialog)引用。

下面是demo程式碼:

MainActivity.java:

package cn.pedant.SweetAlert.sample;

import android.app.Activity;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.view.View;

import cn.pedant.SweetAlert.SweetAlertDialog;

public class SampleActivity extends Activity implements View.OnClickListener {

    private int i = -1;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sample_activity);
        findViewById(R.id.basic_test).setOnClickListener(this);
        findViewById(R.id.under_text_test).setOnClickListener(this);
        findViewById(R.id.error_text_test).setOnClickListener(this);
        findViewById(R.id.success_text_test).setOnClickListener(this);
        findViewById(R.id.warning_confirm_test).setOnClickListener(this);
        findViewById(R.id.warning_cancel_test).setOnClickListener(this);
        findViewById(R.id.custom_img_test).setOnClickListener(this);
        findViewById(R.id.progress_dialog).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.basic_test:
                // default title "Here's a message!"
                SweetAlertDialog sd = new SweetAlertDialog(this);
                sd.setCancelable(true);
                sd.setCanceledOnTouchOutside(true);
                sd.show();
                break;
            case R.id.under_text_test:
                new SweetAlertDialog(this)
                        .setContentText("It's pretty, isn't it?")
                        .show();
                break;
            case R.id.error_text_test:
                new SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE)
                        .setTitleText("Oops...")
                        .setContentText("Something went wrong!")
                        .show();
                break;
            case R.id.success_text_test:
                new SweetAlertDialog(this, SweetAlertDialog.SUCCESS_TYPE)
                        .setTitleText("Good job!")
                        .setContentText("You clicked the button!")
                        .show();
                break;
            case R.id.warning_confirm_test:
                new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE)
                        .setTitleText("Are you sure?")
                        .setContentText("Won't be able to recover this file!")
                        .setConfirmText("Yes,delete it!")
                        .setConfirmClickListener(new SweetAlertDialog.OnSweetClickListener() {
                        @Override
                        public void onClick(SweetAlertDialog sDialog) {
                            // reuse previous dialog instance
                            sDialog.setTitleText("Deleted!")
                                    .setContentText("Your imaginary file has been deleted!")
                                    .setConfirmText("OK")
                                    .setConfirmClickListener(null)
                                    .changeAlertType(SweetAlertDialog.SUCCESS_TYPE);
                        }
                        })
                        .show();
                break;
            case R.id.warning_cancel_test:
                new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE)
                        .setTitleText("Are you sure?")
                        .setContentText("Won't be able to recover this file!")
                        .setCancelText("No,cancel plx!")
                        .setConfirmText("Yes,delete it!")
                        .showCancelButton(true)
                        .setCancelClickListener(new SweetAlertDialog.OnSweetClickListener() {
                            @Override
                            public void onClick(SweetAlertDialog sDialog) {
                                // reuse previous dialog instance, keep widget user state, reset them if you need
                                sDialog.setTitleText("Cancelled!")
                                        .setContentText("Your imaginary file is safe :)")
                                        .setConfirmText("OK")
                                        .showCancelButton(false)
                                        .setCancelClickListener(null)
                                        .setConfirmClickListener(null)
                                        .changeAlertType(SweetAlertDialog.ERROR_TYPE);

                                // or you can new a SweetAlertDialog to show
                               /* sDialog.dismiss();
                                new SweetAlertDialog(SampleActivity.this, SweetAlertDialog.ERROR_TYPE)
                                        .setTitleText("Cancelled!")
                                        .setContentText("Your imaginary file is safe :)")
                                        .setConfirmText("OK")
                                        .show();*/
                            }
                        })
                        .setConfirmClickListener(new SweetAlertDialog.OnSweetClickListener() {
                            @Override
                            public void onClick(SweetAlertDialog sDialog) {
                                sDialog.setTitleText("Deleted!")
                                        .setContentText("Your imaginary file has been deleted!")
                                        .setConfirmText("OK")
                                        .showCancelButton(false)
                                        .setCancelClickListener(null)
                                        .setConfirmClickListener(null)
                                        .changeAlertType(SweetAlertDialog.SUCCESS_TYPE);
                            }
                        })
                        .show();
                break;
            case R.id.custom_img_test:
                new SweetAlertDialog(this, SweetAlertDialog.CUSTOM_IMAGE_TYPE)
                        .setTitleText("Sweet!")
                        .setContentText("Here's a custom image.")
                        .setCustomImage(R.drawable.custom_img)
                        .show();
                break;
            case R.id.progress_dialog:
                final SweetAlertDialog pDialog = new SweetAlertDialog(this, SweetAlertDialog.PROGRESS_TYPE)
                        .setTitleText("Loading");
                pDialog.show();
                pDialog.setCancelable(false);
                new CountDownTimer(800 * 7, 800) {
                    public void onTick(long millisUntilFinished) {
                        // you can change the progress bar color by ProgressHelper every 800 millis
                        i++;
                        switch (i){
                            case 0:
                                pDialog.getProgressHelper().setBarColor(getResources().getColor(R.color.blue_btn_bg_color));
                                break;
                            case 1:
                                pDialog.getProgressHelper().setBarColor(getResources().getColor(R.color.material_deep_teal_50));
                                break;
                            case 2:
                                pDialog.getProgressHelper().setBarColor(getResources().getColor(R.color.success_stroke_color));
                                break;
                            case 3:
                                pDialog.getProgressHelper().setBarColor(getResources().getColor(R.color.material_deep_teal_20));
                                break;
                            case 4:
                                pDialog.getProgressHelper().setBarColor(getResources().getColor(R.color.material_blue_grey_80));
                                break;
                            case 5:
                                pDialog.getProgressHelper().setBarColor(getResources().getColor(R.color.warning_stroke_color));
                                break;
                            case 6:
                                pDialog.getProgressHelper().setBarColor(getResources().getColor(R.color.success_stroke_color));
                                break;
                        }
                    }

                    public void onFinish() {
                        i = -1;
                        pDialog.setTitleText("Success!")
                                .setConfirmText("OK")
                                .changeAlertType(SweetAlertDialog.SUCCESS_TYPE);
                    }
                }.start();
                break;
        }
    }
}

sample_activity.xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFF" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="10dp" >

        <ImageView
            android:id="@+id/logo_img"
            android:layout_width="180dp"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="15dp"
            android:layout_marginTop="10dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/logo_big" />

        <TextView
            android:id="@+id/txt_0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/logo_img"
            android:layout_below="@id/logo_img"
            android:layout_marginLeft="15dp"
            android:text="show material progress"
            android:textColor="#797979"
            android:textSize="14sp" />

        <Button
            android:id="@+id/progress_dialog"
            style="@style/dialog_blue_button"
            android:layout_below="@id/txt_0"
            android:layout_centerHorizontal="true"
            android:layout_margin="10dp"
            android:text="Try me!" />

        <TextView
            android:id="@+id/txt_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/logo_img"
            android:layout_below="@id/progress_dialog"
            android:layout_marginLeft="15dp"
            android:text="A basic message"
            android:textColor="#797979"
            android:textSize="14sp" />

        <Button
            android:id="@+id/basic_test"
            style="@style/dialog_blue_button"
            android:layout_below="@id/txt_1"
            android:layout_centerHorizontal="true"
            android:layout_margin="10dp"
            android:text="Try me!" />

        <TextView
            android:id="@+id/txt_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/logo_img"
            android:layout_below="@id/basic_test"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="A title with a text under"
            android:textColor="#797979"
            android:textSize="14sp" />

        <Button
            android:id="@+id/under_text_test"
            style="@style/dialog_blue_button"
            android:layout_below="@id/txt_2"
            android:layout_centerHorizontal="true"
            android:layout_margin="10dp"
            android:text="Try me!" />

        <TextView
            android:id="@+id/txt_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/logo_img"
            android:layout_below="@id/under_text_test"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="show error message"
            android:textColor="#797979"
            android:textSize="14sp" />

        <Button
            android:id="@+id/error_text_test"
            style="@style/dialog_blue_button"
            android:layout_below="@id/txt_3"
            android:layout_centerHorizontal="true"
            android:layout_margin="10dp"
            android:text="Try me!" />

        <TextView
            android:id="@+id/txt_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/logo_img"
            android:layout_below="@id/error_text_test"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="A success message"
            android:textColor="#797979"
            android:textSize="14sp" />

        <Button
            android:id="@+id/success_text_test"
            style="@style/dialog_blue_button"
            android:layout_below="@id/txt_4"
            android:layout_centerHorizontal="true"
            android:layout_margin="10dp"
            android:text="Try me!" />

        <TextView
            android:id="@+id/txt_5"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/logo_img"
            android:layout_below="@id/success_text_test"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="A warning message, with a listener bind to the Confirm-button..."
            android:textColor="#797979"
            android:textSize="14sp" />

        <Button
            android:id="@+id/warning_confirm_test"
            style="@style/dialog_blue_button"
            android:layout_below="@id/txt_5"
            android:layout_centerHorizontal="true"
            android:layout_margin="10dp"
            android:text="Try me!" />

        <TextView
            android:id="@+id/txt_6"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/logo_img"
            android:layout_below="@id/warning_confirm_test"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="A warning message, with listeners bind to Cancel and Confirm button..."
            android:textColor="#797979"
            android:textSize="14sp" />

        <Button
            android:id="@+id/warning_cancel_test"
            style="@style/dialog_blue_button"
            android:layout_below="@id/txt_6"
            android:layout_centerHorizontal="true"
            android:layout_margin="10dp"
            android:text="Try me!" />

        <TextView
            android:id="@+id/txt_7"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/logo_img"
            android:layout_below="@id/warning_cancel_test"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="A message with a custom icon"
            android:textColor="#797979"
            android:textSize="14sp" />

        <Button
            android:id="@+id/custom_img_test"
            style="@style/dialog_blue_button"
            android:layout_below="@id/txt_7"
            android:layout_centerHorizontal="true"
            android:layout_margin="10dp"
            android:text="Try me!" />
    </RelativeLayout>

</ScrollView>



相關推薦

精美舒適對話訊息提示--第三方開源--SweetAlertDialog

SweetAlertDialog(sweet-alert-dialog)是一個套製作精美、動畫效果出色生動的Android對話、訊息提示框 SweetAlertDialog(sweet-alert-dialog)在github上的專案主頁是:https://github

MUI-dialog(對話方塊),警告、確認、輸入對話方塊、訊息提示

本文主要講述dialog(對話方塊),包括:警告框、確認框、輸入對話方塊、訊息提示框四類。 元件名 作用 alert 警告框 confirm 確認框

【Android開發】訊息提示對話方塊-使用Toast顯示訊息提示

在前面的例項中,已經應用過Toast類來顯示一個簡單的提示框了。這次將對Toast進行詳細介紹。Toast類用於在螢幕中顯示一個訊息提示框,該訊息提示框沒有任何控制按鈕,並且不會獲得焦點,經過一段時間後自動消失。通常用於顯示一些快速提示資訊,應用範圍非常廣泛。 使用Toas

自定義訊息提示

使用原生JavaScript簡單封裝的一個訊息提示模態框,如果誰有更好的方式可以分享,謝謝! <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta

微信小程式showToast訊息提示

初心-楊瑞超個人部落格誠邀您加入qq群(IT-程式猿-技術交流群):757345416 顯示訊息提示框 示例程式碼: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 附:

微信小程式-訊息提示

微信小程式開發中toast也是重要的訊息提示方式. 提示框: wx.showToast(OBJECT) 顯示訊息提示框 OBJECT引數說明: 示例程式碼: ? 1 2 3 4 5 wx.showTo

c#訊息提示messagebox的簡單使用

訊息對話方塊是用messagebox物件的show方法顯示的。MessageBox物件是名稱空間System.Windows.Forms的一部分,Show是一個靜態方法,意思是說,不需要基於MessageBox類的物件建立例項,就可以使用該方法。而且該方法是可以過載的,即方

怎樣在jsp頁面顯示訊息提示

怎樣在頁面顯示一個訊息提示框!相信你會用到的 ,複製貼上html直接使用!<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ page language="j

微信小程式-訊息提示例項

做Android的時候對toast是很熟悉的.微信小程式開發中toast也是重要的訊息提示方式. 提示框: wx.showToast(OBJECT) 顯示訊息提示框 OBJECT引數說明: 示例程式碼: wx.showToast({ title: '成功', icon

tipso外掛---訊息提示

很多時候,我們會遇到這樣的情況: 字串太長了,顯示超出了應該在的範圍,或者根本顯示不全。 這個時候,我們往往都很鬱悶,既要顯示資訊,又要保證樣式好看,怎麼辦呢,一般都是: 給這個div加個mouseOver事件,在事件中設定詳情提示框。 但是,如果有很多很多這樣的情況呢?

可自動關閉的JS訊息提示

Js程式碼   //自動關閉提示框   function Alert(str) {       var msgw,msgh,bordercolor;       msgw=350;//提示視窗的寬度       msgh=80;//提示視窗的高度       ti

Toastr訊息提示的使用

toastr是一個基於jQuery簡單、漂亮的訊息提示外掛,使用簡單、方便,可以根據設定的超時時間自動消失。 1、使用很簡單,首選引入toastr的js、css檔案 <script ty

微信小程式開發之吐司toast(訊息提示)

做Android的時候對toast是很熟悉的.微信小程式開發中吐司也是重要的訊息提示方式. 上程式碼: 1.index.wxml toast是微信提供的元件,duration是延遲時間,單位毫秒.這裡

JAVA中的訊息提示

JAVA 中提供如下訊息提示框:       注意:如果報newFrame.getContentPane(),錯誤,則修改為null 即可      JOptionPane.showMessageDialog(newFrame.getContentPane(),      

使用Toast顯示訊息提示

1、佈局檔案 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="

微信小程式 自定義訊息提示

需求描述: wx.showToast(OBJECT)介面呼叫,但是不需要icon和image,即便image為空也有佔位,實際上只想輸出自定義文字內容。 效果截圖: 程式碼如下: <!

彈出訊息提示,彈出確認取消,彈出物品獲得提示

一、 彈出提示框 Globals.MUIManager.CreatMessageLabel("支付失敗"); public T GetUI<T>() where T : HotFix_Project.UI.UI_Logic

Java訊息提示JOptionPane的使用方法

最近主要學習Swing的知識,經常用到訊息提示框,經常忘記他們的用法,現在寫個部落格供自己和大家參考,主要分為以下三種形式: 首先順帶介紹下改變swing控制元件的風格為當前系統(windwos 1

提示第三方庫之MBProgressHUD iOS toast效果 動態提示效果

文章來自:http://blog.csdn.net/ryantang03/article/details/7877120 MBProgressHUD是一個開源專案,實現了很多種樣式的提示框,使用上簡單、方便,並且可以對顯示的內容進行自定義,功能很強大,很多專案中都有使用到

JavaSwing圖形介面程式設計之訊息提示(二)

package three.day.frame; import java.awt.BorderLayout; import java.awt.Container; import java.awt.GridLayout; import java.awt.event