使用Kotlin的Android警报对话框

时间:2020-02-23 14:28:44  来源:igfitidea点击:

在本教程中,我们将讨论警报对话框,并使用Kotlin在我们的Android应用程序中实现它们。

警报对话框

"警报对话框"是一个在屏幕上弹出的窗口。
它们通常会显示一些信息并要求用户采取措施。

有三个构建警报对话框的核心组件。

  • 标题文字
  • 讯息文字
  • 按钮–共有三种类型的按钮:正,负和中性

为了创建一个AlertDialog,我们使用ʻAlertDialog.Builder`内部类。

val alertDialogBuilder = AlertDialog.Builder(this)

我们在构造函数内部传递上下文。
(可选)我们可以传递另一个参数,即警告对话框样式。

警报对话框方法

可以在AlertDialog上使用的一些方法。

  • setTitle

  • setMessage

  • setIcon

  • setCustomTitle –您可以在此处传递自定义视图,该视图将替代警报对话框中标题部分。

  • setPositiveButton –我们在此处传递字符串名称以及Button单击的回调方法。

  • setView –用于在警报对话框中添加自定义视图。

  • setList –用于设置将以列表形式显示的字符串数组。

  • setMultiChoiceList –同样,我们可以设置一个数组,但是这次我们可以通过CheckBox从列表中选择多个项目。

  • setPositiveButtonIcon –在按钮旁边设置图标

  • show()–用于显示AlertDialog

  • setDismissListener –其中,您可以设置关闭警报对话框时要触发的逻辑。

  • setShowListener –设置关闭警报对话框时要触发的逻辑。

  • setCancelable –需要一个布尔值。
    默认情况下,单击按钮或者在外部触摸时,所有警报对话框都是可取消的。
    如果此方法设置为false,则需要使用dialog.cancel()方法显式取消对话框。

警报对话框科特林代码

要在Android Studio项目中使用AlertDialog,请导入以下类。

import android.support.v7.app.AlertDialog;

以下Kotlin代码用于创建简单的警报对话框。

val builder = AlertDialog.Builder(this)
builder.setTitle("Androidly Alert")
builder.setMessage("We have a message")
//builder.setPositiveButton("OK", DialogInterface.OnClickListener(function = x))

builder.setPositiveButton(android.R.string.yes) { dialog, which ->
  Toast.makeText(applicationContext,
          android.R.string.yes, Toast.LENGTH_SHORT).show()
}
      
builder.setNegativeButton(android.R.string.no) { dialog, which ->
  Toast.makeText(applicationContext,
          android.R.string.no, Toast.LENGTH_SHORT).show()
}

builder.setNeutralButton("Maybe") { dialog, which ->
  Toast.makeText(applicationContext,
          "Maybe", Toast.LENGTH_SHORT).show()
}
builder.show()

builder.show()在屏幕上显示警报对话框。

在" setPositiveButton"函数内部,我们传递了Button文本以及单击该按钮时触发的Kotlin函数。
该函数是" DialogInterface.OnClickListener()"接口的一部分。

函数类型是(DialogInterface,Int)-> Unit
DialogInterface是Dialog的实例,而Int是单击的按钮的ID。

在上面的代码中,我们将该函数表示为高阶Kotlin函数。
"对话框"和"其中"代表两个参数。

如果不使用参数,我们可以通过传递_来改善功能。

这些函数如下所示:

builder.setPositiveButton(android.R.string.yes) { _,_ ->
          Toast.makeText(applicationContext,
                  android.R.string.yes, Toast.LENGTH_SHORT).show()
      }

或者,我们也可以通过AlertDialog类实例显示Dialog。

builder.show()替换为:

val alertDialog = builder.create()
alertDialog.show()

除了可以为每个按钮定义按钮单击侦听器功能之外,我们还可以分别定义高阶功能。

val positiveButtonClick = { dialog: DialogInterface, which: Int ->
  Toast.makeText(applicationContext,
          android.R.string.no, Toast.LENGTH_SHORT).show()
}

现在,将setPositiveButtonKotlin函数中的val`属性设置为:

builder.setPositiveButton("OK", DialogInterface.OnClickListener(function = positiveButtonClick))
//or
builder.setPositiveButton(android.R.string.yes, positiveButtonClick)

后者使代码看起来更加简洁。

以下是我们的Activity类的屏幕截图,其中上述功能适用于每个Button。

如果您不想在单击按钮时保持任何操作,则可以传递null而不是函数。

Kotlin仍然具有提高上述代码的可读性的能力。

简单警报对话框Kotlin代码

使用with函数,我们可以增强Kotlin代码的可读性,以创建一个Alert对话框。

