[ING] - 新しいUICollectionViewとCombineを試す

iOS13から新しく追加されたUICollectionViewCompositionalLayoutとCombineを利用した複雑な画面構造を持つ画面のUI実装サンプルになります。

1. このサンプルについて

【サンプル画面のデザイン】

【解説資料のメモ】

全体的な流れとポイントとなりうる点に関してまとめたメモです。

※ 登壇の際にまとめた資料は下記になります。

• 試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine

2. 事前準備と検証用Mockサーバーについて

本サンプルにおいてAPI通信を利用してデータの取得を行う機構を用意するにあたり、ローカル環境下でのAPI通信用のモックサーバー構築にjson-serverを利用しました。node.jsを利用した経験があるならば、すぐに導入できるかと思います。具体的な使い方はこちらを参照して頂ければと思います。

利用する際には下記のような手順でお願いします。

必要なパッケージのインストール:

$ cd mock_server
$ npm install

API通信用Mockサーバー起動:

$ node index.js

1. 実機検証はできません。
2. 事前にnode.jsのインストールが必要になります。

3. UICollectionViewCompositionalLayoutで実現するレイアウト実装

UICollectionViewCompositionalLayoutを利用する際には下記のように、レイアウトの構成要素の関係性がある点がポイントになります。セクション毎の複雑なレイアウトの構築の構築が従来の実装よりも柔軟できることが大きな特徴かと思います。

• Move your cells left to right, up and down on iOS 13 — Part 1
• Move your cells left to right, up and down on iOS 13 — Part 2

Instagramのフィード画面のような画面を構築する場合:

Instagramの写真一覧画面のような画面を構築する場合:

4. Kickstarter-iOSのViewModelに似たInput/Outputを明示的に分割した実装

本サンプルにおけるAPIリクエストからデータを反映させる部分については基本的に「Combine + MVVM』の構成で実装をしています。※RxSwiftで実装する場合を考えてみるとイメージがしやすいのではないかと思います。

またViewControllerからのViewModelへのアクセス時に入力(Input)・出力(Output)をわかりやすくする意図も込めて「Kickstarter-iOS」で採用しているViewModelの構成に近しい形としています。

• Introducing ViewModel Inputs/Outputs: a modern approach to MVVM architecture
• Kickstarter-iOSのViewModelの作り方がウマかった

本サンプルにおけるViewModelの実装例:

本サンプルにおけるViewController(データ反映反映)の実装例: