Диалоги предупреждений Android в Kotlin - Учебное пособие

Строки, которые представляют текст «Hello world», находятся в теге ‹TextView›, на изображении выше (Изображение 4) они представляют строки с 9 по 16. Замените этот код следующим:

Если вы сравните код, который у нас был раньше на изображении 4, и новый код, вы заметите, что мы изменили только текст и имя тега, который раньше был «TextView», а теперь - «Button». Как вы можете видеть, код макета Android XML довольно прост, остальные строки, которые мы не изменяли, являются свойствами представления, которые указывают его положение в пространстве, не беспокойтесь о том, что они означают прямо сейчас. . Вернувшись на вкладку «Дизайн», вы сможете предварительно просмотреть кнопку, как показано на изображении ниже (Изображение 5).

Теперь запустите приложение, и вы должны увидеть кнопку на экране, которая, кстати, похожа на предварительный просмотр. Если вы хотите знать, как должен выглядеть ваш результат, взгляните на изображение 6 ниже.

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

Откройте MainActivity.kt, это код, который содержит весь код Kotlin для управления экраном, который мы ранее редактировали. Если у вас не было открытого файла с момента создания проекта, вы можете найти его в приложении ›java› название вашего проекта ›MainActivity.kt. Как видите, в этом файле есть небольшой код:

1. Имя пакета, которому он принадлежит.
2. Некоторый импорт по умолчанию.
3. Ваш основной вид деятельности.
4. Функция onCreate (), которая выполняется сразу после того, как экран «создан». Внутри него с помощью инструкции setContentView (R.layout.activity_main) вы указываете приложению использовать файл activity_main.xml в качестве макета для этого кода.

Хватит объяснений, перейдем к коду!

Импортируйте необходимые классы

Прежде всего, в строке импорта добавьте следующий код:

Импорт может быть минимизирован, об этом можно узнать по сигналу… после слова import. Откройте его, дважды щелкнув эти многоточия или (очень маленький) значок «+» справа от строки. Не беспокойтесь о порядке, это не имеет значения.

Создайте метод для отображения предупреждения

Теперь что касается самого предупреждения, ниже метода onCreate () создайте новый метод для отображения предупреждения с помощью этого кода:

Давайте рассмотрим этот код по частям. Я пометил части комментариями (которые не обязательно включать в свой проект), чтобы облегчить объяснение:

1. Android предоставляет по умолчанию «конструктор» для создания диалоговых окон предупреждений, поэтому вам не нужно беспокоиться о логике, стоящей за ним. Используйте его и скажите приложению создать конструктор для этого класса.
2. Вы устанавливаете заголовок и сообщение для своего предупреждения.
3. Вы просите строителя показать предупреждение.

Теперь нам нужно как-то вызвать этот метод, внизу onCreate () добавить эту строку кода:

Если вы немного запутались в том, как теперь должен выглядеть ваш код, взгляните на изображение ниже (Изображение 7) для пояснения. Не волнуйтесь, здесь много новой информации, и кодирование идет рука об руку с практикой.

Теперь запустите приложение и посмотрите, что произойдет.

Что случилось? Приложение запускается, но ... Предупреждение появилось одновременно с запуском экрана. Можете ли вы определить, почему это произошло? Из-за строки, которую мы добавили на последнем шаге к методу onCreate (), оповещение отображается сразу, это не то, что мы хотим делать, но, по крайней мере, мы знаем, что теперь наше оповещение работает.

Присоединение метода showAlert () к действию кнопки

Следующим шагом будет заставить кнопку запускать предупреждение, вместо того, чтобы позволить onCreate () выполнять эту работу. Для этого вернитесь в свой файл activity_main.xml и добавьте следующую строку внутри тега кнопки:

Результат файла XML показан на изображении ниже (Изображение 9).

Вам важно что-то заметить, параметр, добавленный к свойству onClick, имеет то же значение, что и имя функции, которую мы создали выше «funshowBasicDialog (view: View?)», ключ здесь - это параметр 'view', метод, который вы используете для onClick, должен иметь параметр просмотра, чтобы работать.

Теперь удалите вызов «showBasicDialog (null)» из onCreate и запустите приложение.

Это сработало? Большой! Это первая часть создания оповещения.

Часть 2: Добавление взаимодействия

