108

I've got a very simple collectionView in my app (just a single row of square thumbnail images).

I'd like to intercept the scrolling so that the offset always leaves a full image at the left side. At the moment it scrolls to wherever and will leave cut off images.

Anyway, I know I need to use the function

- (CGPoint)targetContentOffsetForProposedContentOffset:withScrollingVelocity

to do this but I'm just using a standard UICollectionViewFlowLayout. I'm not subclassing it.

Is there any way of intercepting this without subclassing UICollectionViewFlowLayout?

Thanks

20 Answers 20

119

OK, answer is no, there is no way to do this without subclassing UICollectionViewFlowLayout.

However, subclassing it is incredibly easy for anyone who is reading this in the future.

First I set up the subclass call MyCollectionViewFlowLayout and then in interface builder I changed the collection view layout to Custom and selected my flow layout subclass.

Because you're doing it this way you can't specify items sizes, etc... in IB so in MyCollectionViewFlowLayout.m I have this...

- (void)awakeFromNib
{
    self.itemSize = CGSizeMake(75.0, 75.0);
    self.minimumInteritemSpacing = 10.0;
    self.minimumLineSpacing = 10.0;
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    self.sectionInset = UIEdgeInsetsMake(10.0, 10.0, 10.0, 10.0);
}

This sets up all the sizes for me and the scroll direction.

Then ...

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    CGFloat offsetAdjustment = MAXFLOAT;
    CGFloat horizontalOffset = proposedContentOffset.x + 5;

    CGRect targetRect = CGRectMake(proposedContentOffset.x, 0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);

    NSArray *array = [super layoutAttributesForElementsInRect:targetRect];

    for (UICollectionViewLayoutAttributes *layoutAttributes in array) {
        CGFloat itemOffset = layoutAttributes.frame.origin.x;
        if (ABS(itemOffset - horizontalOffset) < ABS(offsetAdjustment)) {
            offsetAdjustment = itemOffset - horizontalOffset;
        }
    }

    return CGPointMake(proposedContentOffset.x + offsetAdjustment, proposedContentOffset.y);
}

This ensures that the scrolling ends with a margin of 5.0 on the left hand edge.

That's all I needed to do. I didn't need to set the flow layout in code at all.

14
  • 1
    It is really powerful when used properly. Have you watched the Collection View sessions from WWDC 2012? They are really worth watching. Some incredible stuff.
    – Fogmeister
    Commented Jan 29, 2013 at 16:13
  • 2
    targetContentOffsetForProposedContentOffset:withVelocity isn't being called for me when I scroll. What's going on?
    – fatuhoku
    Commented May 21, 2014 at 15:05
  • 4
    @TomSawyer set the UICollectionView's declaration rate to UIScrollViewDecelerationRateFast.
    – Clay Ellis
    Commented Dec 25, 2015 at 6:35
  • 4
    @fatuhoku make sure that your collectionView's paginEnabled property is set to false
    – chrs
    Commented Apr 14, 2016 at 17:32
  • 4
    Holy Moly, I had to scroll down like a million miles to see this answer. :) Commented Jan 26, 2018 at 22:28
66

Dan's solution is flawed. It does not handle user flicking well. The cases when user flicks fast and scroll did not move so much, have animation glitches.

My proposed alternative implementation has the same pagination as proposed before, but handles user flicking between pages.

 #pragma mark - Pagination
 - (CGFloat)pageWidth {
     return self.itemSize.width + self.minimumLineSpacing;
 }

 - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
 {           
        CGFloat rawPageValue = self.collectionView.contentOffset.x / self.pageWidth;
        CGFloat currentPage = (velocity.x > 0.0) ? floor(rawPageValue) : ceil(rawPageValue);
        CGFloat nextPage = (velocity.x > 0.0) ? ceil(rawPageValue) : floor(rawPageValue);

        BOOL pannedLessThanAPage = fabs(1 + currentPage - rawPageValue) > 0.5;
        BOOL flicked = fabs(velocity.x) > [self flickVelocity];
        if (pannedLessThanAPage && flicked) {
            proposedContentOffset.x = nextPage * self.pageWidth;
        } else {
            proposedContentOffset.x = round(rawPageValue) * self.pageWidth;
        }

        return proposedContentOffset;
 }

 - (CGFloat)flickVelocity {
     return 0.3;
 }
11
  • Thank you! This worked like a charm. A little hard to understand but getting there. Commented May 28, 2014 at 18:11
  • I'm having this error: Cannot assign to 'x' in 'proposedContentOffset' ? Using swift? how can i assign to x value?
    – TomSawyer
    Commented Sep 29, 2014 at 11:09
  • @TomSawyer Params are 'let' by default. Try to declare function as this in Swift (using var before param): override func targetContentOffsetForProposedContentOffset(var proposedContentOffset: CGPoint) -> CGPoint
    – DarthMike
    Commented Sep 29, 2014 at 12:58
  • 1
    You can't use CGPointMake in swift. I personally used this: "var targetContentOffset: CGPoint if pannedLessThanAPage && flicked { targetContentOffset = CGPoint(x: nextPage * pageWidth(), y: proposedContentOffset.y); } else { targetContentOffset = CGPoint(x: round(rawPageValue) * pageWidth(), y: proposedContentOffset.y); } return proposedContentOffset"
    – Plot
    Commented Oct 24, 2014 at 9:09
  • 1
    It should be the selected answer.
    – khunshan
    Commented Nov 9, 2016 at 16:09
34

Swift version of the accepted answer.

