Поиск по сайту:

Диалоговое окно Android Alert с использованием Kotlin

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

Диалоги предупреждений

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

  • Текст заголовка
  • Текст сообщения
  • Кнопки. Существует три типа кнопок: положительные, отрицательные и нейтральные.

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

val alertDialogBuilder = AlertDialog.Builder(this)

Мы передаем контекст внутри конструктора. При желании мы можем передать другой параметр, стиль диалогового окна предупреждения.

Методы диалога предупреждений

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

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

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

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

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 внутри функции setPositiveButton Kotlin следующим образом:

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

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

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. Аргумент what представляет собой индекс выбранного элемента в списке.

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>

Ниже приведена функция Котлина:

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