锐客网

  1. 首页 > 睿知 > it技术 > >

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

androidIT知识移动开发对话框

本文概述

  • 1.安装Sweet Alert对话框库
  • 2.使用库
  • 完整的例子
对于Web开发人员而言, Sweet Alert库是如何将平面样式与几乎所有类型的用户界面混合的示例。尽管该库最初是为Web应用程序设计的, 但那里的某个人(@pedant)还是决定将该库的本机端口实现为Android。但是, 不再正式维护该库(可以, 但是对于较低的targetSdkVersions而言, 它可以正常工作), 因此对于那些在较新版本的Android中使用该库的人, 如果你使用官方存储库的版本, 则将无法使用它。相反, 要提供对最新版本Android的支持, 可以使用@ F0RIS维护的分叉版本。
在本文中, 我们将向你展示如何安装和使用Sweet Alert库的Android端口在移动应用程序中创建和使用漂亮的平面对话框。
1.安装Sweet Alert对话框库【如何在Android中使用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 libraryimport cn.pedant.SweetAlert.SweetAlertDialog; import android.graphics.Color; // 1. Success messagenew SweetAlertDialog(MainActivity.this).setTitleText("Here's a message!").show(); // 2. Confirmation messagenew 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() {@Overridepublic void onClick(SweetAlertDialog sDialog) {sDialog.dismissWithAnimation(); }}).setCancelButton("Cancel", new SweetAlertDialog.OnSweetClickListener() {@Overridepublic void onClick(SweetAlertDialog sDialog) {sDialog.dismissWithAnimation(); }}).show(); // 3. Error messagenew SweetAlertDialog(MainActivity.this, SweetAlertDialog.ERROR_TYPE).setTitleText("Oops...").setContentText("Something went wrong!").show(); // 4. Loading messageSweetAlertDialog pDialog = new SweetAlertDialog(MainActivity.this, SweetAlertDialog.PROGRESS_TYPE); pDialog.getProgressHelper().setBarColor(Color.parseColor("#A5DC86")); pDialog.setTitleText("Loading ..."); pDialog.setCancelable(true); pDialog.show(); // 5. Confirm successnew 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() {@Overridepublic 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"> < Buttonandroid: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" /> < Buttonandroid: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" /> < Buttonandroid: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" /> < Buttonandroid: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" /> < Buttonandroid: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 libraryimport cn.pedant.SweetAlert.SweetAlertDialog; import android.graphics.Color; public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 1. Success messageButton 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 messageButton 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() {@Overridepublic void onClick(SweetAlertDialog sDialog) {sDialog.dismissWithAnimation(); }}).setCancelButton("Cancel", new SweetAlertDialog.OnSweetClickListener() {@Overridepublic void onClick(SweetAlertDialog sDialog) {sDialog.dismissWithAnimation(); }}).show(); }}); // 3. Error messageButton 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 messageButton 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 successButton 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() {@Overridepublic void onClick(SweetAlertDialog sDialog) {sDialog.setTitleText("Deleted!").setContentText("Your imaginary file has been deleted!").setConfirmText("OK").setConfirmClickListener(null).changeAlertType(SweetAlertDialog.SUCCESS_TYPE); }}).show(); }}); }}

编码愉快！

    推荐阅读


    上一篇：一文看懂博睿数据AIOps场景、算法和能力

    下一篇：如何在Android中跟踪关键的应用参与度指标