override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
    var offsetAdjustment = CGFloat.greatestFiniteMagnitude
    let horizontalOffset = proposedContentOffset.x
    let targetRect = CGRect(origin: CGPoint(x: proposedContentOffset.x, y: 0), size: self.collectionView!.bounds.size)

    for layoutAttributes in super.layoutAttributesForElements(in: targetRect)! {
        let itemOffset = layoutAttributes.frame.origin.x
        if (abs(itemOffset - horizontalOffset) < abs(offsetAdjustment)) {
            offsetAdjustment = itemOffset - horizontalOffset
        }
    }

    return CGPoint(x: proposedContentOffset.x + offsetAdjustment, y: proposedContentOffset.y)
}    

Valid for Swift 5.

6
  • This version works great, and it works well for Y axis too if you swap the code around.
    – Chris
    Commented Mar 17, 2016 at 14:43
  • 1
    Mostly works great here. But if I stop scrolling, and lift my finger (carefully), it won't scroll to any page and just stop there. Commented Mar 21, 2016 at 12:04
  • @ChristianA.Strømmen Weird, It works just fine with my app. Commented Mar 22, 2016 at 14:21
  • 3
    @Jay You need to subclass UICollectionViewLayout or any class that already subclass it (e.g. UICollectionViewFlowLayout). Commented Apr 25, 2016 at 17:52
  • 1
    for anyone who needs to know how to use this just create a subclass named something like class SnapLayout: UICollectionFlowLayout { ...add the code from the answer here }. When you create the layout for your collectionView use let layout = SnapLayout() and let collectionView = UICollectionView(frame: yourFrame, collectionViewLayout: layout) Commented Jun 24, 2021 at 2:46
32

Here's my implementation in Swift 5 for vertical cell-based paging:

override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {

    guard let collectionView = self.collectionView else {
        let latestOffset = super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
        return latestOffset
    }

    // Page height used for estimating and calculating paging.
    let pageHeight = self.itemSize.height + self.minimumLineSpacing

    // Make an estimation of the current page position.
    let approximatePage = collectionView.contentOffset.y/pageHeight

    // Determine the current page based on velocity.
    let currentPage = velocity.y == 0 ? round(approximatePage) : (velocity.y < 0.0 ? floor(approximatePage) : ceil(approximatePage))

    // Create custom flickVelocity.
    let flickVelocity = velocity.y * 0.3

    // Check how many pages the user flicked, if <= 1 then flickedPages should return 0.
    let flickedPages = (abs(round(flickVelocity)) <= 1) ? 0 : round(flickVelocity)

    let newVerticalOffset = ((currentPage + flickedPages) * pageHeight) - collectionView.contentInset.top

    return CGPoint(x: proposedContentOffset.x, y: newVerticalOffset)
}

Some notes:

  • Doesn't glitch
  • SET PAGING TO FALSE! (otherwise this won't work)
  • Allows you to set your own flickvelocity easily.
  • If something is still not working after trying this, check if your itemSize actually matches the size of the item as that's often a problem, especially when using collectionView(_:layout:sizeForItemAt:), use a custom variable with the itemSize instead.
  • This works best when you set self.collectionView.decelerationRate = UIScrollView.DecelerationRate.fast.

Here's a horizontal version (haven't tested it thoroughly so please forgive any mistakes):

override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {

    guard let collectionView = self.collectionView else {
        let latestOffset = super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
        return latestOffset
    }

    // Page width used for estimating and calculating paging.
    let pageWidth = self.itemSize.width + self.minimumInteritemSpacing

    // Make an estimation of the current page position.
    let approximatePage = collectionView.contentOffset.x/pageWidth

    // Determine the current page based on velocity.
    let currentPage = velocity.x == 0 ? round(approximatePage) : (velocity.x < 0.0 ? floor(approximatePage) : ceil(approximatePage))

    // Create custom flickVelocity.
    let flickVelocity = velocity.x * 0.3

    // Check how many pages the user flicked, if <= 1 then flickedPages should return 0.
    let flickedPages = (abs(round(flickVelocity)) <= 1) ? 0 : round(flickVelocity)

    // Calculate newHorizontalOffset.
    let newHorizontalOffset = ((currentPage + flickedPages) * pageWidth) - collectionView.contentInset.left

    return CGPoint(x: newHorizontalOffset, y: proposedContentOffset.y)
}

This code is based on the code I use in my personal project, you can check it out here by downloading it and running the Example target.

6
  • 5
    You are the life saviour! Important to note to SET PAGING TO FALSE!!! Lost like 2 hours of my life fixing your function, which already works ...
    – denis631
    Commented Aug 22, 2018 at 16:23
  • @denis631 I'm so sorry! I should've added that, I'll edit the post to reflect this! Glad it worked :)
    – JoniVR
    Commented Aug 22, 2018 at 19:04
  • jesssus, i was wondering why this isn't working until i saw this comment about disabling paging... of course mine was set to true
    – klapinski
    Commented Jul 26, 2019 at 12:52
  • 2
    @JoniVR this works but I notice if I scroll really fast it won't snap to the next cell, it just scrolls to the next 'set' of cells. Why is that? Commented Jun 24, 2021 at 3:04
  • 1
    @LanceSamaria guess this is a bit late, but one would have to set the UICollectionView's declaration rate to UIScrollViewDecelerationRateFast. (or fastin swift 5)
    – ambassador
    Commented Jan 17, 2023 at 16:15
29

For anyone looking for a solution that...

  • DOES NOT GLITCH when the user performs a short fast scroll (i.e. it considers positive and negative scroll velocities)
  • takes the collectionView.contentInset (and safeArea on iPhone X) into consideration
  • only considers thoes cells visible at the point of scrolling (for peformance)
  • uses well named variables and comments
  • is Swift 4

then please see below...

public class CarouselCollectionViewLayout: UICollectionViewFlowLayout {

    override public func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {

        guard let collectionView = collectionView else {
            return super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
        }

        // Identify the layoutAttributes of cells in the vicinity of where the scroll view will come to rest
        let targetRect = CGRect(origin: proposedContentOffset, size: collectionView.bounds.size)
        let visibleCellsLayoutAttributes = layoutAttributesForElements(in: targetRect)

        // Translate those cell layoutAttributes into potential (candidate) scrollView offsets
        let candidateOffsets: [CGFloat]? = visibleCellsLayoutAttributes?.map({ cellLayoutAttributes in
            if #available(iOS 11.0, *) {
                return cellLayoutAttributes.frame.origin.x - collectionView.contentInset.left - collectionView.safeAreaInsets.left - sectionInset.left
            } else {
                return cellLayoutAttributes.frame.origin.x - collectionView.contentInset.left - sectionInset.left
            }
        })

        // Now we need to work out which one of the candidate offsets is the best one
        let bestCandidateOffset: CGFloat

        if velocity.x > 0 {
            // If the scroll velocity was POSITIVE, then only consider cells/offsets to the RIGHT of the proposedContentOffset.x
            // Of the cells/offsets to the right, the NEAREST is the `bestCandidate`
            // If there is no nearestCandidateOffsetToLeft then we default to the RIGHT-MOST (last) of ALL the candidate cells/offsets
            //      (this handles the scenario where the user has scrolled beyond the last cell)
            let candidateOffsetsToRight = candidateOffsets?.toRight(ofProposedOffset: proposedContentOffset.x)
            let nearestCandidateOffsetToRight = candidateOffsetsToRight?.nearest(toProposedOffset: proposedContentOffset.x)
            bestCandidateOffset = nearestCandidateOffsetToRight ?? candidateOffsets?.last ?? proposedContentOffset.x
        }
        else if velocity.x < 0 {
            // If the scroll velocity was NEGATIVE, then only consider cells/offsets to the LEFT of the proposedContentOffset.x
            // Of the cells/offsets to the left, the NEAREST is the `bestCandidate`
            // If there is no nearestCandidateOffsetToLeft then we default to the LEFT-MOST (first) of ALL the candidate cells/offsets
            //      (this handles the scenario where the user has scrolled beyond the first cell)
            let candidateOffsetsToLeft = candidateOffsets?.toLeft(ofProposedOffset: proposedContentOffset.x)
            let nearestCandidateOffsetToLeft = candidateOffsetsToLeft?.nearest(toProposedOffset: proposedContentOffset.x)
            bestCandidateOffset = nearestCandidateOffsetToLeft ?? candidateOffsets?.first ?? proposedContentOffset.x
        }
        else {
            // If the scroll velocity was ZERO we consider all `candidate` cells (regarless of whether they are to the left OR right of the proposedContentOffset.x)
            // The cell/offset that is the NEAREST is the `bestCandidate`
            let nearestCandidateOffset = candidateOffsets?.nearest(toProposedOffset: proposedContentOffset.x)
            bestCandidateOffset = nearestCandidateOffset ??  proposedContentOffset.x
        }

        return CGPoint(x: bestCandidateOffset, y: proposedContentOffset.y)
    }

}

fileprivate extension Sequence where Iterator.Element == CGFloat {

    func toLeft(ofProposedOffset proposedOffset: CGFloat) -> [CGFloat] {

        return filter() { candidateOffset in
            return candidateOffset < proposedOffset
        }
    }

    func toRight(ofProposedOffset proposedOffset: CGFloat) -> [CGFloat] {

        return filter() { candidateOffset in
            return candidateOffset > proposedOffset
        }
    }

    func nearest(toProposedOffset proposedOffset: CGFloat) -> CGFloat? {

        guard let firstCandidateOffset = first(where: { _ in true }) else {
            // If there are no elements in the Sequence, return nil
            return nil
        }

        return reduce(firstCandidateOffset) { (bestCandidateOffset: CGFloat, candidateOffset: CGFloat) -> CGFloat in

            let candidateOffsetDistanceFromProposed = fabs(candidateOffset - proposedOffset)
            let bestCandidateOffsetDistancFromProposed = fabs(bestCandidateOffset - proposedOffset)

            if candidateOffsetDistanceFromProposed < bestCandidateOffsetDistancFromProposed {
                return candidateOffset
            }

            return bestCandidateOffset
        }
    }
}
8
  • 1
    Thanks! just copied&pasted, working perfectly.. way better as expected.
    – Steven B.
    Commented Apr 12, 2018 at 11:25
  • 1
    One and only solution that actually works. Nice job! Thanks!
    – LinusG.
    Commented Dec 9, 2018 at 18:51
  • 1
    return cellLayoutAttributes.frame.origin.x - collectionView.contentInset.left - collectionView.safeAreaInsets.left candidateOffsets - sectionInset.left there is a problem in this line Commented Dec 24, 2018 at 2:23
  • 1
    @Dalmaz thanks for notifying me. I have fixed the issue now. Commented Dec 24, 2018 at 8:25
  • 1
    Yep, just copied&pasted, you save my time.
    – Wei
    Commented Dec 11, 2019 at 2:21
22

While this answer has been a great help to me, there is a noticeable flicker when you swipe fast on a small distance. It's much easier to reproduce it on the device.

I found that this always happens when collectionView.contentOffset.x - proposedContentOffset.x and velocity.x have different sings.

My solution was to ensure that proposedContentOffset is more than contentOffset.x if velocity is positive, and less if it is negative. It's in C# but should be fairly simple to translate to Objective C:

public override PointF TargetContentOffset (PointF proposedContentOffset, PointF scrollingVelocity)
{
    /* Determine closest edge */

    float offSetAdjustment = float.MaxValue;
    float horizontalCenter = (float) (proposedContentOffset.X + (this.CollectionView.Bounds.Size.Width / 2.0));

    RectangleF targetRect = new RectangleF (proposedContentOffset.X, 0.0f, this.CollectionView.Bounds.Size.Width, this.CollectionView.Bounds.Size.Height);
    var array = base.LayoutAttributesForElementsInRect (targetRect);

    foreach (var layoutAttributes in array) {
        float itemHorizontalCenter = layoutAttributes.Center.X;
        if (Math.Abs (itemHorizontalCenter - horizontalCenter) < Math.Abs (offSetAdjustment)) {
            offSetAdjustment = itemHorizontalCenter - horizontalCenter;
        }
    }

    float nextOffset = proposedContentOffset.X + offSetAdjustment;

    /*
     * ... unless we end up having positive speed
     * while moving left or negative speed while moving right.
     * This will cause flicker so we resort to finding next page
     * in the direction of velocity and use it.
     */

    do {
        proposedContentOffset.X = nextOffset;

        float deltaX = proposedContentOffset.X - CollectionView.ContentOffset.X;
        float velX = scrollingVelocity.X;

        // If their signs are same, or if either is zero, go ahead
        if (Math.Sign (deltaX) * Math.Sign (velX) != -1)
            break;

        // Otherwise, look for the closest page in the right direction
        nextOffset += Math.Sign (scrollingVelocity.X) * SnapStep;
    } while (IsValidOffset (nextOffset));

    return proposedContentOffset;
}

bool IsValidOffset (float offset)
{
    return (offset >= MinContentOffset && offset <= MaxContentOffset);
}

This code is using MinContentOffset, MaxContentOffset and SnapStep which should be trivial for you to define. In my case they turned out to be

float MinContentOffset {
    get { return -CollectionView.ContentInset.Left; }
}

float MaxContentOffset {
    get { return MinContentOffset + CollectionView.ContentSize.Width - ItemSize.Width; }
}

float SnapStep {
    get { return ItemSize.Width + MinimumLineSpacing; }
}
1
20

After long testing I found solution to snap to center with custom cell width (each cell has diff. width) which fixes the flickering. Feel free to improve the script.

- (CGPoint) targetContentOffsetForProposedContentOffset: (CGPoint) proposedContentOffset withScrollingVelocity: (CGPoint)velocity
{
    CGFloat offSetAdjustment = MAXFLOAT;
    CGFloat horizontalCenter = (CGFloat) (proposedContentOffset.x + (self.collectionView.bounds.size.width / 2.0));

    //setting fastPaging property to NO allows to stop at page on screen (I have pages lees, than self.collectionView.bounds.size.width)
    CGRect targetRect = CGRectMake(self.fastPaging ? proposedContentOffset.x : self.collectionView.contentOffset.x, 
                                   0.0,
                                   self.collectionView.bounds.size.width,
                                   self.collectionView.bounds.size.height);

    NSArray *attributes = [self layoutAttributesForElementsInRect:targetRect];
    NSPredicate *cellAttributesPredicate = [NSPredicate predicateWithBlock: ^BOOL(UICollectionViewLayoutAttributes * _Nonnull evaluatedObject,
                                                                             NSDictionary<NSString *,id> * _Nullable bindings) 
    {
        return (evaluatedObject.representedElementCategory == UICollectionElementCategoryCell); 
    }];        

    NSArray *cellAttributes = [attributes filteredArrayUsingPredicate: cellAttributesPredicate];

    UICollectionViewLayoutAttributes *currentAttributes;

    for (UICollectionViewLayoutAttributes *layoutAttributes in cellAttributes)
    {
        CGFloat itemHorizontalCenter = layoutAttributes.center.x;
        if (ABS(itemHorizontalCenter - horizontalCenter) < ABS(offSetAdjustment))
        {
            currentAttributes   = layoutAttributes;
            offSetAdjustment    = itemHorizontalCenter - horizontalCenter;
        }
    }

    CGFloat nextOffset          = proposedContentOffset.x + offSetAdjustment;

    proposedContentOffset.x     = nextOffset;
    CGFloat deltaX              = proposedContentOffset.x - self.collectionView.contentOffset.x;
    CGFloat velX                = velocity.x;

    // detection form  gist.github.com/rkeniger/7687301
    // based on http://stackoverflow.com/a/14291208/740949
    if (fabs(deltaX) <= FLT_EPSILON || fabs(velX) <= FLT_EPSILON || (velX > 0.0 && deltaX > 0.0) || (velX < 0.0 && deltaX < 0.0)) 
    {

    } 
    else if (velocity.x > 0.0) 
    {
       // revert the array to get the cells from the right side, fixes not correct center on different size in some usecases
        NSArray *revertedArray = [[array reverseObjectEnumerator] allObjects];

        BOOL found = YES;
        float proposedX = 0.0;

        for (UICollectionViewLayoutAttributes *layoutAttributes in revertedArray)
        {
            if(layoutAttributes.representedElementCategory == UICollectionElementCategoryCell)
            {
                CGFloat itemHorizontalCenter = layoutAttributes.center.x;
                if (itemHorizontalCenter > proposedContentOffset.x) {
                     found = YES;
                     proposedX = nextOffset + (currentAttributes.frame.size.width / 2) + (layoutAttributes.frame.size.width / 2);
                } else {
                     break;
                }
            }
        }

       // dont set on unfound element
        if (found) {
            proposedContentOffset.x = proposedX;
        }
    } 
    else if (velocity.x < 0.0) 
    {
        for (UICollectionViewLayoutAttributes *layoutAttributes in cellAttributes)
        {
            CGFloat itemHorizontalCenter = layoutAttributes.center.x;
            if (itemHorizontalCenter > proposedContentOffset.x) 
            {
                proposedContentOffset.x = nextOffset - ((currentAttributes.frame.size.width / 2) + (layoutAttributes.frame.size.width / 2));
                break;
            }
        }
    }

    proposedContentOffset.y = 0.0;

    return proposedContentOffset;
}
12
  • 10
    Best solution of them all, thanks! Also to any future readers, you must turn off paging in order for this to work.
    – sridvijay
    Commented Jul 28, 2014 at 19:35
  • 1
    If one were to want to align it from the left, instead of the cell aligned right in the center, how would we go about changing it?
    – CyberMew
    Commented Sep 4, 2014 at 6:27
  • No sure if I understand correctly, but if you want to start the items in center, and align it to center, you need to change the contentInset. I use this this: gist.github.com/pionl/432fc8059dee3b540e38
    – Pion
    Commented Sep 4, 2014 at 9:42
  • To align in the X position of the cell to middle of the view, just remove + (layoutAttributes.frame.size.width / 2) in velocity section.
    – Pion
    Commented Sep 4, 2014 at 9:45
  • 1
    @Jay Hi, just create a custom Flow delegate and add this code to it. Don't forget to set the custom layout in nib or code.
    – Pion
    Commented Apr 25, 2016 at 16:13
