UICollectionView, paging and clipsToBounds
I have a collection view whose content scrolls horizontally and needs to be visible for the full width of the device. Collection view is clipsToBounds
set to NO
and frame 600
wide is pagingEnabled
set to YES
.
The effect I am looking for is that the content will be displayed under a different view, however, when a cell is scrolled outside the bounds of the collection view, it is removed so it can be reused.
Does anyone know how I can get this to work, or achieve a similar effect?
source to share
Below is the simplest way I've found to get this effect. It includes a collection view and an additional secret scroll view.
Customize collection views
- Customize the collection view and all of its data source methods.
- Collection view frame; it should span the entire width that you want to see.
-
Set the collection view
contentInset
:_collectionView.contentInset = UIEdgeInsetsMake(0, (self.view.frame.size.width-pageSize)/2, 0, (self.view.frame.size.width-pageSize)/2);
This helps to compensate cells correctly.
Customize your secret scrolling
- Create a scroll, place it wherever you want. You can install it
hidden
if you like. - Set the size of the scrollview borders to your desired page size.
- Set yourself up as a scroll delegate.
- Set your
contentSize
size to the expected content of your collection view.
Move gesture recognizer
-
Add the scrollview gesture secret to the collection view and disable the collection view 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 you move the scrollview, get its offset and set it to the offset of the collection view.
I wrote about it here, so check this link for updates: http://khanlou.com/2013/04/paging-a-overflowing-collection-view/
source to share