UICollectionView - Horizontal paging with one Cell at a time

12,150

For center cell above code is right and also implement these two methods:

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    let currentIndex:CGFloat = self.GridCollectionView.contentOffset.x / self.GridCollectionView.frame.size.width
    pageControl.currentPage = Int(currentIndex)
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {            
    return CGSize(width: collectionView.frame.size.width, height: collectionView.frame.size.width+40)
}
Share:
12,150
Ali Alebrahim
Author by

Ali Alebrahim

A computer science student who's interested in iOS development. I have launched my first iOS game with the name 'SolveME!'. And currently working on my another project.

Updated on June 16, 2022

Comments

  • Ali Alebrahim
    Ali Alebrahim almost 2 years

    I'm trying to implement a carousel like effect using collectionView. I implemented the UICollectionView and set it up to show cells horizontally.

    The only problem is how can I allow the appearance of one cell only and to center that cell on the screen.

    Note: Paging is enabled.

    I found this code, tried it but sadly didn't work

    Code reference : Create a Paging UICollectionView with Swift

    override func targetContentOffsetForProposedContentOffset(proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
    
            if let cv = self.collectionView {
    
                let cvBounds = cv.bounds
                let halfWidth = cvBounds.size.width * 0.5;
                let proposedContentOffsetCenterX = proposedContentOffset.x + halfWidth;
    
                if let attributesForVisibleCells = self.layoutAttributesForElementsInRect(cvBounds) {
    
                    var candidateAttributes : UICollectionViewLayoutAttributes?
                    for attributes in attributesForVisibleCells {
    
                        // == Skip comparison with non-cell items (headers and footers) == //
                        if attributes.representedElementCategory != UICollectionElementCategory.Cell {
                            continue
                        }
    
                        if let candAttrs = candidateAttributes {
    
                            let a = attributes.center.x - proposedContentOffsetCenterX
                            let b = candAttrs.center.x - proposedContentOffsetCenterX
    
                            if fabsf(Float(a)) < fabsf(Float(b)) {
                                candidateAttributes = attributes;
                            }
    
                        }
                        else { // == First time in the loop == //
    
                            candidateAttributes = attributes;
                            continue;
                        }
    
    
                    }
    
                    return CGPoint(x : candidateAttributes!.center.x - halfWidth, y : proposedContentOffset.y);
    
                }
    
            }
    
            // Fallback
            return super.targetContentOffsetForProposedContentOffset(proposedContentOffset)
        }
    
  • Ali Alebrahim
    Ali Alebrahim almost 8 years
    your answer works perfectly when the cell width is the same as the collectionView width but otherwise there is a problem when the width of the cell is not the same of the collectionView cell
  • Chirag Patel
    Chirag Patel almost 8 years
    set your cell width in storyboard.
  • Ali Alebrahim
    Ali Alebrahim almost 8 years
    i did, the first and last cells are not centered any reason why?
  • Chirag Patel
    Chirag Patel almost 8 years
    without see storyboard and code how i understand so see me code and ui