Диалоговое окно предупреждения Android с использованием Kotlin

В этом руководстве мы обсудим диалоговые окна оповещения и реализуем их в нашем приложении Android с использованием Kotlin.

Диалоговые окна оповещения

Диалоговое окно оповещения – это окно, которое появляется на экране. Они обычно показывают некоторую информацию и просят пользователя выполнить какое-либо действие. Для создания диалогового окна оповещения необходимо использовать три основных компонента.

  • Текст заголовка
  • Текст сообщения
  • Кнопки – существуют три типа кнопок: Положительная, Отрицательная и Нейтральная

Для создания AlertDialog мы используем внутренний класс AlertDialog.Builder.

val alertDialogBuilder = AlertDialog.Builder(this)

Мы передаем контекст в конструктор. Дополнительно мы можем передать еще один параметр – стиль диалогового окна оповещения.

Методы диалогового окна оповещения

Некоторые из методов, которые могут использоваться в AlertDialog.

  • setTitle
  • setMessage
  • setIcon
  • setCustomTitle – Здесь вы можете передать пользовательское представление, которое будет заменять часть заголовка в диалоговом окне оповещения.
  • setPositiveButton – Здесь мы передаем строковое имя и метод обратного вызова при нажатии кнопки.
  • setView – используется для добавления пользовательского представления внутри диалогового окна оповещения.
  • setList – используется для установки массива строк, которые будут отображаться в виде списка.
  • setMultiChoiceList – снова мы можем установить массив, но на этот раз мы можем выбирать несколько элементов из списка благодаря флажкам CheckBox.
  • setPositiveButtonIcon – установить значок рядом с кнопкой.
  • show() – используется для отображения диалогового окна.
  • setDismissListener – Здесь вы можете установить логику, которая будет запускаться, когда диалоговое окно закрывается.
  • setShowListener – установите логику, которая будет запускаться, когда диалоговое окно открывается.
  • setCancelable – требуется логическое значение. По умолчанию все диалоговые окна можно закрыть при нажатии кнопки или касании за пределами них. Если этот метод установлен в false, вам нужно явно отменить диалог, используя метод dialog.cancel().

Код диалогового окна оповещения на Kotlin

Чтобы использовать AlertDialog в вашем проекте Android Studio, импортируйте следующий класс.

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 мы передаем текст кнопки вместе с функцией Kotlin, которая срабатывает при нажатии на эту кнопку. Функция является частью интерфейса DialogInterface.OnClickListener(). Тип функции – (DialogInterface, Int) -> Unit. DialogInterface – это экземпляр диалога, а Int – идентификатор нажатой кнопки. В вышеприведенном коде мы представили эту функцию как Функцию Kotlin более высокого порядка. dialog и which представляют два аргумента. Мы можем улучшить функцию, передав _ если аргументы не используются. Функции будут выглядеть следующим образом:

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

В качестве альтернативы мы также можем отображать диалоговое окно через экземпляр класса AlertDialog. Замените 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()
}

Теперь установите это свойство val внутри функции Kotlin setPositiveButton как:

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

Второй вариант делает код намного более лаконичным. Ниже приведен снимок экрана из нашего класса Activity с применением вышеприведенной функции для каждой из кнопок.

Вы можете передать null вместо функции, если не планируете выполнять какие-либо действия при нажатии на кнопку.

У Kotlin еще больше возможностей для улучшения читаемости вышеприведенного кода.

Простой код диалогового окна предупреждения на Kotlin

Используя функцию with, мы можем улучшить читаемость кода Kotlin для создания диалогового окна предупреждения.

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, где реализуем следующие функции в нашем диалоговом окне предупреждения.

  • Простое диалоговое окно предупреждения
  • Диалоговое окно предупреждения с иконкой и настраиваемой кнопкой
  • Диалоговое окно предупреждения со списком
  • Диалоговое окно предупреждения с множественным выбором из списка
  • Диалоговое окно предупреждения со стилем
  • Диалоговое окно предупреждения с настраиваемым стилем
  • Диалоговое окно предупреждения с полем ввода

Структура проекта в 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, мы можем получить любую из кнопок, установив соответствующую константу. Как только кнопка получена, мы можем настроить ее, как показано выше.

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. Аргумент 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()
    }

Выходное значение указанного выше приложения приведено ниже:

Скачать проект Android Studio: AndroidlyAlertDialog

Source:
https://www.digitalocean.com/community/tutorials/android-alert-dialog-using-kotlin