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)

}

what is the actual question here ? – Shubhank Jun 05 '16 at 05:46 — Shubhank, Jun 05 '16 at 05:46

Mohamed Mostafa · Accepted Answer · 2016-06-09T02:09:03.633

8

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)

}

edited Jun 09 '16 at 02:09

answered Jun 05 '16 at 06:04

Mohamed Mostafa

1,057
7
12

http://stackoverflow.com/questions/19301762/uicollectionview-horizontal-scroll-horizontal-layout – Preetha Jun 06 '16 at 11:17
how did you come up with 1.15? – mparrish91 Jun 06 '16 at 19:33
it's about 85% of collectionView width – Mohamed Mostafa Jun 07 '16 at 01:24
thanks its working well now. my only thing now is when you swipe on the cells, they gradually move further and further left. The text label isn't fully visible as half of the cell becomes hidden. Any tips on how I can have the cells reload at the same position or is that counter to this entire setup? – mparrish91 Jun 08 '16 at 23:28
please check edited answer i've added the solution to cells shifting left – Mohamed Mostafa Jun 09 '16 at 02:09
thanks again man, so your centering it after its done accelerating – mparrish91 Jun 10 '16 at 22:12
appreciate it my last question is how do the section insets and minimum spacing relate? don't quite understand the relationship between the 20 in section insets and the 10 on minimum – mparrish91 Jun 10 '16 at 22:39
This is the space before first cell which will be cell spacing (10) + the part that will be shown from the previous cell if it has. – Mohamed Mostafa Jun 10 '16 at 23:35
ok so if I made my left inset 23 and right 18, what should i make my minimum line and interim spacing? sorry just didn't quite get it – mparrish91 Jun 11 '16 at 00:24
so perfect solution – Farzad Dec 27 '18 at 08:58

score 0 · Answer 2 · answered May 08 '19 at 01:13

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

UICollectionView custom horizontal paging layout

2 Answers2

Linked