Всем привет! Вы на канале школы мобильной разработки SwiftBook. Здесь мы рассказываем и показываем всё, что знаем о языке Swift и Kotlin: увлечённо, понятно и без воды.
С вами Анна Васичко и в этом уроке мы познакомимся с новым PhotosPicker для SwiftUI, который будет доступен вместе с новой IOS16, посмотрим, как его добавить в проект и какие основные функции у него есть.
Поехали! Видеоурок можно посмотреть здесь.
До IOS16 вы должны были интегрировать компоненты UIKit, чтобы воспользоваться инструментом для выбора фото в SwiftUI, но теперь у SwiftUI4 будет доступен свой нативный PhotosPicker.
Мы работаем в проекте в XCode 14 beta 5, в первую очередь нам необходимо импортировать специальный фреймворк PhotosUI, который предоставит нам такой элемент, как PhotosPicker.
Перед тем, как перейти к созданию самого PhotosPicker, нам понадобился указать свойство, в котором будет храниться фото, выбранное пользователем. Нам нужно отслеживать изменения этого свойства, поэтому это будет State свойство selectedItem специального типа PhotosPickerItem опционального, ведь в начале у нас никакой фотографии не выбрано.
@State private var selectedItem: PhotosPickerItem?
Далее укажем сам PhotosPicker, это сделать довольно просто: выбираем этот элемент и желаемый инициализатор: укажем параметр title - где будет отображаться надпись, по нажатию на которую, будет открываться выбор фотографий.
Ещё один параметр selection, куда мы передаём selectedItem как binding свойство и ещё один параметр matching - использующийся для фильтрации доступных к выбору элементов
PhotosPicker("Pick Photo", selection: $selectedItem, matching: .images)
Можем посмотреть на экране справа, что у нас уже открывается PhotosPicker.
Теперь нам нужно как-то обработать и отобразить на экране выбираемую фотографию.
Добавим к фотопикеру модификатор onChange, который будет следить за изменениями свойства selectedItem
Далее в замыкании указываем newValue, получаемое при выборе фото.
Теперь добавим ещё одно свойство опционального типа Data - это будут получаемые при выборе фото данные об этой фотографии.
@State private var selectedPhotoData: Data?
Обрабатывать данные о выбранном фото мы будем асинхронно в замыкании к onChange при помощи блока Task.
Загрузка данных у нас будет осуществляться асинхронно, а данные в интерфейс мы будем передавать основном потоке. Как раз при помощи блока Task.
Внутри него мы пытаемся извлечь из newValue данные при помощи нового метода loadTransferable, подробно на нем сейчас останавливаться не будем.
Итак, извлекаем данные и затем передаём их в свойство selectedPhotoData.
.onChange(of: selectedItem) { newValue in
Task {
if let data = try? await newValue?.loadTransferable(type: Data.self) {
selectedPhotoData = data
}
}
}
Данные о фото мы получили, теперь давайте его отобразим.
Делать мы это будем над надписью “pick photo”.
Убираем опциональность у свойства selectedPhotoData, затем пробуем создать свойство image типа UiImage из наших данных и потом отображаем фото через Image с инициализатором uiImage.
Также сбрасываем размер, задаём размер через фрейм, скругляем углы и добавляем пэддинг.
if let selectedPhotoData,
let image = UIImage(data: selectedPhotoData) {
Image(uiImage: image)
.resizable()
.frame(width: 200, height: 200)
.cornerRadius(12)
.padding()
}
Помимо этого также задаем картинку-заглушку в ветке else.
Это будет системное изображение, также укажем цвет:
else {
Image(systemName: "photo.circle")
.resizable()
.frame(width: 200, height: 200)
.foregroundColor(.gray.opacity(0.5))
.padding()
}
Вот такой интересный новый PhotosPicker, надеюсь, вам понравился обзор, спасибо за внимание!
Подписывайся на наши соцсети: Telegram / VKontakte
Вступай в открытый чат для iOS-разработчиков: t.me/swiftbook_chat