Peek previous/next cells in UICollectionView with native paging enabled?

Question

I want a collection view to page through cells and centered, but display a portion of the previous and next cells like this:

There are tons of hacks out there, but I'd like to achieve this with the native paging property of the UICollectionView. Making the cell 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.

Is is possible to make the collection view 80% of the screen width for example, and let the previous/next cells bleed outside the bounds (no clip to bounds)?

Or any other ideas to achieve this using the native paging?

Answer 1

iOS Swift 4

Use the below two methods to meek the previous and next screens.

private func calculateSectionInset() -> CGFloat {
    let deviceIsIpad = UIDevice.current.userInterfaceIdiom == .pad
    let deviceOrientationIsLandscape = UIDevice.current.orientation.isLandscape
    let cellBodyViewIsExpended = deviceIsIpad || deviceOrientationIsLandscape
    let cellBodyWidth: CGFloat = 236 + (cellBodyViewIsExpended ? 174 : 0)
    let buttonWidth: CGFloat = 50
    let inset = (collectionFlowLayout.collectionView!.frame.width - cellBodyWidth + buttonWidth) / 4
    return inset
}

private func configureCollectionViewLayoutItemSize() {
    let inset: CGFloat = calculateSectionInset() // This inset calculation is some magic so the next and the previous cells will peek from the sides. Don't worry about it
    collectionFlowLayout.sectionInset = UIEdgeInsets(top: 0, left: inset, bottom: 0, right: inset)
    collectionFlowLayout.itemSize = CGSize(width: collectionFlowLayout.collectionView!.frame.size.width - inset * 2, height: collectionFlowLayout.collectionView!.frame.size.height)
}

Don't forget to invoke configureCollectionViewLayoutItemSize() method in viewDidLayoutSubviews() of your UIViewController.

For more detailed reference Click Here