Начиная с iOS 16, в SwiftUI представлен собственный вид выбора фотографий, известный как PhotosPicker. Если вашему приложению требуется доступ к библиотеке фотографий пользователей, Представление PhotosPicker легко управляет процессом выбора фотографий. Это встроенное представление обеспечивает удивительную простоту, позволяя разработчикам представить средство выбора и выполнить выбор изображения с помощью всего лишь нескольких строк кода.

При представлении представления PhotosPicker фотоальбом отображается на отдельном листе, отображаемом поверх интерфейса вашего приложения. В более ранних версиях iOS вы не могли настроить или изменить внешний вид средства выбора фотографий в соответствии с макетом вашего приложения. Однако Apple представила улучшения представления PhotosPicker в iOS 17, позволяющие разработчикам легко встраивать его в приложение. Кроме того, у вас есть возможность изменить его размер и макет, используя стандартные модификаторы SwiftUI, такие как .frame и .padding.

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

Пересмотр средств выбора фотографий

Чтобы использовать представление PhotosPicker, вы можете сначала объявить переменную состояния для хранения выбранной фотографии, а затем создать экземпляр представления PhotosPicker, передав привязку к переменной состояния. Вот пример:

import SwiftUI
import PhotosUI
 
struct ContentView: View {
 
    @State private var selectedItem: PhotosPickerItem?
 
    var body: some View {
        PhotosPicker(selection: $selectedItem,
                     matching: .images) {
            Label("Select a photo", systemImage: "photo")
        }
    }
}

Параметр matching позволяет указать тип отображаемого актива. Здесь мы просто выбираем отображение только изображений. В закрытии мы создаем простую кнопку с видом Label.

При выборе фотографии средство выбора фотографий автоматически закрывается, и выбранный элемент фотографии сохраняется в переменной selectedItem, которая имеет тип PhotosPickerItem. Чтобы загрузить изображение из элемента, вы можете использовать loadTransferable(type:completionHandler:). Вы можете прикрепить модификатор onChange, чтобы прослушивать обновление переменной selectedItem. Всякий раз, когда происходит изменение, вы вызываете метод loadTransferable для загрузки данных актива следующим образом: