mparrish91 mparrish91 - 5 months ago 368
iOS Question

UICollectionView custom horizontal paging layout

collectionview example

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)

}


Update 6/14

shifted cells
sharetext does not match collectionview

Answer

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)

}