作って学ぶ! CollectionViewLayoutの変化

iOS12までのCollectionView UICollectionView FlowLayout つかいにくくない？

例えば... AppStore風のこんなレイアウト... UICollectionViewFlowLayoutなら どう作る？

例えば... UITableView UITableViewHeader UITableViewHeader UITableViewCell UICollectionView(Tag:1) UICollectionViewCell UITableViewCell UICollectionView(Tag:2) UICollectionViewCell UICollectionViewCell UICollectionViewCell CollectionView in TableViewで実現 しかしこの方法には問題が・・・ - 実データとレイアウト上のデータのマッチ ングが直感的ではない - 左右に次のアイテムが表示される レイアウトを実現するにはさらに 一工夫いる (scrollViewWillEndDraggingで 停止位置を計算など) - Cellのサイズ計算が面倒臭い etc.

例えば... どんどん複雑化していく レイアウトに対応することが難し くなってきている

そこで登場！ Compositional Layouts

Compositional Layoutsとは？ 以下の方法でレイアウトを構成する CollectionViewの新しいレイアウト - 小さいLayoutをGroup化する - Group化の繰り返しで大きなレイアウトを 構成する

Compositional Layoutsとは？ どういうこと？

Compositional Layoutsとは？ Layout Section Group Item Group Item Item Section Group - Layout：レイアウトの全体 複数のセクションを内包する - Section：セクションのレイアウト 1つのGroupを内包する - Group ：Itemのレイアウト 複数のGroupまたはItemを 内包する - Item：CollectionViewCell 実データと対応する

Compositional Layoutsの便利機能 NSCollectionLayoutSize - fractionalWidth, fractionalHeight 　自分を内包しているLayoutのサイズとの比率でサイズ 　を指定する - absolute 　ポイントでサイズを指定する - estimated 　ポイントでサイズを指定するが、優先される制約が 　ある場合はそのサイズになる

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)) こんな感じでいい感じにサイズを調整できる

Compositional Layoutsの便利機能 orthogonalScrollingBehavior Sectionのパラメータで、指定するとSection内のアイテム が縦に追加されず、横スクロールで表示される - .continuous Section内で横スクロールされる - .continuousGroupLeadingBoundary Section内で横スクロールされ、 Groupの左端がSectionの左端に揃うように スクロールが止まる

Compositional Layoutsの便利機能 続き - .paging Section内で横スクロールされ、 画面に表示されている部分単位でpagingされる - .groupPaging Section内で横スクロールされ、 GroupとSectionの左端が揃うようにPagingされる - .groupPagingCentered Section内で横スクロールされ、 GroupがセンタリングされるようにPagingされる

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))

Compositional LayoutsでAppStore風のレイアウト を作る 2.各セクションに1.で作ったレイアウトのうち使いたい ものを設定する 3.すべてのSectionに下の設定をする section.orthogonalScrollingBehavior = .groupPagingCentered

Compositional LayoutsでAppStore風のレイアウト を作る これだけ！

まとめ - iOS13以降では複雑なレイアウトを 組みやすくなる - CollectionViewFlowLayoutの疲弊から みんなで脱却しよう！

おまけ 今回DEMOのために作成したソースを Githubで公開しています。 もしよければ参考にしてください！ マサカリも大歓迎です！ https://github.com/rihitenLab/AppStore LikeLayout