WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Advances in UICollectionView

Advances in UICollectionView

WWDC 2020UIKit
元の動画を見る

ハイライト

iOS 14 では、iOS 13 の構成レイアウトと差分可能データ ソースに基づいて、セクション スナップショット、リスト レイアウト、セル登録、および標準セル構成が UICollectionView に追加され、同じコレクション ビューでグリッド、アウトライン、テーブル ビューのスタイル リストをホストできるようになります。

主要内容

UICollectionViewデータ、レイアウト、プレゼンテーションを最初から分離します。データは「何を表示するか」に答え、レイアウトは「どこに配置するか」に答え、セルと補足ビューは「どのように見えるか」に答えます。この分割により、コレクション ビューが非常に柔軟になり、複雑なページのコードを簡単に分散できるようになります。

iOS 13 では、Diffable Data Source がデータ側に、Compositional Layout がレイアウト側に導入されます。iOS 14 では、Apple はこれら 2 つの方針に沿って機能の改善を続けており、ディスプレイ側のセル API も更新しています。スピーチ内の絵文字エクスプローラーはミニチュアです。上部は水平にスクロールする絵文字グリッド、中央は展開および折りたたみ可能なアウトライン、下部は次のような段落です。UITableViewリスト。

このページが古い考え方で実装されている場合、開発者は複数のデータ ソース、複数のレイアウト ブランチ、および手書きのセル構成の間を行ったり来たりする可能性があります。iOS 14 のアプローチは、これらの違いを同じものに統合することです。UICollectionView:section スナップショットは各セクションのデータを記述し、構成レイアウト リストはリストの外観を記述し、セルの登録とコンテンツの構成はセルの構成を再利用可能にする役割を果たします。

このセッションは概要です。各 API については詳しく説明しませんが、データ、レイアウト、プレゼンテーションの 3 つのエントリを結び付けて、iOS 14 のコレクション ビューを更新します。実装に関しては、3 つのセッション 10045、10026、および 10027 がそれぞれこれら 3 つの方向に対応します。

詳細

データ: セクション スナップショットを使用して各セクションを結合します

(03:15) iOS 14 では、Diffable データ ソースのセクション スナップショットが追加されます。それは単一のものを表しますUICollectionViewセクション データは、データ ソースをセクション レベルのブロックに結合することと、階層データを表現することという 2 つの問題を解決します。

Emoji Explorer には、正確に 3 つの異なるセクションがあります。水平スクロール絵文字領域はセクション スナップショットで表され、アウトライン領域は別のセクション スナップショットで表され、リスト領域は 3 番目のセクション スナップショットで表されます。このようにして、コレクション ビューは、グリッド、展開可能なアウトライン、および通常のリストを同時にホストできます。

キーポイント:

  • セクション スナップショットの粒度は、コレクション ビュー全体ではなく、単一セクションです。 ・断面スナップショットは親子階層を表現できるため、アウトラインを展開したり折りたたんだりすることができます。
  • トランスクリプトには、Diffable データ ソースの拡張機能にセクション スナップショットが明確に記載されています。詳細については、10045 を参照してください。

レイアウト: 構成レイアウトでリストを作成する

(06:15) iOS 14 では、構成レイアウトにリストが追加されます。それはあなたができるようにしますUITableViewスタイルセクションを任意の場所に追加UICollectionView、セクションごとにレイアウトを混合するコレクション ビューの機能が保持されます。

let configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
let layout = UICollectionViewCompositionalLayout.list(using: configuration)

キーポイント:

  • UICollectionLayoutListConfigurationここで使用されるリストの外観を説明します.insetGrouped。
  • UICollectionViewCompositionalLayout.list(using:)リストのレイアウトを直接生成します。
  • トランスクリプト記述リストは構成レイアウトに基づいて構築されているため、セクションごとに他のレイアウトと混合できます。
  • リスト セクションは、スワイプ アクションや共通のセル レイアウトなどの共通のテーブル ビュー機能をサポートします。

