I am using a collection view for some of my images.
Each image should be displayed at the size of the screen, therefore one cell has the width of the screen. The minimumInterItemSpacing of the flowLayout is 25.
So now the problem is, that if I am scrolling, the collection view doesn't scroll to the start of the next image, but to the start of the interItemSpacing.
Let's give me an example:
Image/Cell width = 320
CollectionView's interItemSpacing = 25
If I scroll one page, the scroll view content offset is at 320 and not at 345 meaning that the second cell is not in the center of the screen.
How to solve this issue? Any suggestions?
Okay, what I've found out is, that there are 2 options to achieve the proper scrolling.
1. UICollectionViewController size
Increasing the size of the collection view and it's items by adding exactly the value you need as interItemSpacing.
Here is some code:
- (void) setupCollectionView;
{
PSTCollectionViewFlowLayout *flowLayout = [[PSTCollectionViewFlowLayout alloc] init];
CGSize itemSize = self.view.bounds.size;
itemSize.width +=25;
[flowLayout setItemSize:itemSize];
[flowLayout setScrollDirection:PSTCollectionViewScrollDirectionHorizontal];
flowLayout.minimumInteritemSpacing = 0.0f;
flowLayout.minimumLineSpacing = 0.0f;
self.collectionView = [[PSTCollectionView alloc] initWithFrame:self.view.bounds
collectionViewLayout:flowLayout];
[self.collectionView registerClass:[AMDetailImageCell class]
forCellWithReuseIdentifier:AMDetailImageCellIdentifier];
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
self.collectionView.pagingEnabled = YES;
CGRect rectSize = self.view.bounds;
rectSize.size.width +=25;
self.collectionView.frame = rectSize;
[self.view addSubview:self.collectionView];
[self scrollToStartIndex];
}
2. SectionEdgeInset
Making one page = one section and using sectionEdgeInset would result in the same solution but is - for sure - not always an option!
You should provide cell width by considering iterItemSpacing also. Try to provide cellWidth= 320-25=295. It should work then.
I found a solution to it, and it involved subclassing the UICollectionViewFlowLayout.
My CollectionViewCell size is 302 X 457 and i set my minimum line spacing to be 18 (9pix for each cell)
When you extend from that class there are a few methods that need to be over-ridden. One of them is
- (CGSize)collectionViewContentSize
In this method, I needed to add up the total width of what was in the UICollectionView. That includes the ([datasource count] * widthOfCollectionViewCell) + ([datasource count] * 18)
Here is my custom UICollectionViewFlowLayout methods....
-(id)init
{
if((self = [super init])){
self.itemSize = CGSizeMake(302, 457);
self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
self.minimumInteritemSpacing = 0.0f;
self.minimumLineSpacing = 18.0f;
[self setScrollDirection:UICollectionViewScrollDirectionHorizontal];
}
return self;
}
-(CGSize)collectionViewContentSize{
return CGSizeMake((numCellsCount * 302)+(numCellsCount * 18), 457);
}
This worked for me, so I hope someone else finds it useful!