19

refer to this answer by Dan Abramov here's Swift version

override func targetContentOffset(
    forProposedContentOffset proposedContentOffset: CGPoint,
    withScrollingVelocity velocity: CGPoint
) -> CGPoint {
    var _proposedContentOffset = CGPoint(
        x: proposedContentOffset.x, y: proposedContentOffset.y
    )
    var offSetAdjustment: CGFloat = CGFloat.greatestFiniteMagnitude
    let horizontalCenter: CGFloat = CGFloat(
        proposedContentOffset.x + (self.collectionView!.bounds.size.width / 2.0)
    )

    let targetRect = CGRect(
        x: proposedContentOffset.x,
        y: 0.0,
        width: self.collectionView!.bounds.size.width,
        height: self.collectionView!.bounds.size.height
    )

    let array: [UICollectionViewLayoutAttributes] =
        self.layoutAttributesForElements(in: targetRect)!
        as [UICollectionViewLayoutAttributes]
    for layoutAttributes: UICollectionViewLayoutAttributes in array {
        if layoutAttributes.representedElementCategory == UICollectionView.ElementCategory.cell {
            let itemHorizontalCenter: CGFloat = layoutAttributes.center.x
            if abs(itemHorizontalCenter - horizontalCenter) < abs(offSetAdjustment) {
                offSetAdjustment = itemHorizontalCenter - horizontalCenter
            }
        }
    }

    var nextOffset: CGFloat = proposedContentOffset.x + offSetAdjustment

    repeat {
        _proposedContentOffset.x = nextOffset
        let deltaX = proposedContentOffset.x - self.collectionView!.contentOffset.x
        let velX = velocity.x

        if
            deltaX == 0.0 || velX == 0 || (velX > 0.0 && deltaX > 0.0) ||
            (velX < 0.0 && deltaX < 0.0)
        {
            break
        }

        if velocity.x > 0.0 {
            nextOffset = nextOffset + self.snapStep()
        } else if velocity.x < 0.0 {
            nextOffset = nextOffset - self.snapStep()
        }
    } while self.isValidOffset(offset: nextOffset)

    _proposedContentOffset.y = 0.0

    return _proposedContentOffset
}

func isValidOffset(offset: CGFloat) -> Bool {
    return (offset >= CGFloat(self.minContentOffset()) &&
        offset <= CGFloat(self.maxContentOffset()))
}

func minContentOffset() -> CGFloat {
    return -CGFloat(self.collectionView!.contentInset.left)
}

func maxContentOffset() -> CGFloat {
    return CGFloat(
        self.minContentOffset() + self.collectionView!.contentSize.width - self.itemSize.width
    )
}

func snapStep() -> CGFloat {
    return self.itemSize.width + self.minimumLineSpacing
}

or gist here https://gist.github.com/katopz/8b04c783387f0c345cd9

2
  • 5
    Updated version of this for Swift 3: gist.github.com/mstubna/beed10327e00310d05f12bf4747266a4
    – mstubna
    Commented Sep 26, 2016 at 11:17
  • 1
    Dang it @mstubna, I went ahead and copied the above, updated it to swift 3, started making an updated gist, and came back here to collect notes/title at which point i noticed that you had already made a swift 3 gist. Thanks! Too bad I missed it.
    – z2k
    Commented Dec 7, 2016 at 23:29
7

Here is my Swift solution on a horizontally scrolling collection view. It's simple, sweet and avoids any flickering.

  override func targetContentOffsetForProposedContentOffset(proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
    guard let collectionView = collectionView else { return proposedContentOffset }

    let currentXOffset = collectionView.contentOffset.x
    let nextXOffset = proposedContentOffset.x
    let maxIndex = ceil(currentXOffset / pageWidth())
    let minIndex = floor(currentXOffset / pageWidth())

    var index: CGFloat = 0

    if nextXOffset > currentXOffset {
      index = maxIndex
    } else {
      index = minIndex
    }

    let xOffset = pageWidth() * index
    let point = CGPointMake(xOffset, 0)

    return point
  }

  func pageWidth() -> CGFloat {
    return itemSize.width + minimumInteritemSpacing
  }