fun basicAlert(view: View){

      val builder = AlertDialog.Builder(this)
      
      with(builder)
      {
          setTitle("Androidly Alert")
          setMessage("We have a message")
          setPositiveButton("OK", DialogInterface.OnClickListener(function = positiveButtonClick))
          setNegativeButton(android.R.string.no, negativeButtonClick)
          setNeutralButton("Maybe", neutralButtonClick)
          show()    
      }
      
      
  }

在下一节中,我们将创建Android应用程序,其中我们将在AlertDialog中实现以下功能。

  • 简单警报对话框
  • 具有图标和按钮自定义的警报对话框
  • 带列表的警报对话框
  • 多选择列表的警报对话框
  • 带有样式的警报对话框
  • 具有自定义样式的警报对话框
  • 带EditText的警报对话框

Android Studio项目结构

1. XML布局代码

下面给出了activity_main.xml布局的代码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center"
  android:orientation="vertical"
  tools:context=".MainActivity">

  <Button
      android:id="@+id/btnBasicAlert"
      android:layout_width="wrap_content"
      android:onClick="basicAlert"
      android:layout_height="wrap_content"
      android:text="BASIC ALERT DIALOG" 

  <Button
      android:id="@+id/btnAlertWithIconsAndCustomize"
      android:layout_width="wrap_content"
      android:onClick="withIconAndCustomise"
      android:layout_height="wrap_content"
      android:text="WITH ICON AND CUSTOMIZATION" 

  <Button
      android:id="@+id/btnAlertWithItems"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="withItems"
      android:text="WITH ITEMS" 

  <Button
      android:id="@+id/btnAlertWithMultiChoiceList"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="withMultiChoiceList"
      android:text="WITH MULTI CHOICE LIST" 

  <Button
      android:id="@+id/btnAlertWithStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="withStyle"
      android:text="WITH STYLE" 

  <Button
      android:id="@+id/btnAlertWithCustomStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="withCustomStyle"
      android:text="WITH CUSTOM STYLE" 

  <Button
      android:id="@+id/btnAlertWithButtonCentered"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="withButtonCentered"
      android:text="WITH BUTTON CENTERED" 

  <Button
      android:id="@+id/btnAlertWithEditText"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="withEditText"
      android:text="WITH EDIT TEXT" 

</LinearLayout>

对于每个按钮,我们都使用函数名称设置了一个" android:onClick"属性。
这些Kotlin函数将在MainActivity.kt类中触发。
我们将一次讨论每个。

2. Kotlin主要活动代码

我们已经在上面创建了第一个警报对话框。
让我们看看MainActivity.kt的外观。

package net.androidly.androidlyalertdialog

import android.content.DialogInterface
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.app.AlertDialog
import android.view.View
import android.widget.Toast

class MainActivity : AppCompatActivity() {

  val positiveButtonClick = { dialog: DialogInterface, which: Int ->
      Toast.makeText(applicationContext,
              android.R.string.yes, Toast.LENGTH_SHORT).show()
  }
  val negativeButtonClick = { dialog: DialogInterface, which: Int ->
      Toast.makeText(applicationContext,
              android.R.string.no, Toast.LENGTH_SHORT).show()
  }
  val neutralButtonClick = { dialog: DialogInterface, which: Int ->
      Toast.makeText(applicationContext,
              "Maybe", Toast.LENGTH_SHORT).show()
  }

  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
  }

  fun basicAlert(view: View){

      val builder = AlertDialog.Builder(this)

      with(builder)
      {
          setTitle("Androidly Alert")
          setMessage("We have a message")
          setPositiveButton("OK", DialogInterface.OnClickListener(function = positiveButtonClick))
          setNegativeButton(android.R.string.no, negativeButtonClick)
          setNeutralButton("Maybe", neutralButtonClick)
          show()
      }

  }
}

3.带有图标和自定义的警报对话框

val builder = AlertDialog.Builder(this)
      with(builder) {
          setTitle("Icon and Button Color")
          setMessage("We have a message")
          setPositiveButton("OK", null)
          setNegativeButton("CANCEL", null)
          setNeutralButton("NEUTRAL", null)
          setPositiveButtonIcon(resources.getDrawable(android.R.drawable.ic_menu_call, theme))
          setIcon(resources.getDrawable(android.R.drawable.ic_dialog_alert, theme))
      }
      val alertDialog = builder.create()
      alertDialog.show()

      val button = alertDialog.getButton(DialogInterface.BUTTON_POSITIVE)
      with(button) {
          setBackgroundColor(Color.BLACK)
          setPadding(0, 0, 20, 0)
          setTextColor(Color.WHITE)
      }

使用getButton,我们可以通过设置它们各自的常量来检索任何Button。
检索到按钮后,我们可以像上面一样自定义按钮。

4.带有项目的警报对话框

