作って学ぶ! CollectionViewLayoutの変化

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