Давайте остановимся на мгновение и подумаем о первом, что приходит в голову, когда мы говорим о слове «диалог» или «предупреждение». Теперь сравните его с результатом нашего последнего поста (Изображение 11), если вам нужно напоминание, вот результат последнего урока:

Вопрос в том ... Чего не хватает? Что в предупреждениях обычно есть, чего не хватает в этом? Первое, что приходит в голову, - это «пуговицы». Большинство предупреждений являются интерактивными, и это означает, что они предоставляют вам варианты и возможность выбирать среди них. Вы, вероятно, знакомы с реализованной нами функциональностью, которую можно закрыть, щелкнув серую область вокруг, но это не лучшая идея. Как разработчики приложений, мы должны уделять первоочередное внимание пользовательскому опыту, сокращенно UX.

Кнопки и UX

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

Кнопки - распространенный элемент интерактивного дизайна. Хотя они могут показаться очень простыми элементами пользовательского интерфейса, они по-прежнему остаются одним из самых важных элементов для создания.

https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/

Добавление кнопок в ваше оповещение

Важно помнить, что кнопки дают нам возможность выбора, в большинстве диалоговых окон с предупреждениями вы можете выбрать один из двух вариантов, обычно это «да» и «нет». Обратите внимание, что эти слова могут быть заменены другими в соответствии с вашими действиями.

Подсказка: используйте слова, которые фактически сообщают пользователю, что будет делать кнопка, например: ¿вы хотите удалить этот файл? хороший ярлык: «удалить» / «не удалять», плохой ярлык: «да», «нет». Это может показаться глупым, но для некоторых пользователей это может быть разницей между случайной потерей файла или сохранением его в безопасности.

После открытия проекта перейдите к файлу MainActivity.kt и найдите showBasicDialogFragment () после builder.setMessage («ваше сообщение ”) 'и перед' builder.show () 'вы добавите параметры для диалогового окна. Добавьте туда следующий код.

Приложение также, скорее всего, будет отмечать термин «тост» красным цветом, это связано с отсутствием импорта, поэтому добавьте импорт тоста вверху. Вы также можете использовать сочетание клавиш option + intro или ctrl + intro для его автоматического импорта.

Примечание. Ниже я добавил раздел, объясняющий, что такое тост, на случай, если вам интересно, как это работает.

Теперь давайте рассмотрим этот код по частям:

1. Вы говорите объекту-строителю создать «положительную» кнопку. Android по умолчанию уже знает, что такое положительная кнопка, и иногда, в зависимости от системы или настроек специальных возможностей, вы можете активировать ее с помощью голосовых команд или других способов. Вы указываете, что отображаемый текст - «Да». а затем добавление двух параметров, первый из которых указывает, что это диалог, а затем параметр «which», указывающий, что делать при щелчке по нему.
2. Это действие, которое будет выполнено при нажатии кнопки «Да» / положительно. В этом случае вы создаете элемент Toast, который также имеет текст «Да», чтобы проверить работоспособность вашей кнопки.
3. Этот код такой же, как номер один, но в этом случае вы определяете «отрицательную» кнопку с текстом «Нет».
4. Как и в предыдущем, это то же самое, что и номер два, но с текстом «Нет».

Запустите приложение и проверьте результат.

Вызов

Добавьте кнопку «Может быть» в диалог!

См. Ниже, чтобы получить подсказку или просмотреть полный ответ. Но прежде попробуйте сделать это самостоятельно!

Подсказка. Так же, как в Android есть методы для положительных и отрицательных кнопок, в нем также есть нейтральная кнопка, которую вы можете настроить.

Как и в приведенных выше элементах, нейтральная кнопка содержит текст и действие. Посмотрите на гифку ниже, чтобы увидеть поведение после запуска приложения. Вы получили такой же результат?

Тосты

Тосты, также известные как тосты 🍞. Элементы, используемые в Android, чтобы показать что-то в определенный момент и автоматически убрать это позже. Пару лет назад они были стандартом для быстрых сообщений, но теперь они в основном используются разработчиками для отображения ошибок, которые не так важны для пользователя, или в процессе разработки для тестирования.

Вот и все, теперь ваше оповещение имеет кнопки и реагирует на действия пользователей.

Часть 3: Диалоги со списками

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

1. Списки в чистом тексте, где вы можете выбрать один вариант.
2. Списки радиокнопок, также для одной опции.
3. Списки флажков для выбора нескольких вариантов.

Добавление дополнительных кнопок для отображения диалогов

Перед работой с этим приложением мы добавим еще 4 кнопки в пользовательский интерфейс для каждого из новых предупреждений, таким образом вы сохраните все свои примеры и повторно будете использовать их в своих личных проектах.

Настройка новых кнопок

Добавьте следующий код в activity_main.xml под предыдущей кнопкой:

Этот код очень похож на предыдущую кнопку, но следует обратить внимание на 3 важные вещи:

1. У первой строки есть идентификатор. Идентификаторы важны для управления представлениями в коде и возможности ссылаться на них. Вы увидите, почему я добавил это.
2. Метод onClick по-прежнему указывает на showBasicDialog, это изменится после того, как мы создадим метод, отображающий список, но пока оставьте это так, чтобы избежать ошибок из Android Studio.
3. Мы изменили текст кнопки на другой.

Скомпилируйте и запустите приложение, и вы должны получить следующее.

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

Я предпочитаю добавлять их в качестве первого элемента XML-элементов, чтобы их было легко обнаружить, но его можно разместить где угодно. Теперь обратите внимание, что на обеих кнопках есть строки, которые ссылаются на ограничения layout_constraintX_toYOf. В мире мобильной разработки, то есть для Android и iOS, принято управлять представлениями с ограничениями. Эти ограничения в основном сообщают элементам, где располагаться на экране. Если вы посмотрите на обе кнопки, они привязаны к «родительскому элементу», то есть имеют одинаковое расстояние до верха, низа и справа. , и слева от экрана. Чтобы отобразить обе кнопки, нам нужно установить нижнее ограничение первой кнопки относительно верхнего ограничения второй кнопки. Вот почему здесь нужны идентификаторы.

Ограничения

Измените layout_constraintBottom_toBottomOf первой кнопки на следующее:

Обратите внимание, что нижняя часть теперь ограничена «toTopOf», тогда как раньше она была «toBottomOf».

Во второй кнопке измените layout_constraintTop_toTopOf для:

Примечание. Нет необходимости добавлять оба, layout_constraintBottom_toTopOf и layout_constraintTop_toBottomOf, но вы получите больше практики и понимания логики, если добавите их все.

Теперь снова запустите приложение, и вы должны увидеть обе кнопки. На данный момент они оба будут отображать одно и то же диалоговое окно, поскольку оба ссылаются на действие showBasicDialog.

Добавляем остальные кнопки

Задача: добавьте еще две кнопки с текстом «Показать список переключателей!» и «Показать список флажков!».

После добавления четырех кнопок вы должны увидеть на экране следующее:

Закончив с подготовкой, перейдем к диалогам.

Диалоги Android со списками

Как упоминалось в начале этой статьи, Android предоставляет три основных варианта списков для добавления в диалог: с чистым текстом и без индикаторов, с переключателями и с флажками.

Добавление списка текста для выбора

Этот первый тип списка называется в документации Android традиционным списком с одним выбором.

Перейдите на MainActivity.kt и создайте новую функцию:

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

Затем добавьте код для создания диалогового окна.

Давайте рассмотрим приведенный выше код:

1. Любому диалогу нужен конструктор, этот конструктор всегда создается одинаково. Слово «это» относится к контексту приложения. Мы также добавляем заголовок, но учтите, что это не обязательно.
2. Вы устанавливаете элементы в массиве «hobbies» для конструктора, чтобы он знал, что вы предоставляете список. Добавьте метод OnClickListener, чтобы он знал, что делать при щелчке по элементу.
3. Как и в базовом примере, когда пользователь выбирает элемент, вы показываете тост. Обратите внимание, что второй параметр теперь ссылается на элемент массива, «который» был нажат. Обратите внимание, что он дает индекс, поэтому вы будете ссылаться на хобби [1], и это даст вам строку для отображения в тосте.
4. Вы должны сообщить строителю, что это нужно показать. Помните об этом, я часто забываю об этом, и в итоге у меня возникают долгие часы размышлений о том, что не так. Обратите внимание, то же самое относится и к тостам: легко забыть поставить «show ()» в конце.

Теперь перейдите в файл activity_main.xml и укажите ссылку на функцию, изменив содержимое в методе onClick соответствующей кнопки:

