Skip to content
[ING] - 新しいUICollectionViewとCombineを試す
Swift JavaScript Ruby
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
ComplexCollectionViewStyleExample.xcodeproj
ComplexCollectionViewStyleExample.xcworkspace
ComplexCollectionViewStyleExample
ComplexCollectionViewStyleExampleTests
ComplexCollectionViewStyleExampleUITests
Pods
images
mock_server
.gitignore
Podfile
Podfile.lock
README.md

README.md

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

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

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

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

サンプル図その1

サンプル図その2

【解説資料のメモ】

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

設計メモ

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

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

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

レイアウト例その1

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

レイアウト例その2

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

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

アーキテクチャ概要図

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

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

アーキテクチャViewModel

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

アーキテクチャViewModel

You can’t perform that action at this time.