4
  • what is itemSize ?? Commented Aug 10, 2016 at 17:39
  • Its the size of the collection cells. These function are used when subclassing UICollectionViewFlowLayout.
    – denvdancsk
    Commented Aug 10, 2016 at 19:50
  • 3
    I like this solution, but I have a couple comments. pageWidth() should use minimumLineSpacing since it scrolls horizontally. And in my case, I have a contentInset for the collection view so that the first and last cell can be centered, so I use let xOffset = pageWidth() * index - collectionView.contentInset.left.
    – blwinters
    Commented Apr 17, 2018 at 20:59
6

a small issue I encountered while using targetContentOffsetForProposedContentOffset is a problem with the last cell not adjusting according to the new point I returned.
I found out that the CGPoint I returned had a Y value bigger then allowed so i used the following code at the end of my targetContentOffsetForProposedContentOffset implementation:

// if the calculated y is bigger then the maximum possible y we adjust accordingly
CGFloat contentHeight = self.collectionViewContentSize.height;
CGFloat collectionViewHeight = self.collectionView.bounds.size.height;
CGFloat maxY = contentHeight - collectionViewHeight;
if (newY > maxY)
{
    newY = maxY;
}

return CGPointMake(0, newY);

just to make it clearer this is my full layout implementation which just imitates vertical paging behavior:

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    return [self targetContentOffsetForProposedContentOffset:proposedContentOffset];
}

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset
{
    CGFloat heightOfPage = self.itemSize.height;
    CGFloat heightOfSpacing = self.minimumLineSpacing;

    CGFloat numOfPage = lround(proposedContentOffset.y / (heightOfPage + heightOfSpacing));
    CGFloat newY = numOfPage * (heightOfPage + heightOfSpacing);

    // if the calculated y is bigger then the maximum possible y we adjust accordingly
    CGFloat contentHeight = self.collectionViewContentSize.height;
    CGFloat collectionViewHeight = self.collectionView.bounds.size.height;
    CGFloat maxY = contentHeight - collectionViewHeight;
    if (newY > maxY)
    {
        newY = maxY;
    }

    return CGPointMake(0, newY);
}

hopefully this will save someone some time and a headache

1
  • 1
    Same problem, seems like the collection view will ignore invalid values instead of rounding them off to its bounds.
    – Mike M
    Commented Mar 17, 2014 at 11:17
6

I prefer to allow user flicking through several pages. So here is my version of targetContentOffsetForProposedContentOffset (which based on DarthMike answer) for vertical layout.

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {
    CGFloat approximatePage = self.collectionView.contentOffset.y / self.pageHeight;
    CGFloat currentPage = (velocity.y < 0.0) ? floor(approximatePage) : ceil(approximatePage);

    NSInteger flickedPages = ceil(velocity.y / self.flickVelocity);

    if (flickedPages) {
        proposedContentOffset.y = (currentPage + flickedPages) * self.pageHeight;
    } else {
        proposedContentOffset.y = currentPage * self.pageHeight;
    }

    return proposedContentOffset;
}

- (CGFloat)pageHeight {
    return self.itemSize.height + self.minimumLineSpacing;
}

- (CGFloat)flickVelocity {
    return 1.2;
}
4

Fogmeisters answer worked for me unless I scrolled to the end of the row. My cells don't fit neatly on the screen so it would scroll to the end and jump back with a jerk so that the last cell always overlapped the right edge of the screen.

To prevent this add the following line of code at the start of the targetcontentoffset method

if(proposedContentOffset.x>self.collectionViewContentSize.width-320-self.sectionInset.right)
    return proposedContentOffset;
2
  • I suppose 320 is your collection view width :)
    – Au Ris
    Commented Sep 19, 2017 at 15:47
  • Got to love looking back at old code. I guess that magic number was that.
    – Ajaxharg
    Commented Sep 20, 2017 at 17:23
2

@André Abreu's Code

Swift3 version

class CustomCollectionViewFlowLayout: UICollectionViewFlowLayout {
    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
        var offsetAdjustment = CGFloat.greatestFiniteMagnitude
        let horizontalOffset = proposedContentOffset.x
        let targetRect = CGRect(x: proposedContentOffset.x, y: 0, width: self.collectionView!.bounds.size.width, height: self.collectionView!.bounds.size.height)
        for layoutAttributes in super.layoutAttributesForElements(in: targetRect)! {
            let itemOffset = layoutAttributes.frame.origin.x
            if abs(itemOffset - horizontalOffset) < abs(offsetAdjustment){
                offsetAdjustment = itemOffset - horizontalOffset
            }
        }
        return CGPoint(x: proposedContentOffset.x + offsetAdjustment, y: proposedContentOffset.y)
    }
}
1
  • Thanks For that! The best behaviour expected Thanks it's Help a lot!
    – G Clovs
    Commented Jun 15, 2017 at 9:51
2

Swift 4

The easiest solution for collection view with cells of one size (horizontal scroll):

override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
    guard let collectionView = collectionView else { return proposedContentOffset }

    // Calculate width of your page
    let pageWidth = calculatedPageWidth()

    // Calculate proposed page
    let proposedPage = round(proposedContentOffset.x / pageWidth)

    // Adjust necessary offset
    let xOffset = pageWidth * proposedPage - collectionView.contentInset.left

    return CGPoint(x: xOffset, y: 0)
}

func calculatedPageWidth() -> CGFloat {
    return itemSize.width + minimumInteritemSpacing
}
2

A shorter solution (assuming you're caching your layout attributes):

override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
    let proposedEndFrame = CGRect(x: proposedContentOffset.x, y: 0, width: collectionView!.bounds.width, height: collectionView!.bounds.height)
    let targetLayoutAttributes = cache.max { $0.frame.intersection(proposedEndFrame).width < $1.frame.intersection(proposedEndFrame).width }!
    return CGPoint(x: targetLayoutAttributes.frame.minX - horizontalPadding, y: 0)
}