Запустите приложение и нажмите кнопку Показать список с одним выбором. Вы должны увидеть что-то вроде изображения ниже:

Добавление списка переключателей

Если предыдущий пункт сработал, у меня для вас хорошие новости! Добавление списка с переключателями и флажками (наш следующий пункт) почти то же самое, что и «традиционный список», но продолжайте, чтобы вы могли практиковаться и осваивать диалоги.

Для этого нам нужно отслеживать выбранный элемент, поэтому вне функции мы создадим для него переменную:

Причина, по которой мы добавляем -1, состоит в том, чтобы «ничего не выбирать», вы можете начать диалог без предварительного выбора.

Затем, как мы делали в других случаях, создайте функцию, в данном случае, с именем showRadioButtonListDialog:

Код для добавления внутри функции следующий:

Снова давайте посмотрим на код шаг за шагом:

1. Вы создаете массив городов. Представьте, что вы хотите, чтобы ваш пользователь сам выбирал, в каком городе он хочет жить, потому что с технологиями возможно все, поэтому у нас есть эти 4 города, которые мы можем предоставить им в качестве опции.
2. Как упоминалось выше, для каждого диалога нужен конструктор. И еще раз добавляем заголовок.
3. Теперь, что касается нашего первого изменения, вы увидите, что элементы теперь добавляются с помощью метода setSingleChoiceItems (), это говорит строителю, что вам нужен список переключателей. Разница между этим методом и методом setItems (), описанным выше, заключается в том, что он получает элемент «по умолчанию», который представляет собой созданную вами ранее переменную с именем selectedRadioItem.
4. Вы устанавливаете selectRadioItem на вновь выбранный элемент. Причина создания этой переменной вне функции - сохранить выбранный элемент, в противном случае сохраненное значение будет перезаписываться каждый раз, когда мы вызываем функцию. Как и раньше, вы выводите тост, чтобы убедиться, что ваш выбор был правильным.
5. Для этого типа диалогового окна вы добавляете кнопку подтверждения, потому что пользователь все еще может быть не уверен и хочет изменить выбор еще раз до подтверждения.
6. Еще раз не забудьте показать диалог.

Теперь вопрос, после этого у нас есть еще один шаг, прежде чем мы увидим наш новый диалог, вы его помните?

Вам нужно добавить метод в onClick кнопки в activity_main.xml

Запустите приложение еще раз и посмотрите результат изменений, щелкнув элемент показать список переключателей, вы можете увидеть изображение ниже для справки:

Добавление списка флажков

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

Как и в случае с переключателями, вам нужно создать переменную вне функции, чтобы отслеживать, какие элементы проверяются, это можно сделать с помощью массива логических элементов:

Теперь создайте функцию под названием showCheckmarkList, чтобы отобразить этот последний диалог:

Для кода внутри функции у нас будет следующее:

Давайте рассмотрим каждую часть кода, как мы это делали раньше, чтобы понять, о чем идет речь.

1. Массив элементов, отображаемых в диалоговом окне.
2. Вы создаете конструктор, который нужен для каждого диалога.
3. В этом случае вы используете setMultiChoiceItems для отображения списка флажков. Этот метод очень похож, как и метод для переключателей, с той лишь разницей, что он получает наш массив логических значений для отслеживания отмеченных элементов.
4. Вы соответственно устанавливаете или снимаете флажки, и снова вы показываете тост с выбранным элементом.
5. С тем же шаблоном, что и в диалоговом окне переключателя, нам нужна кнопка для подтверждения выбора.
6. Я еще раз повторю, не забудьте показать своего строителя.

Нам не хватает только одного шага, вы можете вспомнить, что это? Добавление вызова вашего метода в onClick кнопки.

Выполнено! Запустите приложение, и ваш диалог должен работать, как на изображении ниже.

На сегодня все! Я надеюсь, что все было легко понять, и это руководство по Android Alert Dialogs Kotlin было полезно для вас. Если вы хотите увидеть результат этого урока, вы можете скачать элемент ниже

"Последний проект"

Надеюсь, вам понравилось содержание этого поста. Если у вас есть сомнения, не стесняйтесь оставлять комментарии, и я отвечу как можно скорее.

До скорого!

Эвана Маргейн Пуиг