Diffable Data Sourcesの応用

Diffable Data Sourcesの応用

Diffable Data Sourcesは、CollectionやTable Viewの管理および更新に必要な作業を劇的に簡素化し、ダイナミックでレスポンシブルなUXを実現します。 Section Snapshotを使って、iOSやiPadOSでリストやアウトラインのCollection Viewを効率的に構築し、iPadのサイドバーの実装をサポートします。また、インターフェイスの作成をより迅速に効率化するために、UICollectionViewDiffableDataSourceを使ってセルの並び替えを簡素化する方法をご説明します。このセッションは、2019年の "Advances in UI Data Sources" を基に作成されました。

リソース
- Implementing Modern Collection Views
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC21
- 超高速なリストとコレクションビューの構築
WWDC20
- モダンなセルの構成
- UI Collection Viewにおけるリスト
WWDC19
- UIデータソースの最新情報
ダウンロード

こんにちは　WWDCへようこそ “Diffable Data Sourcesの進化” ようこそ　私の名前はスティーブ･ブリーン UIKitチームのエンジニアです iOS 14のDiffableDataSourceの進歩についてお話しますコンテンツに入る前に「Emoji Explorer」というこの companion sample projectの一部について話しますこのサンプルには多くの興味深いコンポーネントがあります最初のセクションには水平方向にスクロールする絵文字のグリッドがあります今日の多くのアプリで一般的なデザイン要素です Emoji Explorerの中央にあるこのセクションは特に斬新です iOS 14で初めて搭載された expandable collapsible outline styled UIですこの最後のセクションは UI Collection Viewの真ん中で UI Table Viewのように見えるデザインですそれがEmoji Explorerなのです詳しくはのちほど述べます iOS 13で導入されたDiffableDataSourceは新しいスナップショットデータタイプの追加により UIステートの管理を大幅に簡素化しましたスナップショットは一意のセクションおよびアイテム識別子を使用して UIステート全体をカプセル化しますしたがって UI Collection Viewを更新するときは現在のUIステートでそれを入力してデータソースに適用します DiffableDataSourceはアプリケーション開発者の追加作業を必要とせず差異を計算し自動的にアニメーション化しますこのAPIについてはWWDC 2019の「Advances in UI Data Sources」で取り上げました詳細についてはそちらを確認ください iOS 14では２つの新機能を備えた DiffableDataSourceを基盤として構築しましたセクションスナップショットそれにファーストクラスのリオーダリングサポートですセクションスナップショットについてお話しましょう
iOS 14では既存のスナップショットのすぐ横に新しいセクションスナップショットが追加されます名前が示すようにセクションスナップショットは UICollectionViewのsingleセクションデータをカプセル化しますこの機能強化には２つの理由がありますまずデータソースをセクションサイズのチャンクに構成できるようになること２番目に outline style UIのレンダリングに必要な― 階層データのモデリングを可能にすることですこれはiOS 14全体に共通するビジュアルデザインですでは Emoji Explorerに戻りますセクションスナップショットを使用してこれをサンプルアプリで構築する方法を示しますまず水平方向にスクロールするセクションで singleセクションスナップショットを使用してコンテンツを完全にモデル化しています次に expandable collapsible outline style sectionが表示される２番目のセクションで２番目のセクションスナップショットは階層データをモデル化するために使用されます最後にリストセクションでこのセクションのコンテンツを３番目のセクションスナップショットでモデル化します Emoji Explorerではそれぞれがsingleセクションのコンテンツを表す３つの異なるセクションスナップショットから DiffableDataSourceを作成しますいくつかのAPIを見てみましょうここに新しいSection スナップショット APIのスニペットを示しています API全体のSDKを確認してください
セクションとアイテム識別子を含むiOS 13で導入された元のスナップショットを指すときは「スナップショット」という用語を使用することに注意してください「セクションスナップショット」という用語は iOS 14の新しいタイプを指すために使用しますこの新しいセクションスナップショットタイプを見るとアイテムタイプよりも汎用的であることがわかります
あらゆる種類のセクション識別子タイプがないことに注意してくださいセクションスナップショットはどのセクションを表しているのかを知りません
セクションスナップショットにコンテンツを追加するにはappend APIを使用します
ここでオプションの親パラメーターに注目してください挿入すると階層データのモデル化に必要な― セクションスナップショットに親子関係を作成できます
ここで新しいセクションスナップショットタイプに対応するために UICollectionViewDiffableDataSourceに２つの新しいAPIを追加しましたまずセクションスナップショットとセクション識別子を取得する新しい「apply」メソッドがあります
２つ目の新しいAPIは特定のセクションのコンテンツを表すセクションスナップショットを取得できます次にスナップショットとセクションスナップショットを一緒に使用して Collection Viewのコンテンツを構築する方法を示すコードスニペットを具体化しましょう最初にスナップショットを DiffableDataSourceに適用することによりセクションを希望の順序で追加しますここではセクションが特定の順序で表示されています「recent」「top」「suggested」の順になっていますここで目的のセクションの順序が整ったらセクションスナップショットを各セクションに直接適用してこれらの各セクションのアイテムを設定しますこのセクションスナップショットAPIを使用して階層データを作成する方法を見てみましょうまずルートアイテムをセクションに追加します append APIを使用した「smileys」「Nature」「Food」など
appendメソッドにはオプションの appendパラメータがありますそれが提供されていない場合これらのアイテムをルートに適用することを意味しますしたがって親子関係を構成するためにいくつかの子アイテムを親アイテムに追加しますこの例では親アイテムは「Food」ですアプリケーションの階層データをモデル化した― セクションスナップショットを作成しましたもうお分かりでしょうがセクションスナップショットは階層データを表すことができますこの階層データのほんの一部を推論することは非常に便利ですしたがってこのコードスニペットでは特定の親アイテムに関連するすべての子アイテムを取得します親アイテムには必要に応じて結果のセクションスナップショットの親も含めます
次は拡張ステートについて少しお話しましょう拡張ステートはセクションスナップショットの一部として管理されます表示用スナップショットを作成する場合そのアイテムの親の展開ステートを設定することにより子コンテンツが最初に表示されるかを簡単に判断できますスナップショットをクエリしてアイテムが展開されているか否かを確認できますセクションスナップショットの拡張ステートをミューテートした場合実際にそれをDiffableDataSourceに適用するまで適用されないことに注意してくださいユーザが新しいCell Outline Disclosure Accessoryで構成された― outline styled UIを操作するとフレームワークはセクションスナップショットを新しい展開ステートで自動的に更新しそのセクションスナップショットがデータソースに適用されますこれらのユーザインタラクションによって引き起こされた― 拡張ステートの変化に関して通知を受けると大変便利ですたとえば特定の親が決して折りたたまれない必要があるデザインがあるとしますこれをサポートするため DiffableDataSourceにはユーザインタラクションによる拡張ステートの変更をプログラムで制御する新しいAPIがありますではこれらの新しいAPIを紹介しますまず我々はDiffableDataSourceに― 「SectionSnapshotHandlers」という新しいプロパティがあることに気付きます新しいSectionSnapshotHandlers型は構造体でありこれはアイテムが包括されていて５つのオプションのクロージャーを含みます先ほど述べた要件を処理するにはアウトラインの折りたたみを回避するため特定の親に対して「false」を返す― shouldCollapseItemハンドラーを提供できます API snapshotForExpandingParentを使用して高価なコンテンツの遅延読み込みのサポートも提供していますそのためコンテンツを取得するのにコストがかかる場合に「初期セクションスナップショット」に読まれるコンテンツの量を最小限に抑えるのに役立ちますそのため現在の子スナップショットのステートに応じて必要に応じてそのコンテンツをロードできますこれでセクションスナップショットは終了です
次に DiffableDataSourceに追加された ReorderingSupport APIです
DiffableDataSourceがもたらす進歩の1つは CollectionViewのデータを一意のアイテム識別子でモデル化する機能ですこれらの一意のアイテム識別子を使用するとフレームワークはユーザの操作に基づいてアプリケーションに代わって自動的に並べ替えの変更をコミットできますしかしこれだけでは十分ではありません私たちのアプリケーションは― ユーザが開始した並べ替え操作が行われたことを通知する必要がありますこれにより新しい表示順がアプリケーションのバッキングストアに残りこれが最終のsource of truthですそのため並べ替えをサポートするために DiffableDataSourceに新しいプロパティ ReorderingHandlersが追加されました
これは３つのオプションのクロージャーを含む構造体ですそれは canReorderItem と willReorder didReorderですこの新しいAPIを介して並べ替えを有効にするには最初にcanReorderItemクロージャーを提供する必要がありますこれはユーザが並べ替え操作を開始しようとしたときに呼び出されます「true」が返された場合並べ替え操作を開始できますユーザが並べ替え操作を完了すると didReorderクロージャーが呼び出されアプリケーションが新しい並び替えステートを source of truthにコミットできるようになります並べ替え機能を有効にするには「canReorderItem」と「didReorderクロージャー」の両方を提供する必要があることに注意してください didReorderクロージャーは― アプリケーションに新しいタイプ NSDiffableDataSourceTransactionを渡しますそのためトランザクションは DiffableDataSourceに対して実行されている更新について推論するのに必要なすべての情報を提供しますまず NSDiffableDataSourceTransactionを確認してみましょうこのタイプは４つの基本的な情報を提供しますまず初期スナップショットがありますこれは更新が適用される前の DiffableDataSourceのステートです
次に最終スナップショットがありますこれが更新が適用された後の DiffableDataSourceのステートですこのスナップショットからこれらのアイテム識別子を直接使用してアプリケーションのsource of truthにコミットする新しい順序を決定できますさらにSwift標準ライブラリCollection Differenceも提供されていることがわかりますそしてアプリケーションにsource of truthとして「Array」などのデータ型がある場合はそのCollectionDifferenceをそれに直接適用できますそして最後にこの並べ替え更新に関係するすべてのセクションについてセクションごとの詳細を提供するトランザクションのリストが表示されますセクショントランザクションは非常に似ていますそれらは並べ替え更新に関係するセクションごとに１つのセクショントランザクションが用意されていますまずこのセクショントランザクションが適用された― セクションアイデンティファイヤーを調査できますまたこのセクションの更新に固有の「CollectionDifference」とともに初期および最終セクションスナップショットがあることもわかります例を見てみましょうここでバッキングストアはsingleセクション― collectionViewのsource of truthを提供するアイテムの配列です
トランザクションで提供されるSwift標準ライブラリCollection Differenceを使用して新しいバッキングストアを作成し source of truthを直接更新します以上となります iOS 14のDiffableDataSourceにもたらしたすべての進歩をご説明しました
サンプルApp.をダウンロードください新しいAPIの多くの使用例をご覧頂けますそしてこのコードを出発点として使用してこれらの新しいAPIを活かせるよう App.を更新します関連動画をご覧頂くとより深くご理解頂けますご視聴ありがとうございました

