🏙️

[SwiftUI]iOS 16から使えるPhotosPickerの使い方

2022/08/09に公開

PhotosPicker

PhotosPickerはUIKitで使用していたPHPickerViewController, UIImagePickerControllerのSwiftUI製のもので、iOS, macOS, watchOSというマルチプラットフォーム対応しているPhoto Pickerです。

新しい要素

Transferable
ドラッグ&ドロップができることを示す新しいプロトコルです。
PhotosPickerItem
ユーザーがピックした後に、渡されるアイテムです。これを使ってアプリ側で写真/動画をロードします。
PHPickerViewControllerでいうPHPickerResult, NSItemProviderのようなものです。

PhotosPicker init

PhotosPickerのinitは以下のような形です。

struct ContentView: View {
  @State var photoPickerItems: [PhotosPickerItem] = []

  var body: some View {
    PhotosPicker(
      selection: $photoPickerItems, // Bindingした[PhotosPickerItem]
      maxSelectionCount: 0, // 選択する写真の数(0で無制限)
      selectionBehavior: .ordered, // 順番が関係するか
      matching: .images, // 写真の種類を選択(nilでどれでも可に)
      preferredItemEncoding: .current, // エンコードの種類(基本currentでいいはず)
      photoLibrary: .shared()) { // ライブラリの選択
        Image(systemName: "photo")
    }
  }
}

Load Photo

Task {
  let image = try await photoPickerItem.loadTransferable(type: Image.self)
  print(image)
}

画像 Pick Sample


struct ContentView: View {
  @State var photoPickerItems: [PhotosPickerItem] = []
  @State var images: [UIImage] = []

  var body: some View {
    VStack {
      PhotosPicker(
        selection: $photoPickerItems,
        maxSelectionCount: 0,
        selectionBehavior: .ordered,
        matching: .images, // 写真の種類を画像(images)だけに
        preferredItemEncoding: .current,
        photoLibrary: .shared()
      ) {
        Image(systemName: "photo")
      }
      .onChange(of: photoPickerItems) { newPhotoPickerItems in
       Task {
         do {
           for photoPickerItem in newPhotoPickerItems {
             if let data = try await photoPickerItem.loadTransferable(type: Data.self) {
               if let uiImage = UIImage(data: data) {
                 images.append(uiImage)
               }
             }
           }
         } catch {
            print(error)
         }
       }
      }
      if !images.isEmpty {
        TabView {
          ForEach(images, id: \.self) { image in
            Image(uiImage: image)
              .resizable()
              .scaledToFit()
          }
        }
        .tabViewStyle(.page(indexDisplayMode: .always))
      }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.black)
  }
}

動画をPickしたい

動画をPickしたい場合新しくTransferableに準拠したものが必要です。

Transferable filerepresentation(Apple Documentation)

// サンプル実装
import CoreTransferable

struct Movie: Transferable {
  let url: URL

  static var transferRepresentation: some TransferRepresentation {
    FileRepresentation(contentType: .movie) { movie in
      SentTransferredFile(movie.url)
    } importing: { receivedData in
      let fileName = receivedData.file.lastPathComponent
      let copy: URL = FileManager.default.temporaryDirectory.appendingPathComponent(fileName)

      if FileManager.default.fileExists(atPath: copy.path) {
        try FileManager.default.removeItem(at: copy)
      }

      try FileManager.default.copyItem(at: receivedData.file, to: copy)
      return .init(url: copy)
    }
  }
}

.onChange(of: photoPickerItems) { newPhotoPickerItems in
  Task {
    do {
      for photoPickerItem in newPhotoPickerItems {
        if let movie = try await photoPickerItem.loadTransferable(type: Movie.self) {
          movies.append(movie)
        }
      }
    } catch {
      print(error)
    }
  }
}

Sample Project

iOS/ macOSで使えるSample Projectを作成しました。

watchOSはiOS/ macOSとは少し異なる挙動で、実機がないとテストができないため、対応していません。