UICollectionView: paging like Safari tabs or App Store search
ios, ios6, iphone, objective-c, uicollectionview
Solution
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/
Problem
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?