UICollectionView: paging like Safari tabs or App Store search

Question

I want to implement "cards" in my app like Safari tabs or App Store search.

I will show user one card in a center of screen and part of previous and next cards at left and right sides. (See App Store search or Safari tabs for example)

I decided to use UICollectionView, and I need to change page size (didn't find how) or implement own layout subclass (don't know how)?

Any help, please?

Answer 1

Below is the simplest way that I've found to get this effect. It involves your collection view and an extra secret scroll view.

Set up your collection views

• Set up your collection view and all its data source methods.
• Frame the collection view; it should span the full width that you want to be visible.

• Set the collection view's contentInset:

  _collectionView.contentInset = UIEdgeInsetsMake(0, (self.view.frame.size.width-pageSize)/2, 0, (self.view.frame.size.width-pageSize)/2);
  

This helps offset the cells properly.

Set up your secret scrollview

• Create a scrollview, place it wherever you like. You can set it to hidden if you like.
• Set the size of the scrollview's bounds to the desired size of your page.
• Set yourself as the delegate of the scrollview.
• Set its contentSize to the expected content size of your collection view.

Move your gesture recognizer

• Add the secret scrollview's gesture recognizer to the collection view, and disable the collection view's gesture recognizer:

  [_collectionView addGestureRecognizer:_secretScrollView.panGestureRecognizer];
  _collectionView.panGestureRecognizer.enabled = NO;
  

Delegate

- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
    CGPoint contentOffset = scrollView.contentOffset;
    contentOffset.x = contentOffset.x - _collectionView.contentInset.left;
    _collectionView.contentOffset = contentOffset;
}

As the scrollview moves, get its offset and set it to the offset of the collection view.

I blogged about this here, so check this link for updates: http://khanlou.com/2013/04/paging-a-overflowing-collection-view/