iOS13から新しく追加されたUICollectionViewCompositionalLayoutとCombineを利用した複雑な画面構造を持つ画面のUI実装サンプルになります。
【サンプル画面のデザイン】
【解説資料のメモ】
全体的な流れとポイントとなりうる点に関してまとめたメモです。
※ 登壇の際にまとめた資料は下記になります。
本サンプルにおいてAPI通信を利用してデータの取得を行う機構を用意するにあたり、ローカル環境下でのAPI通信用のモックサーバー構築にjson-serverを利用しました。node.jsを利用した経験があるならば、すぐに導入できるかと思います。具体的な使い方はこちらを参照して頂ければと思います。
利用する際には下記のような手順でお願いします。
必要なパッケージのインストール:
$ cd mock_server
$ npm install
API通信用Mockサーバー起動:
$ node index.js
- 実機検証はできません。
- 事前にnode.jsのインストールが必要になります。
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の写真一覧画面のような画面を構築する場合:
本サンプルにおける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(データ反映反映)の実装例:
