UICollectionView 上級編

強力な新機能を使いやすくする、UICollectionViewの新しい機能について学習します。diffableデータソースでセクションスナップショットを使用して展開、折りたたみできるアウトラインを作成する方法を説明します。また、コレクションビューでUITableViewのようなインターフェイスを作成するコンポジションレイアウトでリストを構築する方法も紹介します。セルをデキューしたりコンテンツとスタイルを構成する最新の技術についても学習します。本セッションの前に、コンポジションレイアウトについて理解しておくことをお勧めします。詳細な情報については、WWDC19の “Advances in Collection View Layout” を視聴してください。

リソース

関連ビデオ

WWDC21

超高速なリストとコレクションビューの構築

WWDC20

WWDC19

ダウンロード

こんにちは WWDCへようこそ “UICollectionViewの利点” ようこそスティーブ･ブリーンです UIKitチームのエンジニアをしていますこの動画では iOS 14のUICollectionViewの進歩について少しお話したいと思います話を始める前にこの動画のコンパニオンサンプルプロジェクトの一部をご紹介します絵文字エクスプローラーといいますこのサンプルにはそのデザインに多くの興味深いコンポーネントが組み込まれています最初のセクションには絵文字を水平方向にスクロールするグリッドがありますこれは今日のアプリケーションではかなり一般的なデザイン要素ですさて絵文字エクスプローラーの中央のセクションは特に斬新です拡張可能な折りたたみ式のアウトラインですこれはiOS 14で新しくなりました最後に最後のセクションには UITableViewのような怪しげなデザインがありますね UICollectionViewの中央に配置されていますこれが絵文字エクスプローラーですこの動画全体を通してこのサンプルプロジェクトを参照します UICollectionViewを構成するAPIは３つの異なるカテゴリに分類することができますデータレイアウトプレゼンテーションです UICollectionViewの斬新なコンセプトの１つはコンテンツの“内容”であるデータとレンダリングする“場所”であるレイアウトとのの懸念を分離することでしたこの区別は UICollectionViewの柔軟性を高めるために不可欠なものです UICollectionViewがiOS 6で初めてリリースされたときデータはUICollectionViewDataSourceという index Pathベースのプロトコルで― 管理されていましたレイアウトについては UICollectionViewLayoutという抽象クラスと UICollectionViewFlowLayoutという具体的なサブクラスを公開していましました

そしてプレゼンテーション側では２つのビュータイプを公開しました UICollectionViewCellと UICollectionReusableViewです iOS 13ではデータとレイアウトにそれぞれ Diffable Data SourceとCompositional Layoutの２つの新しいコンポーネントを導入しましたこれらは現在 UICollectionViewを用いてアプリケーションを構築する際に使うAPIです

iOS 14ではこれらの最新のAPIをベースに構築しこの３つのAPIカテゴリ全てに渡って強化された新機能を Diffable Data SourceとCompositional Layout そしてCellに導入しました

まずは Diffable Data Sourceの機能強化についてお話しましょう iOS 13で導入されたDiffable Data Sourceは新しいスナップショットデータ型の追加により UI Stateの管理を大幅に簡素化しますスナップショットは一意のセクションとアイテム識別子を使用してUI State全体をカプセル化します UICollectionViewを更新する際にはまず新しいスナップショットを作成し現在のUI Stateを入力してからデータソースに適用します Diffable Data Sourceは差分を計算しアニメーションを自動的に生成します追加の作業は必要ありませんこのAPIの詳細については WWDC 2019の動画 WWDC2019の動画“Advances in UI Data Sources”で取り上げましたこの動画をチェックすることをお勧めします

iOS 14ではセクションスナップショットという新しいスナップショット型を追加していますそしてその名の通りセクションスナップショットは UICollectionView内の単一セクションのデータをカプセル化しますこの強化には２つの理由があります第一にデータソースをセクションサイズの― データの塊に構成しやすくするため

そして第二に階層データのモデリングを可能にするためですこれはiOS 14全体で見られる一般的なビジュアルデザインである― アウトラインスタイルのUIのレンダリングをサポートするために必要となりますそれでは絵文字エクスプローラーに戻りセクションスナップショットを使用して― サンプルアプリケーションの構築方法を見てみましょうまず水平方向にスクロールするセクションでは単一のセクションスナップショットを使用してここにあるコンテンツを完全にモデル化します次に２番目のセクションですこの拡張可能で折りたたみ可能なアウトラインスタイルでは２番目のセクションスナップショットを使用しこの階層データをモデル化していますそして最後にリストのセクションでは３番目のセクションスナップショットでこのセクションのコンテンツを再びモデル化しますそこで絵文字エクスプローラーでは Diffable Data Sourceを３つの異なるセクションスナップショットに構成しそれぞれが１つのセクションのコンテンツを表しています以上が iOS 14のUICollectionViewの Diffable Data Sourceに追加された― 新しいセクションスナップショットの概要ですしかしそれだけではありませんまた新たに並び替えAPIも追加しましたこれらの新しいAPIをより深く掘り下げるには “Advances in Diffable Data Sources”の動画をご覧ください次に iOS 14のCompositional Layoutの進歩についてお話します Compositional Layoutは iOS 13で導入されましたがより小さくて論理のわかりやすい少量のレイアウトを一緒に構成することでリッチで複雑なレイアウトを構築できるようになりました Compositional Layoutが高速なのはレイアウトがどのように動作すべきかではなくレイアウトをどのように見せたいかを記述するからです Compositional Layoutにはより洗練されたUIを構築するのに役立つ― セクション固有のレイアウト機能も含まれています直交にスクロールするセクションにも対応しています Compositional Layoutの詳細については WWDC2019の動画“Advances in Collection View Layout”をご覧ください