To put this in context:

class Layout : UICollectionViewLayout {
    private var cache: [UICollectionViewLayoutAttributes] = []
    private static let horizontalPadding: CGFloat = 16
    private static let interItemSpacing: CGFloat = 8

    override func prepare() {
        let (itemWidth, itemHeight) = (collectionView!.bounds.width - 2 * Layout.horizontalPadding, collectionView!.bounds.height)
        cache.removeAll()
        let count = collectionView!.numberOfItems(inSection: 0)
        var x: CGFloat = Layout.horizontalPadding
        for item in (0..<count) {
            let indexPath = IndexPath(item: item, section: 0)
            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            attributes.frame = CGRect(x: x, y: 0, width: itemWidth, height: itemHeight)
            cache.append(attributes)
            x += itemWidth + Layout.interItemSpacing
        }
    }

    override var collectionViewContentSize: CGSize {
        let width: CGFloat
        if let maxX = cache.last?.frame.maxX {
            width = maxX + Layout.horizontalPadding
        } else {
            width = collectionView!.width
        }
        return CGSize(width: width, height: collectionView!.height)
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        return cache.first { $0.indexPath == indexPath }
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return cache.filter { $0.frame.intersects(rect) }
    }

    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
        let proposedEndFrame = CGRect(x: proposedContentOffset.x, y: 0, width: collectionView!.bounds.width, height: collectionView!.bounds.height)
        let targetLayoutAttributes = cache.max { $0.frame.intersection(proposedEndFrame).width < $1.frame.intersection(proposedEndFrame).width }!
        return CGPoint(x: targetLayoutAttributes.frame.minX - Layout.horizontalPadding, y: 0)
    }
}
2

To make sure it works in Swift version (swift 5 now), I used the answer from @André Abreu, I add some more informations:

When subclassing UICollectionViewFlowLayout, the "override func awakeFromNib(){}" doesn't works (don't know why). Instead, I used "override init(){super.init()}"

This is my code put in class SubclassFlowLayout: UICollectionViewFlowLayout {} :

let padding: CGFloat = 16
override init() {
    super.init()
    self.minimumLineSpacing = padding
    self.minimumInteritemSpacing = 2
    self.scrollDirection = .horizontal
    self.sectionInset = UIEdgeInsets(top: 0, left: padding, bottom: 0, right: 100) //right = "should set for footer" (Horizental)

}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
    var offsetAdjustment = CGFloat.greatestFiniteMagnitude
    let leftInset = padding
    let horizontalOffset = proposedContentOffset.x + leftInset // leftInset is for "where you want the item stop on the left"
    let targetRect = CGRect(origin: CGPoint(x: proposedContentOffset.x, y: 0), size: self.collectionView!.bounds.size)

    for layoutAttributes in super.layoutAttributesForElements(in: targetRect)! {
        let itemOffset = layoutAttributes.frame.origin.x
        if (abs(itemOffset - horizontalOffset) < abs(offsetAdjustment)) {
            offsetAdjustment = itemOffset - horizontalOffset
        }
    }

    let targetPoint = CGPoint(x: proposedContentOffset.x + offsetAdjustment, y: proposedContentOffset.y)
    return targetPoint

}

After subclassing, make sure to put this in ViewDidLoad():

customCollectionView.collectionViewLayout = SubclassFlowLayout()
customCollectionView.isPagingEnabled = false
customCollectionView.decelerationRate = .fast //-> this for scrollView speed
1
  • Thanks! collectionView.decelerationRate = .fast was the thing I was looking for! Commented Jul 12, 2021 at 14:34
0

For those looking for a solution in Swift:

class CustomCollectionViewFlowLayout: UICollectionViewFlowLayout {
    private let collectionViewHeight: CGFloat = 200.0
    private let screenWidth: CGFloat = UIScreen.mainScreen().bounds.width

    override func awakeFromNib() {
        super.awakeFromNib()

        self.itemSize = CGSize(width: [InsertItemWidthHere], height: [InsertItemHeightHere])
        self.minimumInteritemSpacing = [InsertItemSpacingHere]
        self.scrollDirection = .Horizontal
        let inset = (self.screenWidth - CGFloat(self.itemSize.width)) / 2
        self.collectionView?.contentInset = UIEdgeInsets(top: 0,
                                                         left: inset,
                                                         bottom: 0,
                                                         right: inset)
    }

    override func targetContentOffsetForProposedContentOffset(proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
        var offsetAdjustment = CGFloat.max
        let horizontalOffset = proposedContentOffset.x + ((self.screenWidth - self.itemSize.width) / 2)

        let targetRect = CGRect(x: proposedContentOffset.x, y: 0, width: self.screenWidth, height: self.collectionViewHeight)
        var array = super.layoutAttributesForElementsInRect(targetRect)

        for layoutAttributes in array! {
            let itemOffset = layoutAttributes.frame.origin.x
            if (abs(itemOffset - horizontalOffset) < abs(offsetAdjustment)) {
                offsetAdjustment = itemOffset - horizontalOffset
            }
        }

        return CGPoint(x: proposedContentOffset.x + offsetAdjustment, y: proposedContentOffset.y)
    }
}
0

It is not about collectionView, but it works better. It is the best solution I ever seen.
Just use it with .linear type.

https://github.com/nicklockwood/iCarousel

God bless the author!:)

0

Oliver's answer worked for me perfectly, but it had some unnecessary iterations. Therefore, I created a much simpler implementation based on it:

