SwiftUI
Как сохранить пользователей при загрузке данных в SwiftUI
Пользовательские заполнители для более приятного ожидания
Ждать скучно.
Никому из нас это не нравится.
Но иногда нам приходится.
В 1993 году в статье под названием Время отклика: 3 важных ограничения всемирно известного справочника по пользовательскому опыту Nielsen Group говорилось следующее:
1 секунда - это предел для непрерывного потока мыслей пользователя, даже если пользователь заметит задержку.
10 секунд - это предел, позволяющий сосредоточить внимание пользователя на диалоге. В случае более длительных задержек пользователи захотят выполнять другие задачи, ожидая завершения работы компьютера.
Это остается в силе и в 2020 году: время отклика при ожидании события звучит как большое дело.
Как с этим справиться? С точки зрения программирования могут быть введены некоторые решения для сокращения времени отклика: хранение данных локально, перемещение взвешенных задач в фоновый режим и т. Д.
Но даже при применении этих улучшений иногда не будет другого сценария, кроме ожидания. И в этом случае интерфейс должен соответственно отреагировать.
В случаях, когда компьютер не может обеспечить достаточно немедленную реакцию, пользователю следует обеспечивать непрерывную обратную связь - Якоб Нильсен
Загрузка данных способом iOS
Об этой теме в Руководстве Apple по человеческому интерфейсу говорится об этой проблеме с упором на экран запуска:
Экран запуска появляется сразу после запуска вашего приложения и быстро заменяется первым экраном приложения, создавая впечатление, что ваше приложение работает быстро и быстро реагирует.
Как люди, мы быстрее воспринимаем время, когда нас развлекают, и процесс кажется динамичным и близким к завершению.
Здесь на сцену выходят заполнители. Отображение заполнителя, который динамически имитирует будущий макет данных, создаст впечатление отзывчивости даже после нескольких секунд задержки. Это может иметь значение для того, чтобы пользователь оставался в приложении даже после нескольких дополнительных секунд.
В этой статье вы узнаете, как создать и использовать три настраиваемых отредактированных заполнителя в SwiftUI на основе встроенных функций Apple.
Проблема, которую нужно решить
Перед более подробным объяснением загрузки, заполнителей и прочего, давайте установим некоторые основы. Это приложение, созданное на SwiftUI, будет отображать сводный контент статьи, полученный с сервера, создавая такой простой макет.
Структура статьи следующая:
Кроме того, вам нужен ViewModel, который будет отвечать за предоставление контента. В этом случае, поскольку нам не нужно использовать надлежащую серверную часть, 2-секундная задержка имитирует подключение к серверу для передачи данных.
Редакции
SwiftUI представил в SwiftUI 2.0 встроенную функцию, которая называется редактирование. Она доступна с iOS 14 и автоматически генерирует заполнители на основе содержимого.
Заполнители предоставляются SwiftUI с использованием двух модификаторов представления:
.redacted(reason: .placeholder): если он добавлен к элементу, он будет отредактирован с помощью заполнителя. Причина может быть разной, и именно здесь мы можем создать несколько интересных пользовательских заполнителей..unredacted: если он добавлен к элементу, он не будет отредактирован, даже если отредактировано его родительское представление. Это можно использовать, чтобы намеренно избежать редактирования или указать, что элемент больше не нужно редактировать (т.е., когда данные уже загружены)
В нашем случае заголовок и основной текст будут отредактированы, а изображение останется неотредактированным во время загрузки данных. Если вы запустите приведенный ниже код, вы увидите, как эти тексты стали заполнителями.
Переход от заполнителя к содержанию
Теперь, когда вы знаете, как отображать заполнитель, пришло время использовать его в реальной ситуации. В этом случае заполнители будут отображаться во время загрузки данных.
Чтобы построить элемент .redacted или .unredacted, вы создадите @ViewBuilder. Возвращаемое представление будет зависеть от определенного параметра условия. В нашем случае свойство с именем isLoading будет определять характер представления в зависимости от состояния загрузки.
Чтобы получить более плавный переход между отредактированным и неотредактированным состояниями, к представлению будет применен модификатор .animation.
Настройка заполнителей - Типы редактирования
Этот заполнитель выглядит великолепно, но кажется немного ... статичным. Чтобы добавить ощущение отзывчивости, давайте добавим движение с помощью настраиваемой анимации.
Используя бесконечную циклическую анимацию, будут созданы настраиваемые отредактированные типы заполнителей:
Пользовательский заполнитель
Заполнитель появляется и исчезает при изменении модификатора .opacity.
Заполнитель эффекта масштабирования
Заполнитель масштабируется, становясь больше и / или меньше при изменении модификатора .scaleEffect.
Заполнитель эффекта размытия
Заполнитель становится размытым с использованием модификатора просмотра blur(radius:).
В соответствии с этими типами у вас есть следующие RedactionType случаи перечисления:
Поскольку эти заполнители являются представлениями, вы создадите @ViewBuilder с именем Redactable, который на основе RedactionType вернет один из настраиваемых заполнителей, определенных выше.
Все эти три настраиваемых заполнителя имеют некоторые общие черты:
- Каждый настраиваемый заполнитель представляет собой составное представление над элементом
.redacted. - Состояние выполнения переключается, как только заполнитель появляется на экране, что побуждает его перейти от предыдущего значения к новому с помощью бесконечной анимации.
- Поскольку содержимое не изменяется, а только маскируется, доступ к нему можно получить через VoiceOver. По этой причине требуется метка доступности.
После создания конструктора заполнителей давайте воспользуемся расширением View, которое выдает .modifier с выбранным заполнителем. Это расширение будет вызываться в необходимых элементах.
Последний шаг для выбора любого из вариантов создания заполнителей:
Заключение
Загрузка данных может стать проблемой для преобразования пользователей в ваше приложение, если время отклика превышает ожидаемое.
Сделать это ожидание как можно более интересным, чтобы смягчить эту проблему, и пользовательские отредактированные заполнители - хороший выбор.
SwiftUI уже предоставляет отличное встроенное решение, но настроить это решение легко, и оно станет еще лучше!