3:24 - NSDiffableDataSourceSectionSnapshot

// NSDiffableDataSourceSectionSnapshot

public struct NSDiffableDataSourceSectionSnapshot<ItemIdentifierType> where ItemIdentifierType : Hashable {

    public init()

    public init(_ snapshot: NSDiffableDataSourceSectionSnapshot<ItemIdentifierType>)

    public mutating func append(_ items: [ItemIdentifierType], to parent: ItemIdentifierType? = nil)

    public mutating func insert(_ items: [ItemIdentifierType], before item: ItemIdentifierType)

    public mutating func insert(_ items: [ItemIdentifierType], after item: ItemIdentifierType)

    public mutating func delete(_ items: [ItemIdentifierType])

    public mutating func deleteAll()

    public mutating func expand(_ items: [ItemIdentifierType])

    public mutating func collapse(_ items: [ItemIdentifierType])

    public mutating func replace(childrenOf parent: ItemIdentifierType, using snapshot: NSDiffableDataSourceSectionSnapshot<ItemIdentifierType>)

    public mutating func insert(_ snapshot: NSDiffableDataSourceSectionSnapshot<ItemIdentifierType>, before item: (ItemIdentifierType))

    public mutating func insert(_ snapshot: NSDiffableDataSourceSectionSnapshot<ItemIdentifierType>, after item: (ItemIdentifierType))

