Upgrade to Pro — share decks privately, control downloads, hide ads and more …

作って学ぶ! CollectionViewLayoutの変化

D9247e898a406a0b384dfa1d7d5c435b?s=47 rihitenLab
September 29, 2019

作って学ぶ! CollectionViewLayoutの変化

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

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

D9247e898a406a0b384dfa1d7d5c435b?s=128

rihitenLab

September 29, 2019
Tweet

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