作って学ぶ! CollectionViewLayoutの変化

下記勉強会で使用した資料の公開版です

【YUMEMI.swift #3 ~俺/私がやったiOS 13対応~】
https://yumemi.connpass.com/event/142608/

Transcript

1. 作って学ぶ! CollectionViewLayoutの変化
2. iOS12までのCollectionView UICollectionView FlowLayout つかいにくくない？
3. 例えば... AppStore風のこんなレイアウト... UICollectionViewFlowLayoutなら どう作る？
4. 例えば... UITableView UITableViewHeader UITableViewHeader UITableViewCell UICollectionView(Tag:1) UICollectionViewCell UITableViewCell UICollectionView(Tag:2) UICollectionViewCell UICollectionViewCell UICollectionViewCell CollectionView in TableViewで実現 しかしこの方法には問題が・・・ - 実データとレイアウト上のデータのマッチ ングが直感的ではない - 左右に次のアイテムが表示される レイアウトを実現するにはさらに 一工夫いる (scrollViewWillEndDraggingで 停止位置を計算など) - Cellのサイズ計算が面倒臭い etc.
5. 例えば... どんどん複雑化していく レイアウトに対応することが難し くなってきている
6. そこで登場！ Compositional Layouts
7. Compositional Layoutsとは？ 以下の方法でレイアウトを構成する CollectionViewの新しいレイアウト - 小さいLayoutをGroup化する - Group化の繰り返しで大きなレイアウトを 構成する
8. Compositional Layoutsとは？ どういうこと？
9. Compositional Layoutsとは？ Layout Section Group Item Group Item Item Section Group - Layout：レイアウトの全体 複数のセクションを内包する - Section：セクションのレイアウト 1つのGroupを内包する - Group ：Itemのレイアウト 複数のGroupまたはItemを 内包する - Item：CollectionViewCell 実データと対応する
10. Compositional Layoutsの便利機能 NSCollectionLayoutSize - fractionalWidth, fractionalHeight 　自分を内包しているLayoutのサイズとの比率でサイズ 　を指定する - absolute 　ポイントでサイズを指定する - estimated 　ポイントでサイズを指定するが、優先される制約が 　ある場合はそのサイズになる
11. Compositional Layoutsの便利機能 Group(width: fractionalWidth(1.0), height: fractionalHeight(1.0)) Item(width: fractionalWidth(0.8), height: fractionalHeight(0.4)) Group(width: fractionalWidth(0.8), height: fractionalHeight(0.4)) Item (width: fractionalWidth(0.4), height: fractionalHeight(1.0)) Item (width: fractionalWidth(0.4), height: fractionalHeight(1.0)) こんな感じでいい感じにサイズを調整できる
12. Compositional Layoutsの便利機能 orthogonalScrollingBehavior Sectionのパラメータで、指定するとSection内のアイテム が縦に追加されず、横スクロールで表示される - .continuous Section内で横スクロールされる - .continuousGroupLeadingBoundary Section内で横スクロールされ、 Groupの左端がSectionの左端に揃うように スクロールが止まる
13. Compositional Layoutsの便利機能 続き - .paging Section内で横スクロールされ、 画面に表示されている部分単位でpagingされる - .groupPaging Section内で横スクロールされ、 GroupとSectionの左端が揃うようにPagingされる - .groupPagingCentered Section内で横スクロールされ、 GroupがセンタリングされるようにPagingされる
14. Compositional LayoutsでAppStore風のレイアウト を作る Group (width: fractionalWidth(1.0), height: fractionalHeight(1.0)) Item(width: fractionalWidth(0.8), height: fractionalHeight(0.8)) 1.下の二つのGroupを用意する Group (width: fractionalWidth(1.0), height: fractionalHeight(1.0)) Item(width: fractionalWidth(0.8), height: fractionalHeight(0.3)) Item(width: fractionalWidth(0.8), height: fractionalHeight(0.3)) Item(width: fractionalWidth(0.8), height: fractionalHeight(0.3))
15. Compositional LayoutsでAppStore風のレイアウト を作る 2.各セクションに1.で作ったレイアウトのうち使いたい ものを設定する 3.すべてのSectionに下の設定をする section.orthogonalScrollingBehavior = .groupPagingCentered
16. Compositional LayoutsでAppStore風のレイアウト を作る これだけ！
17. まとめ - iOS13以降では複雑なレイアウトを 組みやすくなる - CollectionViewFlowLayoutの疲弊から みんなで脱却しよう！
18. おまけ 今回DEMOのために作成したソースを Githubで公開しています。 もしよければ参考にしてください！ マサカリも大歓迎です！ https://github.com/rihitenLab/AppStore LikeLayout