UICollectionView custom horizontal paging layout

Question

[![collectionview example][1]][1]

I am trying to emulate this behavior using a collection view. I have started by working with this method and it has gotten me closer. Although as I swipe further and further right on my horizontal paging CollectionView, the content shifts further and further left. Also the spacing between the cells is off. I believe it requires a custom layout, but am not sure.

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

    return CGSize(width: collectionView.frame.width - 20, height: collectionView.frame.height - 20)

}

Answer 1

it depends on 3 factors 1) Section Insets 2) Cell Spacing 3) Cell Size

Any change in each you have to change others for your case

1) Set left & right with 20

2) set cell spacing to 10

func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 10
}
func collectionView(collectionView: UICollectionView, layout
    collectionViewLayout: UICollectionViewLayout,
    minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 10
}

3) Set cell size

func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSize(width: collectionView.frame.width / 1.15 ,height: collectionView.frame.height)
}

4) this will center cell in screen

func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

    let pageWidth:CGFloat = scrollView.frame.width / 1.15 + cellSpacing ;

    let currentOffset:CGFloat = scrollView.contentOffset.x;
    let targetOffset:CGFloat = targetContentOffset.memory.x
    var newTargetOffset:CGFloat = 0;

    if targetOffset > currentOffset
    {
        newTargetOffset = ceil(currentOffset / pageWidth) * pageWidth;
    }
    else
    {
        newTargetOffset = floor(currentOffset / pageWidth) * pageWidth;
    }

    if newTargetOffset < 0
    {
        newTargetOffset = 0
    }
    else if newTargetOffset > scrollView.contentSize.width
    {
    newTargetOffset = scrollView.contentSize.width;
    }

    targetContentOffset.memory.x = currentOffset

    scrollView.setContentOffset(CGPointMake(newTargetOffset, 0), animated: true)

}

Answer 2

I've changed a bit @Mohamed's solution and it worked perfectly for me:

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

    let cellSpacing: CGFloat = self.collectionView(self.collectionView, layout: self.collectionView.collectionViewLayout, minimumInteritemSpacingForSectionAt: 0)
    let pageWidth: CGFloat = self.pageWidth + cellSpacing

    let currentOffset = scrollView.contentOffset.x
    let targetOffset = targetContentOffset.pointee.x
    targetContentOffset.pointee.x = currentOffset

    var pageNumber = 0
    if targetOffset > currentOffset {
        pageNumber = Int(ceil(currentOffset / pageWidth))
    }
    else {
        pageNumber = Int(floor(currentOffset / pageWidth))
    }

    let indexPath = IndexPath(row: pageNumber, section: 0)
    self.collectionView.scrollToItem(at: indexPath, at: UICollectionView.ScrollPosition.centeredHorizontally, animated: true)
}