How to snap horizontal paging to multi-row collection view like App Store?

Question

I would like to replicate the paging in the multi-row App Store collection view:

So far I\'ve designed it as close as possible to the way it looks, including sh

Answer 1

With iOS 13 this became a lot easier!

In iOS 13 you can use a UICollectionViewCompositionalLayout.

This introduces a couple of concepts and I will try to give a gist over here, but I think is worth a lot to understand this!

Concepts

In a CompositionalLayout you have 3 entities that allow you to specify sizes. You can specify sizes using absolute values, fractional values (half, for instance) or estimates. The 3 entities are:

• Item (NSCollectionLayoutItem)

Your cell size. Fractional sizes are relative to the group the item is in and they can consider the width or the height of the parent.

• Group (NSCollectionLayoutGroup)

Groups allow you to create a set of items. In that app store example, a group is a column and has 3 items, so your items should take 0.33 height from the group. Then, you can say that the group takes 300 height, for instance.

• Section(NSCollectionLayoutSection)

Section declares how the group will repeat itself. In this case it is useful for you to say the section will be horizontal.

Creating the layout

You create your layout with a closure that receives a section index and a NSCollectionLayoutEnvironment. This is useful because you can have different layouts per trait (on iPad you can have something different, for instance) and per section index (i.e, you can have 1 section with horizontal scroll and another that just lays out things vertically).

func createCollectionViewLayout() {
   let layout = UICollectionViewCompositionalLayout { sectionIndex, _ in
      return self.createAppsColumnsLayout()
   }

   let config = UICollectionViewCompositionalLayoutConfiguration()
   config.scrollDirection = .vertical
   config.interSectionSpacing = 31

   layout.configuration = config
   return layout
}

The app store example

In the case of the app store you have a really good video by Paul Hudson, from the Hacking with Swift explaining this. He also has a repo with this!

However, I will put here the code so this doesn't get lost:

func createAppsColumnsLayout(using section: Section) -> NSCollectionLayoutSection {
   let itemSize = NSCollectionLayoutSize(
      widthDimension: .fractionalWidth(1), 
      heightDimension: .fractionalHeight(0.33)
   )

   let layoutItem = NSCollectionLayoutItem(layoutSize: itemSize)
   layoutItem.contentInsets = NSDirectionalEdgeInsets(
      top: 0, 
      leading: 5, 
      bottom: 0, 
      trailing: 5
   )

   let layoutGroupSize = NSCollectionLayoutSize(
       widthDimension: .fractionalWidth(0.93),
       heightDimension: .fractionalWidth(0.55)
   )
   let layoutGroup = NSCollectionLayoutGroup.vertical(
      layoutSize: layoutGroupSize, 
      subitems: [layoutItem]
   )

   let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
   layoutSection.orthogonalScrollingBehavior = .groupPagingCentered

   return layoutSection
}

Finally, you just need to set your layout:

collectionView.collectionViewLayout = createCompositionalLayout()

One cool thing that came with UICollectionViewCompositionalLayout is different page mechanisms, such as groupPagingCentered, but I think this answer already is long enough to explain the difference between them