Horizontal UICollectionView single row layout

Question

I'm trying to setup what should be a simple horizontal layout using UICollectionView, going around in circles without achieving the desired result so any pointer or examples would be gratefully appreciated.

Probably little point in me pasting code as changed so often without success.

The image shows two rows, the first is a single item and is the correct size and aligned correctly in the centre. The second row has 3 items, the first should be the same size as the item above, with the next item edge being just visible indicating another item. When the item is swiped to the left their should be 3 items visible — the main item fully visible in the centre and items 1 & 3 just visible at the left and right edges.

I have tried setting paging on, changing insetForSectionAtIndex, minimumLineSpacingForSectionAtIndex, minimumInteritemSpacingForSectionAtIndex.

---

Edit - 16th December

I haven't explained or illustrated this very well, so have better illustrated below. I know how to create the collection view, set the item size etc but can not get the desired layout.

This is a single row horizontal UICollectionView with one item always in full view and its neighbouring items in partial view indicating to the user there are more items to the left or right depending on the scroll position and item count.

• when Item 1 is in full view, item 2 is in partial view
• when Item 2 is in full view, item 1 and 3 are in partial view (left and right)
• when Item 3 is in full view, item 2 is in partial view (left)

Answer 1

Ok, I've done this as follows;

sticking with an item size of 288x180 for my case

1/. Set the item size

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(288, 180);
}

2/. Set insetForSectionAtIndex

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    //top, left, bottom, right
    return UIEdgeInsetsMake(0, 16, 0, 16);
}

3/. Set minimumInteritemSpacingForSectionAtIndex to ensure spacing

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section 
{
    return 5;
}

4/. When creating the cell id did the following;

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell* cell = [self.collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class]) forIndexPath:indexPath];

    if (!cell)
    {
        cell  = [self.collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class]) forIndexPath:indexPath];

        cell.contentView.width = 288;
        cell.contentView.backgroundColor = [UIColor whiteColor];

    }

    return cell;
}

5/. To achieve the paging effect correctly ensure collectionView.paging = NO and subclass UICollectionViewFlowLayout to use targetContentOffsetForProposedContentOffset for correctly setting the scrollview offset

Not sure if this is the best way but it has given me the desired result..