[SwiftUI] [Swift] iOS で Packaged Document を使う (その2 Packaged Document をベースにしたモデルを定義して表示する)

SwiftUI

パッケージ型のドキュメントを使う方法を説明します。
SwiftUI[SwiftUI] [Swift] iOS で Packaged Document を使う (その1 Packaged Document を定義して実装する)

ViewModel を作る

前回作成した FileDocument に準拠した PackageDocSwiftUIDocument をモデルとして使用します。

PackageDocSwiftUIDocument を保持するような Observable に準拠したクラスを定義します。

ViewModel DocumentViewModel code
コード解説
  1. FileDocument プロトコルは、ドキュメントの Binding を提供してくれるので、Binding のまま保持するようにしています。
  2. 保持している文字列へのアクセサを提供しています。(特に何もしません)
  3. イメージへのアクセサ定義。ドキュメントが、image を保持していない時には、”nosign” のImage を代わりに返しています。
    こうすることで、SwiftUI のビュー側で、nil 判定をなくすことができ、表示にフォーカスすることができるようになります。

View を作る

テキストとイメージを表示するだけですが、テキスト表示ビューの DocumentTextView とイメージ表示ビュー の DocumentImageView に分けてみました。

テキスト表示 DocumentTextView

TextEditor をそのまま Wrap して作りました。

DocumentTextView code

イメージ表示 DocumentImageView

写真をクリックすると、UIImagePickerController を表示します。

そのために、拙作のライブラリを使っています。ライブラリは、こちら

SwiftPM で git の URL を入力すれば使い始められます。

SwiftUIImagePickerController が色々としてくれるので、コードとしてはシンプルになりました。

DocumentImageView code
コード解説
  1. SwiftUIImagePickerController で必要とする変数を定義しています。metaData は、選択された写真のメタデータですが、今回は使っていません
  2. イメージをタップされた時に、SwiftUIImagePickerController を表示します
  3. SwiftUIImagePickerController を表示します

ContentView

DocumentTextView と DocumentImageView を表示し、ViewModel を保持する ContentView は、以下のようになります。

ContentView code

# frame の大きさは、適当に決めてます。

App

最後に、DocumentGroup が ContentView に制御を渡す App を説明します。

MVVM で作りたかったので、少し強引に、ViewModel を作って渡しています。

PackageDocSwiftUIApp code
コード解説
  1. file は、FileDocumentConfiguration<Document> というタイプですが、保持している Document から、ViewModel を作っています
  2. Document から作成した ViewModel を、ContentView に渡しています。View からは、ViewModel 経由で Model(Document)へアクセスします。

作成したアプリ動作

作成したアプリは以下のように動作します。

PackagedDocSwiftUI App

「PackagedDocSwiftUI App」
ソースコードは、プロジェクトファイルも合わせて、こちら

まとめ: Package Document を使う iOS アプリの設定

Package Document を使う iOS アプリの設定
  • Document Type, Exported Type IDを設定する
  • UTType も定義し、FileDocument#readableContentTypes に設定する
  • FileDocument#init で、読み込み用の FileWrapper を設定する
  • FileDocument#fileWrapper で、保存用の FileWrapper を設定する
  • DocumentGroup は、FileDocumentConfiguration<Document>を渡すので、Document から ViewModel を作って、ドキュメント表示用の View (ContentView) に渡す
  • FileDocument は、Document への Binding を提供してくれるので、うまく使う

説明は以上です。 Happy Coding!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です