    public func isExpanded(_ item: ItemIdentifierType) -> Bool

    public func isVisible(_ item: ItemIdentifierType) -> Bool

    public func contains(_ item: ItemIdentifierType) -> Bool

    public func level(of item: ItemIdentifierType) -> Int

    public func index(of item: ItemIdentifierType) -> Int?

    public func parent(of child: ItemIdentifierType) -> ItemIdentifierType?

    public func snapshot(of parent: ItemIdentifierType, includingParent: Bool = false) -> NSDiffableDataSourceSectionSnapshot<ItemIdentifierType>

    public var items: [ItemIdentifierType] { get }

    public var rootItems: [ItemIdentifierType] { get }

    public var visibleItems: [ItemIdentifierType] { get }
}

4:20 - UICollectionViewDiffableDataSource Additions for Section Snapshots

// UICollectionViewDiffableDataSource additions for iOS 14

extension UICollectionViewDiffableDataSource<Item, Section> {

    func apply(_ snapshot: NSDiffableDataSourceSectionSnapshot<Item>, 
               to section: Section, 
               animatingDifferences: Bool = true, 
               completion: (() -> Void)? = nil)

    func snapshot(for section: Section) ->   
                  NSDiffableDataSourceSectionSnapshot<Item>
}

4:43 - Using Snapshots and Section Snapshots together

