Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UICollectionView - Horizontal paging with one Cell at a time

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)
    }
like image 411
Ali Alebrahim Avatar asked Aug 11 '16 11:08

Ali Alebrahim


People also ask

How do I make my UICollectionView scroll horizontal?

You need to reduce the height of UICollectionView to its cell / item height and select " Horizontal " from the " Scroll Direction " as seen in the screenshot below. Then it will scroll horizontally depending on the numberOfItems you have returned in its datasource implementation.

What is UICollectionView flow layout?

A layout object that organizes items into a grid with optional header and footer views for each section.

What is a collection view?

A collection view manages an ordered set of content, such as the grid of photos in the Photos app, and presents it visually. Collection views are a collaboration between many different objects, including: Cells. A cell provides the visual representation for each piece of your content.

How does UICollectionView work?

From apple's documentation, UICollectionView is: An object that manages an ordered collection of data items and presents them using customizable layouts. The name and definition makes it clear, it is a way to display a Collection of UI Views in our app. The individual view is referred as a Cell.


1 Answers

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)
}
like image 90
Chirag Patel Avatar answered Sep 30 '22 19:09

Chirag Patel