trjhtr

I need a collection view to page through cells and center it like the App Store, where a portion of the previous and next cells look like this:

The native isPagingEnabled flag would be great if it had an option to center on the cell. However, making the cell span the full width of the collection view doesn't show previous/next cells, and making the cell width smaller doesn't snap to center when paging.

There are tons of hacks, articles, and suggestions out there that I've tried. Many were overcomplicated or a horrible UX. I finally find a good balance with this example and adjusted the code.

This is the code and scroll delegate event to make this work using a flow layout:

class HomeViewController: UIViewController 

 @IBOutlet weak var collectionView: UICollectionView!

 override func viewDidLoad() 
 super.viewDidLoad()

 collectionView.collectionViewLayout = SnapPagingLayout(
 centerPosition: true,
 peekWidth: 40,
 spacing: 20,
 inset: 16
 )
 

 ...


extension HomeViewController: UICollectionViewDelegate 

 func scrollViewWillBeginDragging(_ scrollView: UIScrollView) 
 guard let layout = collectionView.collectionViewLayout as? SnapPagingLayout else return 
 layout.willBeginDragging()
 

 func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) 
 guard let layout = collectionView.collectionViewLayout as? SnapPagingLayout else return 
 layout.willEndDragging(withVelocity: velocity, targetContentOffset: targetContentOffset)
 



//////////

class SnapPagingLayout: UICollectionViewFlowLayout 
 private var centerPosition = true
 private var peekWidth: CGFloat = 0
 private var indexOfCellBeforeDragging = 0

 convenience init(centerPosition: Bool = true, peekWidth: CGFloat = 40, spacing: CGFloat? = nil, inset: CGFloat? = nil) 
 self.init()

 self.scrollDirection = .horizontal
 self.centerPosition = centerPosition
 self.peekWidth = peekWidth

 if let spacing = spacing 
 self.minimumLineSpacing = spacing
 

 if let inset = inset 
 self.sectionInset = UIEdgeInsets(top: 0, left: inset, bottom: 0, right: inset)
 
 

 override func prepare() 
 super.prepare()

 guard let collectionView = collectionView else return 
 self.itemSize = calculateItemSize(from: collectionView.bounds.size)
 

 override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool 
 guard let collectionView = collectionView,
 !newBounds.size.equalTo(collectionView.bounds.size) else 
 return false
 

 itemSize = calculateItemSize(from: collectionView.bounds.size)
 return true
 


private extension SnapPagingLayout 

 func calculateItemSize(from bounds: CGSize) -> CGSize 
 return CGSize(
 width: bounds.width - peekWidth * 2,
 height: bounds.height
 )
 

 func indexOfMajorCell() -> Int 
 guard let collectionView = collectionView else return 0 

 let proportionalOffset = collectionView.contentOffset.x
 / (itemSize.width + minimumLineSpacing)

 return Int(round(proportionalOffset))
 


extension SnapPagingLayout 

 func willBeginDragging() 
 indexOfCellBeforeDragging = indexOfMajorCell()
 

 func willEndDragging(withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) 

It doesn’t feel as smooth as the App Store (especially when scrolling fast), but it’s almost there. Do you have any suggestions or advice on how to simplify this or improve it?