На WWDC 2021 компания Apple анонсировала множество новых функций для фреймворка SwiftUI, чтобы облегчить жизнь разработчикам. AsyncImage - определенно одно из новых представлений, представленных в iOS 15, о котором стоит упомянуть. Если вашему приложению необходимо получать и отображать изображения с удаленных серверов, это новое представление должно избавить вас от необходимости писать собственный код для обработки асинхронной загрузки.
AsyncImage - это встроенное представление для асинхронной загрузки и отображения удаленных изображений. Все, что вам нужно, это указать ему URL-адрес изображения. Затем AsyncImage выполняет тяжелую работу по захвату удаленного изображения и отображению его на экране.
В этом руководстве я покажу вам, как работать с AsyncImage в проектах SwiftUI. Чтобы следовать этому руководству, пожалуйста, убедитесь, что вы используете Xcode 13 и iOS 15.
Базовое использование AsyncImage
Самый простой способ использовать AsyncImage - указать URL изображения следующим образом:
AsyncImage подключается к заданному URL и асинхронно загружает удаленное изображение. Он также автоматически отображает заполнитель серым цветом, пока изображение еще не готово к отображению. Как только изображение полностью загружено, AsyncImage отображает его в присущем ему размере.
Если вы хотите сделать изображение меньше или больше, вы можете передать значение масштабирования в параметр scale следующим образом:
Значение больше 1.0 уменьшает масштаб изображения. И наоборот, значение меньше 1 сделает изображение больше.
Настройка размера изображения и плейсхолдера
AsyncImage предоставляет еще один конструктор для разработчиков, если вам нужна дальнейшая настройка:
Инициализируя AsyncImage с помощью init выше, мы можем изменять размер и масштаб загруженного изображения до желаемого размера. Кроме того, мы можем предоставить собственную реализацию для заполнителя. Вот пример фрагмента кода:
В приведенном выше коде AsyncImage предоставляет результирующее изображение для манипуляций. Затем мы применяем модификатор resizable() и scaledToFill() для изменения размера изображения. Для вьюшки AsyncImage мы ограничиваем его размер до 300×500 точек.
Параметр placeholder позволяет нам создать собственное заполнение вместо используемого по умолчанию. Здесь мы отображаем заполнитель светло-фиолетовым цветом.
Обработка различных фаз асинхронной операции.
AsyncImage предоставляет другой конструктор, если вам нужно обеспечить лучший контроль над операцией асинхронной загрузки:
AsyncImagePhase - это перечисление, которое отслеживает текущую фазу операции загрузки. Вы можете предоставить подробную реализацию для каждой из фаз, включая пустую, неудачу и успех.
Ниже приведен пример фрагмента кода:
.empty состояние указывает на то, что изображение не загружено. В этом случае мы отображаем плейсхолдер. Для состояния .success мы применяем пару модификаторов и отображаем его на экране. Состояние .failure позволяет предоставить альтернативное представление в случае возникновения ошибок. В приведенном выше коде мы просто отображаем системное изображение.
Добавление анимации с помощью Transaction (перехода)
Тот же init позволяет указать необязательную транзакцию (переход) при смене фазы. Например, в следующем фрагменте кода в параметре транзакции указано использование spring анимации:
При этом вы увидите анимацию затухания при загрузке изображения. Если вы протестируете код в панели предварительного просмотра, он не будет работать. Чтобы увидеть анимацию, обязательно протестируйте код в симуляторе.
Вы также можете прикрепить модификатор перехода к виду изображения следующим образом:
Эта заметка является переводом оригинальной статьи Simon Ng - Using AsyncImage in SwiftUI for Loading Images Asynchronously
#iOS #swift #swiftui #asyncimage #программирование для начинающих