このコードは、すべてのセクションがリストであるレイアウトを作成します。より複雑なページでは、リスト、水平スクロール領域、カスタム グリッドをまとめて、コンポジション レイアウトのセクション プロバイダーのセクションごとに異なるレイアウトを返すことができます。

プレゼンテーション: デキューと構成をセル登録と統合する

(07:33) コレクション ビュー セルを記述する古い方法では、通常、最初にセル クラスまたは nib を登録し、次にデータ ソースでデキューし、結果を特定のセル タイプに変換する必要があります。iOS 14 のセル登録では、登録、デキュー、構成が 1 つの汎用オブジェクトに結合されます。

// Example of using new iOS 14 cell registration

let reg = UICollectionView.CellRegistration<MyCell, ViewModel> { cell, indexPath, model in
   // configure cell content
}

let dataSource = UICollectionViewDiffableDataSource<S,I>(collectionView: collectionView) {
                     collectionView, indexPath, item -> UICollectionViewCell in
   return collectionView.dequeueConfiguredReusableCell(using: reg, for: indexPath, item: item)
}

キーポイント:

  • UICollectionView.CellRegistration<MyCell, ViewModel>セルの型と渡されたモデルの型を同時に宣言します。
  • クロージャは、新しいセルが構築され、セルがモデルで構成されるときに実行されます。
  • 使用登録後、別途呼び出す必要はありませんregister。
  • dequeueConfiguredReusableCell(using:for:item:)データ ソースのセル プロバイダーから構成されたセルを返します。

この書き方は Diffable Data Source と相性が良いです。項目識別子はデータを安定して表現する役割を果たし、セル登録は対応するモデルをセルのコンテンツにマッピングする役割を果たします。

プレゼンテーション: UIListContentConfiguration を使用して標準セルのコンテンツを記述する

(08:32) セルコンテンツ構成は、同様の効果を持つ一連の標準レイアウトを提供しますUITableView過去の標準的なセルタイプ。構成オブジェクトの記述内容、フレームワークはレイアウトとパフォーマンスの最適化を担当します。

var contentConfiguration = UIListContentConfiguration.cell()
contentConfiguration.image = UIImage(systemName:"hammer")
contentConfiguration.text = "Ready. Set. Code"
cell.contentConfiguration = contentConfiguration

キーポイント:

  • UIListContentConfiguration.cell()標準のセルコンテンツレイアウトを作成します。
  • image左の画像を設定します。
  • text本文を設定します。
  • 設定を割り当てるcell.contentConfigurationそうして初めて、セルにこのコンテンツの説明が適用されます。

(08:38) 末尾側に補助テキストが必要な場合は、次を使用できます。valueCell()。

var contentConfiguration = UIListContentConfiguration.valueCell()
contentConfiguration.image = UIImage(systemName:"hammer")
contentConfiguration.text = "Ready. Set. Code."
contentConfiguration.secondaryText = "#WWDC20"
cell.contentConfiguration = contentConfiguration

キーポイント:

  • valueCell()メインテキストと末尾の補助テキストに対応するレイアウト。
  • secondaryTextこれはテキストの 2 番目の段落であり、このスタイルでは後続側に配置されます。
  • このタイプの構成は、コレクション ビュー セルまたはテーブル ビュー スタイルのセルに使用できます。

(08:44) 副テキストをメインテキストの下に置く必要がある場合は、次のようにすることができます。subtitleCell()。

var contentConfiguration = UIListContentConfiguration.subtitleCell()
contentConfiguration.image = UIImage(systemName:"hammer")
contentConfiguration.text = "Ready. Set. Code."
contentConfiguration.secondaryText = "#WWDC20"
cell.contentConfiguration = contentConfiguration

キーポイント:

  • subtitleCell()バンドルsecondaryText本文の下に配置します。
  • 画像、テキスト、およびSecondaryTextの同じグループは、異なるファクトリメソッドを通じて異なるレイアウトを取得できます。
  • トランスクリプト 特記事項として、これらの構成は非常に軽量であり、コンテンツがどのように表示されるべきかを説明するだけです。