// Example of using snapshots and section snapshots together

func update(animated: Bool=true) {

   // Add our sections in a specific order
   let sections: [Section] = [.recent, .top, .suggested]
   var snapshot = NSDiffableDataSourceSnapshot<Section, Item>()
   snapshot.appendSections(sections)
   dataSource.apply(snapshot, animatingDifferences: animated)

   // update each section's data via section snapshots in the existing position
   for section in sections {
      let sectionItems = items(for: section)
      var sectionSnapshot = NSDiffableDataSourceSectionSnapshot<Item>()
      sectionSnapshot.append(sectionItems)
      dataSource.apply(sectionSnapshot, to: section, animatingDifferences:animated)
   }
}

5:18 - Creating hierarchical data with NSDiffableDataSourceSectionSnapshot

// Create hierarchical data for our Outline

var sectionSnapshot = ...

sectionSnapshot.append(["Smileys", "Nature", 
                        "Food", "Activities",
                        "Travel", "Objects", "Symbols"])

sectionSnapshot.append(["🥃", "🍎", "🍑"], to: "Food")

6:01 - Child Section Snapshots

let childSnapshot = sectionSnapshot.snapshot(for: parent, includingParent: false)

6:11 - Section Snapshot Expand / Collapse API

struct NSDiffableDataSourceSectionSnapshot<Item: Hashable> {
   func expand(_ items: [Item])
   func collapse(_ items: [Item])
   func isExpanded(_ item: Item) -> Bool
}

7:21 - Section Snapshot Handlers

// Section Snapshot Handlers: handling user interactions for expand / collapse state changes

extension UICollectionViewDiffableDataSource {

  struct SectionSnapshotHandlers<Item> {
    var shouldExpandItem: ((Item) -> Bool)?
    var willExpandItem: ((Item) -> Void)?
	
    var shouldCollapseItem: ((Item) -> Bool)?
    var willCollapseItem: ((Item) -> Void)?
    
    var snapshotForExpandingParent: ((Item, NSDiffableDataSourceSectionSnapshot<Item>) -> NSDiffableDataSourceSectionSnapshot<Item>)?
  }
  
  var sectionSnapshotHandlers: SectionSnapshotHandlers<Item>
 
}

8:52 - Reordering Handlers

// Diffable Data Source Reordering Handlers

extension UICollectionViewDiffableDataSource {

  struct ReorderingHandlers {
    var canReorderItem: ((Item) -> Bool)?
    var willReorder: ((NSDiffableDataSourceTransaction<Section, Item>) -> Void)?
    var didReorder: ((NSDiffableDataSourceTransaction<Section, Item>) -> Void)?
  }

  var reorderingHandlers: ReorderingHandlers
}

9:45 - Diffable Data Source Transactions

// NSDiffableDataSourceTransaction

struct NSDiffableDataSourceTransaction<Section, Item> {
   var initialSnapshot: NSDiffableDataSourceSnapshot<Section, Item> { get }
   var finalSnapshot: NSDiffableDataSourceSnapshot<Section, Item> { get }
   var difference: CollectionDifference<Item> { get }
   var sectionTransactions: [NSDiffableDataSourceSectionTransaction<Section, Item>] { get }
}

struct NSDiffableDataSourceSectionTransaction<Section, Item> {
   var sectionIdentifier: Section { get }
   var initialSnapshot: NSDiffableDataSourceSectionSnapshot<Item> { get }
   var finalSnapshot: NSDiffableDataSourceSectionSnapshot<Item> { get }
   var difference: CollectionDifference<Item> { get }
}

11:07 - Diffable Data Source Reordering Example

dataSource.reorderingHandlers.didReorder = { [weak self] transaction in 
   guard let self = self else { return }

   if let updateBackingStore = self.backingStore.applying(transaction.difference) {
      self.backingStore = updatedBackingStore
   }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC21

WWDC20

WWDC19