Search code examples
iosuicollectionviewcelluicollectionviewlayout

UICollectionView custom horizontal paging layout


[![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)

}

Solution

  • 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

    enter image description here

    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)
    
    }