fun withItems(view: View) {

      val items = arrayOf("Red", "Orange", "Yellow", "Blue")
      val builder = AlertDialog.Builder(this)
      with(builder)
      {
          setTitle("List of Items")
          setItems(items) { dialog, which ->
              Toast.makeText(applicationContext, items[which] + " is clicked", Toast.LENGTH_SHORT).show()
          }

          setPositiveButton("OK", positiveButtonClick)
          show()
      }
  }

在setItems内部,我们传递了Kotlin Array。
参数which表示在列表中单击的元素的索引。

5.带有多重选择列表的警报对话框

fun withMultiChoiceList(view: View) {

      val items = arrayOf("Microsoft", "Apple", "Amazon", "Google")
      val selectedList = ArrayList<Int>()
      val builder = AlertDialog.Builder(this)

      builder.setTitle("This is list choice dialog box")
      builder.setMultiChoiceItems(items, null
      ) { dialog, which, isChecked ->
          if (isChecked) {
              selectedList.add(which)
          } else if (selectedList.contains(which)) {
              selectedList.remove(Integer.valueOf(which))
          }
      }

      builder.setPositiveButton("DONE") { dialogInterface, i ->
          val selectedStrings = ArrayList<string>()

          for (j in selectedList.indices) {
              selectedStrings.add(items[selectedList[j]])
          }

          Toast.makeText(applicationContext, "Items selected are: " + Arrays.toString(selectedStrings.toTypedArray()), Toast.LENGTH_SHORT).show()
      }

      builder.show()

  }

在上面的代码中,我们将选择保存在整数数组列表中,然后再次检索它们以在Toast消息中显示它们。

6.带有样式的警报对话框

fun withStyle(view: View) {

      val builder = AlertDialog.Builder(ContextThemeWrapper(this, android.R.style.Holo_SegmentedButton))

      with(builder)
      {
          setTitle("Androidly Alert")
          setMessage("We have a message")
          setPositiveButton("OK", DialogInterface.OnClickListener(function = positiveButtonClick))
          setNegativeButton(android.R.string.no, negativeButtonClick)
          setNeutralButton("Maybe", neutralButtonClick)
          show()
      }
  }

如果您不使用ContextThemeWrapper,则"警报"对话框将显示在全屏上。

7.具有自定义样式的警报对话框

在styles.xml文件中添加以下代码:

<style name="AlertDialogCustom" parent="@android:style/Theme.Material.Dialog">
      <item name="android:textColor">@android:color/white</item>
      <item name="android:textStyle">bold</item>
      <item name="android:headerDividersEnabled">true</item>
      <item name="android:background">@android:color/holo_blue_dark</item>
  </style>

以下是Kotlin函数:

fun withCustomStyle(view: View) {

      val builder = AlertDialog.Builder(ContextThemeWrapper(this, R.style.AlertDialogCustom))

      with(builder)
      {
          setTitle("Androidly Alert")
          setMessage("We have a message")
          setPositiveButton("OK", DialogInterface.OnClickListener(function = positiveButtonClick))
          setNegativeButton(android.R.string.no, negativeButtonClick)
          setNeutralButton("Maybe", neutralButtonClick)
          show()
      }

  }

8.带有按钮居中的警报对话框

fun withButtonCentered(view: View) {

      val alertDialog = AlertDialog.Builder(this).create()
      alertDialog.setTitle("Title")
      alertDialog.setMessage("Message")

      alertDialog.setButton(AlertDialog.BUTTON_POSITIVE, "Yes"
      ) { dialog, which -> dialog.dismiss() }

      alertDialog.setButton(AlertDialog.BUTTON_NEGATIVE, "No"
      ) { dialog, which -> dialog.dismiss() }
      alertDialog.show()

      val btnPositive = alertDialog.getButton(AlertDialog.BUTTON_POSITIVE)
      val btnNegative = alertDialog.getButton(AlertDialog.BUTTON_NEGATIVE)

      val layoutParams = btnPositive.layoutParams as LinearLayout.LayoutParams
      layoutParams.weight = 10f
      btnPositive.layoutParams = layoutParams
      btnNegative.layoutParams = layoutParams
  }

9.带有编辑文本的警报对话框

自定义布局alert_dialog_with_edittext.xml的代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <EditText
      android:id="@+id/editText"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="Enter the text here"

</LinearLayout>
fun withEditText(view: View) {
      val builder = AlertDialog.Builder(this)
      val inflater = layoutInflater
      builder.setTitle("With EditText")
      val dialogLayout = inflater.inflate(R.layout.alert_dialog_with_edittext, null)
      val editText  = dialogLayout.findViewById<EditText>(R.id.editText)
      builder.setView(dialogLayout)
      builder.setPositiveButton("OK") { dialogInterface, i -> Toast.makeText(applicationContext, "EditText is " + editText.text.toString(), Toast.LENGTH_SHORT).show() }
      builder.show()
  }