UICollectionView: Paging for Smaller Width Cells

In the application I'm working on, there's a 320pt wide horizontal-only scrolling UICollectionView with varied content width depending on the number of items. The UICollectionViewCell subclass or itemView being used here has a width of 250pt enough to let the next itemView peak just a little bit. And I need to show one itemView at a time by snapping to the closest one.

// NOTE: This delegate method requires you to disable UICollectionView's `pagingEnabled` property.
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
              targetContentOffset:(inout CGPoint *)targetContentOffset {
  CGPoint point = *targetContentOffset;  

  UICollectionViewFlowLayout *layout = (UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout;
  // This assumes that the values of `layout.sectionInset.left` and 
  // `layout.sectionInset.right` are the same with `layout.minimumInteritemSpacing`. 
  // Remember that we're trying to snap to one item at a time. So one 
  // visible item comprises of its width plus the left margin.
  CGFloat visibleWidth = layout.minimumInteritemSpacing + layout.itemSize.width;

  // It's either we go forwards or backwards. 
  int indexOfItemToSnap = round(point.x / visibleWidth);

  // The only exemption is the last item. 
  if (indexOfItemToSnap + 1 == [self.collectionView numberOfItemsInSection:0]) { // last item
    *targetContentOffset = CGPointMake(self.collectionView.contentSize.width -
                                       self.collectionView.bounds.size.width, 0);
  } else {
    *targetContentOffset = CGPointMake(indexOfItemToSnap * visibleWidth, 0);


Anonymous said...

Nice. I haven't fixed it yet but I think there's a minor issue on the last page. There's an unaccounted for state where dragging ends and doesn't target the end of the row. The view snaps neither to the first item nor does the last item hug the right.

shashi said...

Thanks a lot, works for me

Lokashree sam said...

It was a great information and Its really worth enough reading it. The author did an mind blowing work by describing each and every concept in detail. Thanks for such an informative post. Please keep up your good work.
Marine Colleges in Chennai, Engineering Colleges In Chennai

Anil Gupta said...

I am very happy when read this blog post because blog post written in good manner and write on good topic. Thanks for sharing valuable information.
Web Designing Company in Bangalore, Web Development Company Bangalore

Prasanth said...

A very well-written post. I read and liked the post and have also bookmarked you. All the best for future endeavors. Getting some solution regarding.
UI Designing Companies, Web Application Development in Bangalore

Post a Comment

Hi there! Please leave your message here. Also, I may not be able to respond to your query right away. So please bear with me. Thanks. :)