如何在Android中使用Sweet Alert对话框

本文概述

• 1.安装Sweet Alert对话框库
• 2.使用库
• 完整的例子

对于Web开发人员而言, Sweet Alert库是如何将平面样式与几乎所有类型的用户界面混合的示例。尽管该库最初是为Web应用程序设计的, 但那里的某个人(@pedant)还是决定将该库的本机端口实现为Android。但是, 不再正式维护该库(可以, 但是对于较低的targetSdkVersions而言, 它可以正常工作), 因此对于那些在较新版本的Android中使用该库的人, 如果你使用官方存储库的版本, 则将无法使用它。相反, 要提供对最新版本Android的支持, 可以使用@ F0RIS维护的分叉版本。

在本文中, 我们将向你展示如何安装和使用Sweet Alert库的Android端口在移动应用程序中创建和使用漂亮的平面对话框。

1.安装Sweet Alert对话框库

Android的Sweer Alert是一个漂亮而聪明的警报对话框库, 基于为JavaScript制作的Sweet Alert库。遗憾的是, 不再维护官方库, 并且在具有更高targetSdkVersion的最新Android Studio版本中安装该库将失败。因此, 我们将使用F0RIS维护的fork(这是显然已死的项目中最先进和最先进的fork), 而不是安装原始软件包。你可以通过gradle在build.gradle文件中添加实现来安装此插件：

dependencies {
    implementation 'com.github.f0ris.sweetalert:library:1.5.6'
}

添加依赖项后, 同步项目。使用此库, 你至少需要将minSdkVersion设置为13, 将targetSdkVersion设置为27。有关此库的更多信息, 请访问Github上的官方存储库。

2.使用库

使用Sweet Alert, 你将能够显示6种类型的对话框, 即每种情况：

1. 成功
2. 警告
3. 错误
4. 信息
5. 载入中
6. 确认书

你只需要在需要的类上导入名称空间, 并创建SweetAlertDialog的新实例, 定义自定义属性, 并附加一些onClick侦听器即可根据用户选择的选项进行操作：

// Import library
import cn.pedant.SweetAlert.SweetAlertDialog;
import android.graphics.Color;

// 1. Success message
new SweetAlertDialog(MainActivity.this)
    .setTitleText("Here's a message!")
    .show();

// 2. Confirmation message
new SweetAlertDialog(MainActivity.this, SweetAlertDialog.WARNING_TYPE)
    .setTitleText("Are you sure?")
    .setContentText("You won't be able to recover this file!")
    .setConfirmText("Delete!")
    .setConfirmClickListener(new SweetAlertDialog.OnSweetClickListener() {
        @Override
        public void onClick(SweetAlertDialog sDialog) {
            sDialog.dismissWithAnimation();
        }
    })
    .setCancelButton("Cancel", new SweetAlertDialog.OnSweetClickListener() {
        @Override
        public void onClick(SweetAlertDialog sDialog) {
            sDialog.dismissWithAnimation();
        }
    })
    .show();

// 3. Error message
new SweetAlertDialog(MainActivity.this, SweetAlertDialog.ERROR_TYPE)
        .setTitleText("Oops...")
        .setContentText("Something went wrong!")
        .show();

// 4. Loading message
SweetAlertDialog pDialog = new SweetAlertDialog(MainActivity.this, SweetAlertDialog.PROGRESS_TYPE);
        pDialog.getProgressHelper().setBarColor(Color.parseColor("#A5DC86"));
        pDialog.setTitleText("Loading ...");
        pDialog.setCancelable(true);
        pDialog.show();

// 5. Confirm success
new SweetAlertDialog(MainActivity.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) {
            sDialog
                .setTitleText("Deleted!")
                .setContentText("Your imaginary file has been deleted!")
                .setConfirmText("OK")
                .setConfirmClickListener(null)
                .changeAlertType(SweetAlertDialog.SUCCESS_TYPE);
        }
    })
    .show();

完整的例子

在activity_main.xml文件中, 我们将具有以下布局, 该布局基本上包含5个按钮, 每个按钮都有一个标识符, 稍后将在代码中使用该标识符来附加onClick事件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/successButton"
        android:layout_width="wrap_content"
        android:layout_height="49dp"
        android:text="Success"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.049"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.023" />

    <Button
        android:id="@+id/confirmationButton"
        android:layout_width="wrap_content"
        android:layout_height="49dp"
        android:text="Confirm"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.95"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.023" />

    <Button
        android:id="@+id/errorButton"
        android:layout_width="wrap_content"
        android:layout_height="49dp"
        android:text="Error"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.023" />

    <Button
        android:id="@+id/loadingButton"
        android:layout_width="159dp"
        android:layout_height="49dp"
        android:text="Loading ..."
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.054"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.143" />

    <Button
        android:id="@+id/confirmSuccessButton"
        android:layout_width="wrap_content"
        android:layout_height="49dp"
        android:text="Confirm Success"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.938"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.143" />
</android.support.constraint.ConstraintLayout>

测试Sweet Alert对话框的代码是：

package com.yourcompany.yourapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

// Import library
import cn.pedant.SweetAlert.SweetAlertDialog;
import android.graphics.Color;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 1. Success message
        Button buttonSuccess = findViewById(R.id.successButton);
        buttonSuccess.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                new SweetAlertDialog(MainActivity.this)
                    .setTitleText("Here's a message!")
                    .show();
            }
        });

        // 2. Confirmation message
        Button buttonWarning = findViewById(R.id.confirmationButton);
        buttonWarning.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                new SweetAlertDialog(MainActivity.this, SweetAlertDialog.WARNING_TYPE)
                    .setTitleText("Are you sure?")
                    .setContentText("You won't be able to recover this file!")
                    .setConfirmText("Delete!")
                    .setConfirmClickListener(new SweetAlertDialog.OnSweetClickListener() {
                        @Override
                        public void onClick(SweetAlertDialog sDialog) {
                            sDialog.dismissWithAnimation();
                        }
                    })
                    .setCancelButton("Cancel", new SweetAlertDialog.OnSweetClickListener() {
                        @Override
                        public void onClick(SweetAlertDialog sDialog) {
                            sDialog.dismissWithAnimation();
                        }
                    })
                    .show();
            }
        });

        // 3. Error message
        Button buttonDanger = findViewById(R.id.errorButton);
        buttonDanger.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                new SweetAlertDialog(MainActivity.this, SweetAlertDialog.ERROR_TYPE)
                    .setTitleText("Oops...")
                    .setContentText("Something went wrong!")
                    .show();
            }
        });

        // 4. Loading message
        Button buttonLoading = findViewById(R.id.loadingButton);
        buttonLoading.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                SweetAlertDialog pDialog = new SweetAlertDialog(MainActivity.this, SweetAlertDialog.PROGRESS_TYPE);
                pDialog.getProgressHelper().setBarColor(Color.parseColor("#A5DC86"));
                pDialog.setTitleText("Loading ...");
                pDialog.setCancelable(true);
                pDialog.show();
            }
        });

        // 5. Confirm success
        Button buttonConfirmSuccess = findViewById(R.id.confirmSuccessButton);
        buttonConfirmSuccess.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                new SweetAlertDialog(MainActivity.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) {
                            sDialog
                                .setTitleText("Deleted!")
                                .setContentText("Your imaginary file has been deleted!")
                                .setConfirmText("OK")
                                .setConfirmClickListener(null)
                                .changeAlertType(SweetAlertDialog.SUCCESS_TYPE);
                        }
                    })
                    .show();
            }
        });
    }
}

编码愉快！