В этом руководстве мы научимся загружать данные из Unsplash API и представлять изображения в LazyVGrid. Использование API SDWebImageSwiftUI и Unsplash.
Сложность: Начинающий | Легко | Нормальный | Испытывающий
Среда: Xcode 12, MVVM и SwiftUI
Создать новый проект Xcode
Откройте Xcode ›Создайте новый проект Xcode› Шаблон приложения ›Назовите его PictureGrid и выберите Интерфейс SwiftUI и жизненный цикл.
Добавьте SDWebImageSwiftUI через диспетчер пакетов Swift
Перейдите в Xcode ›Файл› Swift Package Manger ›Добавить зависимости и введите следующий URL-адрес:
Мы собираемся использовать пакет SDWebImageSwiftUI, чтобы легко отображать изображение с URL-адреса, поскольку API-интерфейсы Unsplash возвращают URL-адрес для представления изображений.
Подпишитесь на Unsplash Developer API
Зайдите на сайт Unsplash Developer, создайте аккаунт, добавьте приложение и получите свой API-ключ, он понадобится вам через несколько минут.
Давайте создадим нашу Модель!
Поскольку мы собираемся использовать шаблон проектирования MVVM, мы собираемся создать модель, которая соответствует JSON, возвращаемому API Unsplash. Создайте новый файл Swift, назовите его Изображение, затем скопируйте / вставьте в него следующий код:
Давайте создадим нашу ViewModel
Теперь давайте создадим ViewModel, который будет отвечать за соединение между нашим приложением и API Unsplash. Создайте новый файл, назовите его pictureViewModel.swift и вставьте в него следующий код:
Этот код представляет собой просто соединение с URL-адресом Unsplash и некоторым кодом для декодирования возвращаемого JSON на основе модели, которую мы создали ранее.
Создать пользовательский интерфейс
Теперь, когда мы модулировали наши данные, установили соединение между нашим приложением и Unsplash Api и декодировали возвращенный JSON. Теперь мы идем дальше и создаем пользовательский интерфейс.
Сначала импортируйте SDWebImageSwiftUI вверху:
Затем объявите над переменной следующее ObservedObject:
И следующую переменную мы собираемся использовать для представления двухстрочных столбцов:
Теперь замените текущую variable var body: some View следующим кодом:
Запустите свой проект!
Теперь все готово, запустите свой проект, и вы увидите, что изображения появятся в списке из двух столбцов.
Вывод
Довольно просто, правда? Было бы сложнее построить этот интерфейс, используя UICollectionView в UIKit. Итак, мы увидели, как за несколько минут мы создаем модель, декодируем ответ JSON из API-интерфейсов Unsplash и представляем это изображение с помощью SDWebImageSwiftUI и LazyVGrid . Следующий шаг: попробуйте адаптировать интервалы и макет под свои нужды.
Спасибо за внимание! Я всегда рад поболтать и поработать на [email protected]. Рассмотрите возможность подписки, чтобы получить неограниченный доступ к моим статьям и всему Medium через мою реферальную ссылку
Репозиторий GitHub:
Первоначально опубликовано на https://swiftproductions.substack.com.