iOS 14ではCompositional Layoutの基礎に Listsと呼ばれる新機能を加えて構築しました

Listsを使用すると UITableViewのようなセクションを任意のUICollectionViewに追加できますそしてこれらのリストにはスワイプアクションや多くの一般的なセルレイアウトなど UITableViewに求めていた機能が豊富に含まれていますリストスタイルのレイアウトを作成するのは簡単です ListsはCompositional Layout上に構築されているのでセクションごとに他の種類のレイアウトとListsを簡単に混在させ一致させることができます Compositional Layoutを使ってリストスタイルのレイアウトを― 簡単に作成する方法をコードスニペットで確認してみましょう

ご覧のようにこれはたった２行のコードで非常にシンプルですこの例では UICollectionViewレイアウトを作成しています CollectionViewの各セクションは insetGroupedの外観を持つリストになっていますそしてそのレイアウトはこのような感じになります

Compositional Layoutリストの簡単な紹介は以上ですでも Listsには他にもたくさんのことがあります新しい具体的なUICollectionViewListCell ヘッダーとフッターのサポートそして多くのiPadOSシステムアプリケーションで見られる新しいSidebarの外観があります深く掘り下げたい方は動画“Lists in UICollectionView”をご覧ください

最後にUICollectionViewと最新のセルについて少しお話しましょう

iOS 14ではセル登録という新しいAPIを使用してセルを構成するための真新しい方法がありますセル登録はビューモデルからセルを設定するための― シンプルで再利用可能な方法ですセル登録ではセルクラスやニブを登録して再利用識別子と関連付けるという余分な手順を省くことができます代わりに汎用的な登録型を使用しますこれはビューモデルから新しいセルを設定するための設定クロージャを組み込んでいますこのAPIの動作を見てみましょうまずセル登録を作成しますこれはセルクラスこの場合は MyCellですがそれとViewModelクラスにまたがる汎用的なものです登録でクロージャが使用されることに注意してくださいこれは新しいセルが構築されるたびに呼び出されますここでは ViewModelからセルのコンテンツを構成しますセル登録を使用することで登録を呼び出す余分な手順が不要になりました登録を使用して新しいAPIの dequeueConfiguredReusableCellで Diffable Data Sourceのセルプロバイダーからセル登録を使用するだけですセル登録については以上です次はセルコンテンツの構成ですセルコンテンツの構成は― UITableViewの標準的なセル型で見られるのと同じようなセルの標準レイアウトを提供しますこれらの構成は任意のセルまたは汎用的なUIViewで使用することができますとても柔軟性がありますこれらがどのように機能するか知るためにいくつか視覚的な例をチェックしてみましょうここではとても標準的な見た目のセルレイアウトで画像とテキストを配置した― 簡単な例を見ることができますこれはvalueCell変数です２番目のテキストがセルの末尾にあります

最後に subtitleCellですこの場合は２番目のテキストがメインテキストの下に表示されます

ここで注目すべきはこれらのコンテンツ構成の型が非常に軽量でありコンテンツがどのように表示されるか簡単に記述することですこのフレームワークはレイアウトに関する全ての考慮事項を処理して自動的に最適化しパフォーマンスを向上しますそして最後に背景の構成ですこれらはコンテンツの設定に非常に似ていますが色や境界線スタイルなどのプロパティを調整する機能によって任意のセルの背景に適用されますここまで最新のセル構成についてほんの少しだけ説明しましたより深く掘り下げるには動画“Modern Cell Configuration”を参照してください以上で iOS 14のCollection Viewの進歩に関する概要を終わりますサンプルアプリケーションをダウンロードしこれらのAPIの動作を見てみてくださいそして私たちのコードを基礎として用いアプリケーションに機能を追加してくださいさらに詳しく知りたい方は関連動画をチェックしてみてくださいご視聴ありがとうございました

6:15 - UICollectionViewCompositionalLayout Lists

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

7:33 - Cell Registration

// 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)
}

8:32 - .cell Content Configuration

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

8:38 - .valueCell Content Configuration

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

8:44 - .subtitleCell Content Configuration

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

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