[iOS] - UICollectionViewCompositionalLayout

1901 ワード

これまではUIcollectionViewFlowLayoutを使用してCollectionViewのレイアウトを作成してきました.
しかし、CollectionViewの各部分に異なるレイアウトがある場合、どうすればいいのでしょうか.
1つのビューで複数のCollectionViewを使用できますが、iOS 13から提供されるコンビネーションLayoutを使用することが望ましいです.

複合Layoutとは?


構成可能レイアウトは、高度な実用性と柔軟性を備えたビジュアルアレイにプロジェクトを統合するレイアウトオブジェクトです.
Appleドキュメントショートカット

-複合Layoutの作成



複合Layoutを作成するには、これらのオブジェクトを作成する必要があります.
ここで、主なコンポーネントはitem、group、sectionです.
itemを作成するにはitemsSize、groupを作成するにはgroupSize、sectionにはgroupが必要なので、別々に作成する必要があります.

- Item > Group > Section > Layout



主なコンポーネントがUIに占める領域は次のとおりです.

-1) Item


ItemはCollectionView内の個々のコンテンツのサイズ、スペースなどを表します.

-2) Group


グループは、関連項目を組み合わせて表示する項目です.
グループはItemの子であるため、Itemの[寸法を作成](Create Dimensions)メソッドを使用して寸法を作成するか、スタックビューのようにItemとグループを含めることができます.

-ItemとGroup Sizeの作成方法

  • 絶対値
  • let absoluteSize = NSCollectionLayoutSize(widthDimension: .absolute(44), heightDimension: .absolute(44))
  • Estimate(推定、推定値、コンテンツが複数の要因によって変化する可能性がある場合)
  • let estimate = NSCollectionLayoutSize(widthDimension: .estimated(200), heightDimension: .estimated(100))
  • Fractional(標準値のパーセントで作成、例:コンテナ幅の20%(0.2)に等しい幅と高さ)
  • let fractional = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2), heightDimension: fractionalWidth(0.2)

    -3) Section


    Sectionはグループで構成され、Table ViewとCollectionViewで使用されている部分と同じです.

    -4) Layout


    すべてのコンポーネント(Item、Group、Section)が含まれます.