UIAlertController в Swift и работа с диалоговыми окнами

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

UIAlertController является важной частью IOS SDK, которая используется для подтверждения пользователем определенных действий. Кроме того, UIAlertController также поддерживает стиль action sheet, который позволяет пользователям вашего приложения быстро предпринимать какие-либо действия.

Отображение оповещений с помощью UIAlertController

Вот как выглядит диалоговое окно оповещений на iOS:

UIAlertController пример

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

Как вы можете видеть в приведенном выше примере, оповещения помогают группировать похожие действия и представлять их в виде группы действий. Хотите сделать резервную копию перед удалением? Хотите оплатить с помощью PayPal или оформить заказ с помощью кредитной карты? Хотите принять входящий вызов или отправить сообщение «Я позвоню вам позже»?

Большинство предупреждений не могут быть отклонены без каких-либо действий, и поэтому они настолько эффективны. Когда появляется предупреждение, оно заполняет весь экран iPhone. Вы не можете его сбросить, не сделав выбор. Такое предупреждение называется модальным диалогом. На iOS их просто называют оповещениями.

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

Посмотрим, как вы можете создать оповещение с помощью UIAlertController.

let alert = UIAlertController(title: "Вы принесли полотенце?", message: "Лучше возьмите с собой полотенце.", preferredStyle: .alert)
 
alert.addAction(UIAlertAction(title: "Да", style: .default, handler: nil))
alert.addAction(UIAlertAction(title: "Нет", style: .cancel, handler: nil))
 
self.present(alert, animated: true)

Что мы делаем в данном коде?

  • Сначала мы создаем константу alert и назначаем ей объект UIAlertController. Инициализатор UIAlertController принимает три параметра: название, описание и стиль оповещения.
  • Затем мы добавляем два действия: Да и Нет. Это кнопки, которые будут отображаться в диалоге.
  • Наконец, мы выводим оповощение на экран, вызывая функцию present(_:animated:) на текущем View controller.

При желании вы можете оставить поля title или message пустыми и создать оповещение только с заголовком или с сообщением.

Стили UIAlertController: .alert и .actionSheet

При создании контроллера оповещений в инициализаторе вы можете выбрать один из двух вариантов UIAlertController(··· preferredStyle:)

  • Простое оповещение .alert.
  • Список действий .actionSheet.

Вот как выглядит одно и то же оповещение с обоими вариантами:

UIAlertController: .alert и .actionSheet

У стиля .actionSheet есть 3 преимущества по сравнению со стандартными оповещениями:

  1. .actionSheet скользят вверх от нижней части экрана, поэтому вы можете нажимать на кнопки большим пальцем.
  2. Кнопки .actionSheet вмещают больше текста, поэтому для заголовка и сообщения обычно требуется меньше текста по сравнению со стилем .alert.

Когда следует использовать стиль .alert, а когда .actionSheet?

  • Лучше всего использовать стиль .actionSheet для выбора между несколькими похожими опциями, такими как «Выбрать из библиотеки фотографий» и «Сделать снимок с помощью камеры», которые являются взаимоисключающими.
  • Когда вам нужно явное подтверждение положительного или отрицательного действия, например «Да» и «Нет», или «ОК» и «Отмена» лучше всего использовать стиль .alert, который дает наилучшую возможность выбора между двумя вариантами.

Часто стиль .actionSheet вообще не имеет заголовка или сообщения. Вместо этого вы позволяете кнопкам говорить самим за себя. Также всегда оставляйте пользователю возможность отменить вызов списка действий с помощью кнопки Отмена.

Действия в UIAlertController

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

alert.addAction(UIAlertAction(title: "Да", style: .default, handler: { action in
    print("Принеси мне полотенце!")
}))

В приведенном выше коде выполняется замыкание:

{ action in
    print("Принеси мне полотенце!")
}

Замыкание имеет один параметр action типа UIAlertAction, которое позволяет вам различать различные действия, когда вы используете одно замыкание для нескольких действий.

Кнопки действий могут иметь три стиля:

  • .default
  • .cancel
  • .destructive

.cancel выделяется более жирным шрифтом в предупреждении. Вы можете видеть это на примерах выше.

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

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

Работа с данными, которые вводит пользователь

Вы также можете добавить текстовое поле в диалоговое окно:

let alert = UIAlertController(title: "Какое твое имя?", message: nil, preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "Отмена", style: .cancel, handler: nil))
 
alert.addTextField(configurationHandler: { textField in
    textField.placeholder = "Введите свое имя..."
})
 
alert.addAction(UIAlertAction(title: "OK", style: .default, handler: { action in
 
    if let name = alert.textFields?.first?.text {
        print("Ваше имя: \(name)")
    }
}))
 
self.present(alert, animated: true)

Сначала мы создаете экземпляр UIAlertController с типом .alert. Затем мы добавляем простое действие Отмена.

Далее текстовое поле с помощью функции addTextField(configurationHandler:). Вы можете использовать замыкание для настройки текстового поля, например, для установки свойства placeholder.

Наконец, мы добавляем действие, которое происходит при нажатии на кнопку ОК. Когда это действие вызывается, входные данные из текстового поля выводятся на консоль с помощью команды print.

Читайте также:
Добавить комментарий

Ваш адрес email не будет опубликован.