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
Krauser Huang

Krauser Huang

On my way to become an iOS developer!