(09:07) 同じ一連のアイデアがバックグラウンド設定にも当てはまります。セルの背景を担当し、色や境界線のスタイルなどの属性を調整できます。コンテンツ構成とバックグラウンド構成を組み合わせて、iOS 14 の最新のセル構成モデルを形成します。

重要ポイント

1. 混合レイアウトのマテリアルブラウザを作成する

何をするか: 横スクロールの最近の資料を上部に、展開可能なカテゴリのアウトラインを中央に、通常のリストを下部に配置します。

実行する価値がある理由: Emoji Explorer は、同じコレクション ビューでグリッド、アウトライン、リストを同時にホストできる方法を示します。この構造は、絵文字、アイコン、テンプレート、写真素材など、分類されていて最近のアクセス履歴があるコンテンツに非常に適しています。

開始方法: まず、Diffable データ ソースを使用して安定したアイテム ID を構築します。各セクションに独立したセクション スナップショットを使用します。使用UICollectionLayoutListConfigurationリストセクションを作成します。

2. 古い UITableView ページを UICollectionView に移行します。

手順: 最初に元のテーブル ビューの外観を維持して、設定ページ、コレクション ページ、またはメッセージ リストをコレクション ビュー リストに移行します。

実行する価値がある理由: リストは、テーブル ビューの共通の外観とスワイプ操作を提供すると同時に、コレクション ビューの後続の混合レイアウト用のスペースを確保します。移行が完了したら、水平方向の推奨エリア、グリッド セクション、またはアウトラインを徐々に追加できます。

開始方法: を使用しますUICollectionLayoutListConfiguration(appearance: .insetGrouped)レイアウトの最初のバージョンを作成します。データ ソース側で diffable データ ソースを使用します。セル側を次のように変更しますUICollectionView.CellRegistration。

3. 再利用可能なセル構成のセットを抽出する

対処方法: 異なるリスト ページの画像、タイトル、サブタイトル、および値のスタイルを統一し、各ビュー コントローラーでのセル構成の繰り返しの書き込みを減らします。

これを行う価値がある理由: セルの登録では、クロージャ内のモデルからセルへのマッピングが収集され、コンテンツ構成では、標準のコンテンツ レイアウトが軽量の値型に収集されます。これらを組み合わせることで、登録、識別子の再利用、および手動のサブビュー レイアウトのための重複コードが削減されます。

開始方法: モデル タイプ別に作成するUICollectionView.CellRegistration<Cell, Model>;クロージャで選択UIListContentConfiguration.cell()、valueCell()またはsubtitleCell();最終的に割り当てられたのはcell.contentConfiguration。

4. 展開可能な目次またはサイドバーを作成する

手順: iPad アプリまたはドキュメント ツールで展開可能なディレクトリを作成し、フォルダー、章、またはタグを階層的に表示します。

実行する価値がある理由: セクション スナップショットの 2 つの目標のうちの 1 つは、階層データを表現することです。 Transcript も、iOS 14 の一般的なビジュアル デザインとしてアウトライン スタイルの UI を使用しています。

開始方法: まず、各セクションのルート ノードとサブノードを安定した識別子に編成します。セクション スナップショットを使用して展開状態を管理します。さらに詳細な展開、折りたたみ、並べ替えの動作が必要な場合は、引き続き 10045 を参照してください。

関連セッション

  • 差分可能なデータ ソースの進歩 - セクション スナップショットを深く掘り下げて並べ替えることは、このフィールドのデータ方向の完全な拡張です。
  • UICollectionView のリスト — UICollectionView のリストとサイドバーについて説明することで、このフィールドのレイアウト方向について詳しく説明します。
  • 現代のセル構成 - コンテンツ/背景の構成と状態について話すことは、このプレゼンテーションの詳細な方向性です。

コメント

GitHub Issues · utterances