override public func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint,
                                         withScrollingVelocity velocity: CGPoint) -> CGPoint {
    guard let collectionView = collectionView else {
        return super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
    }
    
    /// the actual page width without any insets or margins
    let pageContentWidth = self.itemSize.width
    /// total page width
    let pageWidth = pageContentWidth + self.minimumLineSpacing
    /// current page estimate based on the proposed contentoffset
    let proposedPage = round(proposedContentOffset.x / pageWidth)
    
    /// getting the proposed page content offset (the start position of the page we are supposed to take rest at)
    let proposedXContentOffsetBasedOnProposedPage = proposedPage * pageWidth
    
    /// minimum allowed content offset
    let minContentOffset: CGFloat = 0
    /// maximum allowed content offset
    let maxContentOffset = collectionViewContentSize.width-pageContentWidth
    
    let bestCandidateOffset: CGFloat
    /// if the velocity is positive ( the user is scrolling to the right)
    if velocity.x > 0 {
        /// the scroll final position should always advance to the RIGHT; hence if the `proposedXContentOffsetBasedOnProposedPage` is LESS than the original proposed offset this means that the estimated page was estimated wrong and it will go back. However, because the velocity is to right this means that we need to go to the NEXT page directly hence (proposedPage+1)
        let nearestCandidateOffsetToRight = proposedXContentOffsetBasedOnProposedPage < proposedContentOffset.x ?
        (proposedPage+1)*pageWidth :
        proposedXContentOffsetBasedOnProposedPage
        
        /// making sure not to go out of contentSize bounds
        bestCandidateOffset = min(maxContentOffset, nearestCandidateOffsetToRight)
    } else if velocity.x < 0 { /// if the velocity is negative ( the user is scrolling to the left)
        /// the scroll final position should always advance to the LEFT; hence if the `proposedXContentOffsetBasedOnProposedPage` is GREATER than the original proposed offset this means that the estimated page was estimated wrong and it will move forward. However, because the velocity is to left this means that we need to go to the PREVIOUS page directly hence (proposedPage-1)
        let nearestCandidateOffsetToLeft = proposedXContentOffsetBasedOnProposedPage > proposedContentOffset.x ?
        (proposedPage-1)*pageWidth :
        proposedXContentOffsetBasedOnProposedPage
        
        /// making sure not to go out of contentSize bounds
        bestCandidateOffset = max(minContentOffset, nearestCandidateOffsetToLeft)
    } else { /// if the velocity is 0
        /// move directly to the `proposedXContentOffsetBasedOnProposedPage`
        bestCandidateOffset = proposedXContentOffsetBasedOnProposedPage
    }
    
    return CGPoint(x: bestCandidateOffset, y: proposedContentOffset.y)
}

If you have tried this solution and the others mentioned here, you may have noticed that scrolling too fast could cause skipping multiple pages, which is not the case when isPagingEnabled is set to true.

This implementation only ensures that the UICollectionView's final resting position is always aligned with a page. It does not take into account the limitation of scrolling to one page at a time.

To limit scrolling to one page at a time, regardless of velocity, you can implement the scrollViewWillBeginDragging method of the UIScrollView and save the page from which the user started scrolling. Then, in the scrollViewWillEndDragging method, you can determine the final resting position based on the starting page.

/// used to save the page the user started the scroll from
var startScrollPage: Int?
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
    /// the actual page width without any insets or margins
    let pageContentWidth = collectionView.collectionViewLayout.itemSize.width
    /// total page width
    let pageWidth = pageContentWidth + collectionView.collectionViewLayout.minimumLineSpacing
    /// current page estimate based on the proposed contentoffset
    let currentPage = round(scrollView.contentOffset.x / pageWidth)
    
    startScrollPage = Int(currentPage)
}
func scrollViewWillEndDragging(_ scrollView: UIScrollView,
                               withVelocity velocity: CGPoint,
                               targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    guard let startScrollPage = startScrollPage else { return }
    /// the actual page width without any insets or margins
    let pageContentWidth = collectionView.collectionViewLayout.itemSize.width
    /// total page width
    let pageWidth = pageContentWidth + collectionView.collectionViewLayout.minimumLineSpacing
    /// current page estimate based on the proposed contentoffset
    let proposedPage = round(targetContentOffset.pointee.x / pageWidth)
    
    /// getting the proposed page content offset (the start position of the page we are supposed to take rest at)
    let proposedXContentOffsetBasedOnProposedPage = proposedPage * pageWidth
    /// minimum allowed content offset
    let minContentOffset: CGFloat = 0
    /// maximum allowed content offset
    let maxContentOffset = scrollView.contentSize.width-pageContentWidth
    
    let bestCandidateOffset: CGFloat
    /// if the velocity is positive ( the user is scrolling to the right)
    if velocity.x > 0 {
        /// get the next page offset by adding 1 to the starting page
        let nearestCandidateOffsetToRight = CGFloat(startScrollPage+1)*pageWidth
        
        /// making sure not to go out of contentSize bounds
        bestCandidateOffset = min(maxContentOffset, nearestCandidateOffsetToRight)
    } else if velocity.x < 0 { /// if the velocity is negative ( the user is scrolling to the left)
        /// get the prev page offset by subtracting 1 from the starting page
        let nearestCandidateOffsetToLeft = CGFloat(startScrollPage-1)*pageWidth
        
        /// making sure not to go out of contentSize bounds
        bestCandidateOffset = max(minContentOffset, nearestCandidateOffsetToLeft)
    } else { /// if the velocity is 0
        /// move directly to the `proposedXContentOffsetBasedOnProposedPage`
        bestCandidateOffset = proposedXContentOffsetBasedOnProposedPage
    }
    
    targetContentOffset.pointee.x = bestCandidateOffset
    self.startScrollPage = nil
}
-1

Here is a demo for paging by cell (when scroll fast, not skip one or more cell): https://github.com/ApesTalk/ATPagingByCell

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.