UICollectoinView horizontal scroll with inter item spacing

Question

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?

Answer 1

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!