Modern Collection Views with Compositional Layout_1

Basic

these code will generate below picture
a peak of how actual compositional layout work
  1. NSCollectionLayoutSize → set width/height of item size
  2. NSCollectionLayoutItem
  3. NSCollectionLayoutGroup(.horizontal/.vertical)
  4. NSCollectionLayoutSection
  5. UICollectionViewCompositionalLayout
  6. NSDirectionalEdgeInsets → if you want to set inset between item

Groups inside group

there are many layout you can build, like below one, we have 4 items/groups nested inside a large vertical group

like your photo apps, right?
  1. A full width photo.
  2. A ‘main’ photo with a pair of vertically stacked smaller photos.
  3. Three smaller photos in a row.
  4. The reverse of the second style.
  1. 🎯
  2. mainItem → base the item size you want to create check its parent view(mainWithPairGroup), here you want to make it 2/3 of the width and equal height
  3. pairItem → it will be put in the trailingGroup which is a vertical group, equal width and 1/2 of its height
  4. trailingGroup → it will be put in the mainWithPairGroup(horizontal), 1/3 width and same height
  5. mainWithPairGroup → it should be put with width 1:1, and base on first item(fullPhotoItem) height is 2/3 of its width, mainWithPairGroup’s height should be 4/9 of the width(2/3✖️2/3)
You can just look the compose of every items/groups

Notion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store