試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
•
3 likes•2,572 views
potatotips #63の登壇資料になります。 https://potatotips.connpass.com/event/149806/ 今回はiOS13から新しく導入された、 ・Combine ・UICollectionViewCompositionalLayout でのサンプル構築事例の紹介になります。 シビアで複雑かつバリエーションに富んだ画面を構築する際に、従来のUICollectionViewの手法では難しかったレイアウト実装を、UICollectionViewCompositionalLayoutで従来よりもシンプルな形で実装するためのポイントを解説しています。 また、Combineを用いたMVVM構成のアーキテクチャ実装におけるAPIリクエスト〜UIへの反映処理に関するポイントについても若干ではありますがこの資料で触れています。 まだまだ「試してみた」という段階の実装で恐縮ではありますが、少しでも今後の理解の一助となれば幸いです。 サンプル: https://github.com/fumiyasac/ComplexCollectionViewStyleExample
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
Similar to 試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine (20)
More from Fumiya Sakai
Recently uploaded
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
- 4. iOS13~ UICollectionViewCompositionalLayout 個人的にはSwiftUIやCombineに負けないぐらいのトピックス https://developer.apple.com/videos/play/wwdc2019/215 Advances in Collection View Layout: https://developer.apple.com/videos/play/wwdc2019/220 Advances in UI Data Sources: ☺ 複雑なレイアウトへの対応が柔軟に可能。 ☺ 表示データの反映を伴うUI更新処理の改善。 App StoreのUI構造の例WWDC19での発表
- 5. 1つの画面の中に異なる属性の要素が多数存在する場合 自分が試した経験のあるアプローチを何個かピックアップしてみる ⭐ どの実装もメリット・デメリットがある & 構成するための部品が増えるし管理も煩雑になりがち ① UITableView + UICollectionViewの合わせ技： セル要素の中にUICollectionViewやUITableViewを入れ子にする ② ContainerView + UICollectionViewの合わせ技： 小さなViewController単位で切り出して管理と集約をする ③ IGListKit等のライブラリを活用する： 複雑な構造の管理や差分更新の実施 出来れば 1つの画面で 済ませたい！ これまでのアプローチ例 https://qiita.com/_atsushisakai/items/524f2a48e7f671ef61d8 （参考）IGListKitでフィードUIをリファクタする 特集バナー おすすめアイテム 紹介コンテンツ 新着アイテム一覧 構成要素の属性が それぞれ異なるも のを表示する必要 ⭐ 例: TOP画面
- 6. 簡単なAPIリクエストを伴う画面構築を試してみる UICollectionViewCompositionalLayout + Combineの実装 ⭐ 新しいUICollectionViewとCombineを試す: https://github.com/fumiyasac/ComplexCollectionViewStyleExample 単一のUICollectionViewだけで複雑なレイアウトを実装： ① 実装における必要なポイント ② レイアウトを考える上でのポイント ③ データの更新方法とAPI関連処理を繋げる 今回は”試してみた”実装を準備しました。 ⭐ UICollectionViewCompositionalLayout ⭐ Combine Framework
- 7. まずは必要な設定と準備の部分について 下記3つの必要なものを定義して切り出しておく // MEMO: UICollectionViewを差分更新するためのNSDiffableDataSourceSnapshot（※悩ましい: AnyHashableではなくもっと厳密に制限したい） private var snapshot: NSDiffableDataSourceSnapshot<MainSection, AnyHashable>! // MEMO: UICollectionViewを組み立てるためのDataSource（※悩ましい: AnyHashableの部分を型で縛りたい） private var dataSource: UICollectionViewDiffableDataSource<MainSection, AnyHashable>! = nil // MEMO: UICollectionViewCompositionalLayoutの設定（※Sectionごとに読み込ませて利用する） private lazy var compositionalLayout: UICollectionViewCompositionalLayout = { let layout = UICollectionViewCompositionalLayout { [weak self] (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in switch sectionIndex { case MainSection.FeaturedArticles.getSectionValue(): return self?.createFeaturedArticlesLayout() ・・・ （以下セクション毎にレイアウトを作成して適用する）・・・ } } return layout }() enum MainSection: CaseIterable { case FeaturedArticles, RecentKeywords, NewArrivalArticles, RegularArticles func getSectionValue() -> Int { switch self { case .FeaturedArticles: return 0 ・・・ （以下セクション毎にレイアウトを作成して適用する）・・・ } } } Section毎のEnum値 ✨ Section毎にNSLayoutCollectionを組み立てる
- 8. // MEMO: UICollectionViewDelegateについては従来通り collectionView.delegate = self // MEMO: UICollectionViewCompositionalLayoutを利用してレイアウトを組み立てる collectionView.collectionViewLayout = compositionalLayout // MEMO: DataSourceはUICollectionViewDiffableDataSourceを利用してUICollectionViewCellを継承したクラスを組み立てる dataSource = UICollectionViewDiffableDataSource<MainSection, AnyHashable>(collectionView: collectionView) { (collectionView: UICollectionView, indexPath: IndexPath, model: AnyHashable) -> UICollectionViewCell? in ・・・（indexPathの値とmodelを元にセルを組み立てる）・・・ } // MEMO: Header・Footerの表記についてもUICollectionViewDiffableDataSourceを利用して組み立てる dataSource.supplementaryViewProvider = { (collectionView: UICollectionView, kind: String, indexPath: IndexPath) -> UICollectionReusableView? in ・・・（indexPathの値とkindを元にHeader/Footerを組み立てる）・・・ } セル要素およびHeader・Footerの組み立て 基本的なデータ表示や要素配置については従来手法と似ている ✨ セルに反映させるデータについてはHashableである。 Modelの型(例.○○ in △△)で条件分岐する方針等を取る。 UICollectionView.elementKindSectionHeader(Footer) ✨ Header / Footerの区別とSection値の利用は従来通り。
- 11. // 1. Itemのサイズ設定 let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1)) let item = NSCollectionLayoutItem(layoutSize: itemSize) item.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 6, bottom: 0, trailing: 6) // 2. Groupのサイズ設定 // MEMO: 1列に表示するカラム数を1として設定し、itemのサイズがgroupのサイズで決定する形にしている let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(160), heightDimension: .absolute(40)) let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitem: item, count: 1) // 3. Sectionのサイズ設定 let section = NSCollectionLayoutSection(group: group) // MEMO: HeaderとFooterのレイアウトを決定する let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(65)) let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top) let footerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(28)) let footer = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: footerSize, elementKind: UICollectionView.elementKindSectionFooter, alignment: .bottom) section.boundarySupplementaryItems = [header, footer] section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 6, bottom: 16, trailing: 6) // MEMO: スクロール終了時に水平方向のスクロールが可能で速度が0になった位置で止まる section.orthogonalScrollingBehavior = .continuousGroupLeadingBoundary return section まずはベーシックな例を考えてみましょう 下記のような感じでセクションのレイアウトを組み立てる
- 12. // MEMO: 該当のセルを基準にした高さの予測値を設定する let estimatedHeight = UIScreen.main.bounds.width * 0.5 + 180.0 // 1. Itemのサイズ設定 let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(estimatedHeight)) let item = NSCollectionLayoutItem(layoutSize: itemSize) item.contentInsets = .zero // 2. Groupのサイズ設定 let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(estimatedHeight)) let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item]) group.contentInsets = .zero // 3. Sectionのサイズ設定 let section = NSCollectionLayoutSection(group: group) section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 16, trailing: 0) return section Instagramのフィード表示のようなDynamicHeightSizing ItemとGroupの幅を画面いっぱい・高さを予測値に設定する点がポイント (1) widthDimension: .fractionalWidth(1) (3) contentInset = .zero (2) heightDimension: .estimated(X) [ X: セル高さ予測値 ] (4) group.vertical(layoutSize: groupSize, subitems: [item]) 押さえたいポイント
- 13. Instagramの写真表示のようなMosaicLayout Groupを入れ子にして左に幅2/3の正方形を1つ & 幅1/3の正方形を縦に2つ // 1. Itemのサイズ設定 // MEMO: 全体幅2/3の正方形を作るために左側の幅を.fractionalWidth(0.67)に決める let twoThirdItemSet = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.67), heightDimension: .fractionalHeight(1))) twoThirdItemSet.contentInsets = NSDirectionalEdgeInsets(top: 0.5, leading: 0.5, bottom: 0.5, trailing: 0.5) // MEMO: 右側に全体幅1/3の正方形を2つ作るために高さを.fractionalHeight(0.5)に決める let oneThirdItem = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(0.5))) oneThirdItem.contentInsets = NSDirectionalEdgeInsets(top: 0.5, leading: 0.5, bottom: 0.5, trailing: 0.5) // MEMO: 1列に表示するカラム数を2として設定し、Group内のアイテムの幅を1/3の正方形とするためにGroup内の幅を.fractionalWidth(0.33) に決める let oneThirdItemSet = NSCollectionLayoutGroup.vertical(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.33), heightDimension: .fractionalHeight(1)), subitem: oneThirdItem, count: 2) // 2. Groupのサイズ設定 // MEMO: leadingItem(左側へ表示するアイテム1つ)とtrailingGroup(右側へ表示するアイテム2個のグループ1個)を合わせる let group = NSCollectionLayoutGroup.horizontal(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(0.33)), subitems: [twoThirdItemSet, oneThirdItemSet]) https://github.com/zenangst/Blueprints（同様な表現をするライブラリ）Blueprints: UICollectionViewCompositionalLayoutを利用しない場合
- 15. セルに表示するデータの更新と反映部分について データ更新はNSDiffableDataSourceSnapshotを利用する snapshot.appendItems(featuredBanners, toSection: .FeaturedBanners) dataSource.apply(snapshot, animatingDifferences: false) ② 受け取ったデータを反映する① データの初期化 // MEMO: NSDiffableDataSourceSnapshotの初期化 snapshot = NSDiffableDataSourceSnapshot<MainSection, AnyHashable>() snapshot.appendSections(MainSection.allCases) for mainSection in MainSection.allCases { snapshot.appendItems([], toSection: mainSection) } dataSource.apply(snapshot, animatingDifferences: false) ⭐ How to use UICollectionViewDiffableDataSource: https://medium.com/flawless-app-stories/how-to-use-uicollectionviewdiffabledatasource-55c60e9d3897 snapshot.appendItems(featuredBanners, toSection: .FeaturedInterviews) dataSource.apply(snapshot, animatingDifferences: false) snapshot.appendItems(newArrivals, toSection: .NewArrivalArticles) dataSource.apply(snapshot, animatingDifferences: false) (1) NSDiffableDataSourceSnapshotに定義したセクションに該当するデータをセットする (2) UICollectionViewDiffableDataSourceのapplyメソッドでDiffableDataSourceSnapshotの内容を反映する データを 受け取る データ反映までの流れ
- 16. Combineを利用したAPI通信処理とUI表示の結合 現在の実務ではModel - ViewModel - ViewControllerの構造を利用 正解かどうかは自信ないけど、慣れた形に似た形にする。 状態更新のリクエスト ViewController ViewModel Model 利用するデータの作成 UI側への変更を伝える 利用するデータの受取 ⭐ Kickstarter-iOS でも利用している Input / Output のアプローチ https://tech.mercari.com/entry/2019/06/12/120000 APIRequestManager https://qiita.com/muukii/items/045b12405f7acff1a9fd // RxSwift: viewModel.inputs.fetchFeaturedBannersTrigger.onNext(()) // Combine: viewModel.inputs.fetchFeaturedBannersTrigger.send() // RxSwift: viewModel.outputs.newArrivals.drive(onNext: { … 後続処理 … }) // Combine: viewModel.outputs.newArrivals.subscribe(on: RunLoop.main).sink( … 後続処理 … ) Inputs Outputs
- 17. Combineを利用したAPI通信部分の処理 今回はAPIのリクエストを一度だけ発行する形にする private func handleSessionTask<T: Decodable & Hashable>(_ dataType: T.Type, request: URLRequest) -> Future<[T], APIError> { return Future { promise in let task = URLSession.shared.dataTask(with: request) { data, response, error in ・・・（APIからのエラーレスポンスやステータスコードを元にしたエラーハンドリング）・・・ → 例. promise(.failure(APIError.error(“エラー発生時のメッセージを引き渡す"))) do { let hashableObjects = try JSONDecoder().decode([T].self, from: data) promise(.success(hashableObjects)) } catch { promise(.failure(APIError.error(error.localizedDescription))) } } task.resume() } } ⭐ [Swift] はじめてのCombine | Apple製の非同期フレームワークを使ってみよう: https://dev.classmethod.jp/smartphone/swift-combine-framework-for-beginners/ Futureを利用して1度だけ値を発行して終了する形にする https://developer.apple.com/documentation/combine/future 実装におけるポイント リクエスト用のURLとDecodable / Hashableを適用した 表示用Modelの型を設定する形にする。 → RxSwiftの「Single<T>」と似ている感じ
- 18. このサンプルにおけるViewModel構造と値の関係 InputのfetchArticlesTriggerが実行されるとOutputの変数が更新される // MARK: - MainViewModelType var inputs: MainViewModelInputs { return self } var outputs: MainViewModelOutputs { return self } // MARK: - MainViewModelInputs let fetchArticlesTrigger = PassthroughSubject<Void, Never>() // MARK: - MainViewModelOutputs var articles: AnyPublisher<[Article], Never> { return $_articles.eraseToAnyPublisher() } // MARK: - @Published @Published private var _articles: [Article] = [] // MARK: - Initializer init(api: APIRequestManagerProtocol) { ・・・（途中省略）・・・ fetchArticlesTrigger .sink(receiveValue: { [weak self] in self?.fetchArticles() }) .store(in: &cancellables) } } private func fetchArticles() { api.getArticles() .receive(on: RunLoop.main) .sink( receiveCompletion: { completion in switch completion { case .failure(let error): print("error getArticles(): (error.localizedDescription)") } }, receiveValue: { [weak self] hashableObjects in print(hashableObjects) self?._articles = hashableObjects } ) .store(in: &cancellables) } } APIからのデータ取得と内部変数への反映を行うInputとリクエスト処理の結合※ BehaviorRelayのような感じの結合 @Publishedの値を変換しOutPutを更新
- 19. ViewControllerでのデータの更新と反映に関する流れ ViewModelで受け取った値をNSDiffableDataSourceSnapshot反映させる // ViewModelのOutputsを経由した特集データの取得とNSDiffableDataSourceSnapshotの入れ替え処理 viewModel.outputs.articles .subscribe(on: RunLoop.main) .sink( receiveValue: { [weak self] articles in guard let self = self else { return } self.snapshot.appendItems(articles, toSection: .FeaturedArticles) self.dataSource.apply(self.snapshot, animatingDifferences: false) } ) .store(in: &cancellables) override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) // MEMO: ViewModelのInputsを経由したAPIでのデータ取得処理を実行する viewModel.inputs.fetchArticlesTrigger.send() ・・・（省略）・・・ } ② APIへのデータリクエストを実行① データの初期化 ③ 取得できたレスポンスを反映する // MEMO: NSDiffableDataSourceSnapshotの初期化 snapshot = NSDiffableDataSourceSnapshot<MainSection, AnyHashable>() snapshot.appendSections(MainSection.allCases) for mainSection in MainSection.allCases { snapshot.appendItems([], toSection: mainSection) } dataSource.apply(snapshot, animatingDifferences: false) ViewModelへ命令を送る・ViewModelから値を受け取 る処理をCombineでつなぎ、 ・UICollectionViewDiffableDataSource ・NSDiffableDataSourceSnapshot を更新する形としている点。 この処理のポイント ※Outputs ※Inputs
- 20. 参考資料(1) UICollectionViewCompositionalLayoutと関連処理の参考 https://jayeshkawli.ghost.io/new-collection-view-apis-composite-layout/ https://www.raywenderlich.com/5436806-modern-collection-views-with-compositional-layouts ⭐ 時代の変化に応じて進化するCollectionView ~Compositional LayoutsとDiffable Data Sources~: https://qiita.com/shiz/items/a6032543a237bf2e1d19 ⭐ Modern Collection Views with Compositional Layouts: https://medium.com/shopback-engineering/move-your-cells-left-to-right-up-and-down-on-ios-13-part-1-1a5e010f48f9 ⭐ Move your cells left to right, up and down on iOS 13: https://medium.com/shopback-engineering/move-your-cells-left-to-right-up-and-down-on-ios-13-part-2-fbc430802227 ⭐ New Collection View APIs in iOS 13 - UICollectionView Compositional Layout:
- 21. 参考資料(2) Combine & MVVMパターン関連処理の参考 https://github.com/mcichecki/Combine-MVVM https://medium.com/@alfianlosari/fetching-remote-async-api-with-apple-combine-framework-f7c067c7bb3 ⭐ Problem Solving with Combine Swift: https://medium.com/flawless-app-stories/problem-solving-with-combine-swift-4751885fda77 ⭐ Fetching Remote Async API with Apple Combine Framework: ⭐ Combineを利用したSwiftUI・UIKitのどちらにも対応するUnidirectionalな設計を実現するには: https://speakerdeck.com/martysuzuki/combinewoli-yong-sitaswiftuiuikitfalsedotiranimodui-ying- suruunidirectionalnashe-ji-woshi-xian-suruniha ⭐ Combine-MVVM (Github Repository):
- 22. まとめ 改めて自分で色々検証してみた中で便利さを感じる部分が多かった。 1. 苦戦しやすいUICollectionViewLayoutの実装が更に扱いやすくなっている： 従来のUICollectionViewLayoutを継承した上でLayoutAttributesの値をレイアウトを満たすように調整するためのロジックを書 くよりもシンプルかつ直感的な印象を持った。 2. 使いこなすポイントとなりそうなのは「レイアウトの設定方法」と「データ反映処理」の2点： UICollectionViewCompositionalLayoutのレイアウト設定方法や更新方法が変わっているが、UICollectionViewで複雑な実装をす る際に泣き所になっている部分が強力にサポートされていたので今後積極的に使っていきたい。 まだまだ作りながら、試しながらを続けていこうと思います。 3. CombineもRxSwift等とイメージ比較して考えられる部分もあった： 今回はRxSwiftでの構成を元に置き換えてみたが当初よりもイメージが少し具体的になった気がする。