Uicollectionview with Paging - Setting Page Width

UICollectionView with paging - setting page width

You can snap to cells by being the delegate of the collection view and implementing the method:

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset

This tells you that the user has finished a drag and it allows you to modify the targetContentOffset to align with your cells (i.e. round to the nearest cell). Note that you need to be careful about how you modify the targetContentOffset; in particular, you need to avoid changing it so that the view needs to scroll in the opposite direction of the passed velocity, or you'll get animation glitches. You can probably find many examples of this if you google for that method name.

UICollectionView horizontal paging with space between pages

Solution one:

1. collectionView.isPagingEnabled = false
2. add a minimumLineSpacing for the distance between pages
3. implement targetContentOffsetForProposedContentOffset:withScrollingVelocity: to move the contentOffset to the closest page. You can calculate the page with simple math based on your itemSize and minimumLineSpacing, but it can take a little work to get it right.

Solution Two:

1. collectionView.isPagingEnabled = true
2. add a minimumLineSpacing for the distance between pages
3. the paging size is based on the bounds of the collectionView. So make the collectionView larger then then screenSize. For example, if you have a minimumLineSpacing of 10 then set the frame of the collectionView to be {0,-5, width+10, height}
4. set a contentInset equal to the minimumLineSpacing to make the first and last item appear correctly.

Horizontal paging UICollectionView with automatic item size in a vertical stack view?

Since CollectionViews (and TableViews) don't have an intrinsicContentSize, there is no way for the layout engine to know the correct size of your collection without the appropriate constraints. A subclass is needed to provide this property.

In your subclass:

override var intrinsicContentSize: CGSize {
    return CGSize(self.contentSize.height, self.superview!.bounds.width)
}

Also, don't forget to invalidate your content size when reloading data:

override func reloadData() {
    super.reloadData()
    self.invalidateIntrinsicContentSize()
}

For a more detailed explanation on intrinsicContentSize check Apple's Documentation

Paging UICollectionView by cells, not screen

OK, so I found the solution here: targetContentOffsetForProposedContentOffset:withScrollingVelocity without subclassing UICollectionViewFlowLayout

I should have searched for targetContentOffsetForProposedContentOffset in the begining.

UICollectionView Horizontal Paging not centered

Remove spaces between items. For horizontal scrolling collection view set minimum line spacing to 0. You can do this with interface builder or with method of UICollectionViewDelegateFlowLayout protocol:

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

Another way is making your cell's width less than collectionView's width for a value of horizontal space between items. Then add section insets with left and right insets that equal a half of horizontal space between items. For example, your minimum line spacing is 10:

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

- (CGSize)collectionView:(UICollectionView *)collectionView 
                  layout:(UICollectionViewLayout *)collectionViewLayout 
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(collectionView.frame.size.width - 10, collectionView.frame.size.height);
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView 
                        layout:(UICollectionViewLayout *)collectionViewLayout 
        insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(0, 5, 0, 5);
}

And third way: manipulate collectionView scroll in scrollViewDidEndDecelerating: method:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    if (scrollView == self.collectionView) {
        CGPoint currentCellOffset = self.collectionView.contentOffset;
        currentCellOffset.x += self.collectionView.frame.size.width / 2;
        NSIndexPath *indexPath = [self.collectionView indexPathForItemAtPoint:currentCellOffset];
        [self.collectionView scrollToItemAtIndexPath:indexPath
                                    atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally
                                            animated:YES];
    }
}

Adapt paging UICollectionView height to currently visible UICollectionViewCell

@Hannes, I saw problem in your project(the item height must be less than the height of the UICollectionView). There are various ways to achieve it but currently, I can suggest the minimal way to fix it. You could implement "UICollectionViewDelegateFlowLayout", and try this code:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
     return self.cardCollectionView.frame.size
}

Hope it helpful for you.

---

Related Topics