You can download the finished project from github. Next, we can calculate the major cell index (the cell that we need to snap to) Add the following function to the viewController: private func indexOfMajorCell() -> Int, completion: nil) This will just stop any sliding effect after the user lift the finger.
And here we Have our first line of code inside the function scrollViewWillEndDragging: // Stop scrollView sliding: targetContentOffset.pointee = ntentOffset So first, if the user left us velocity, there will be still sliding going and that will interfere with our snapping plan. When the user finished a drag, we would like to snap to the page that appears the most - “the major cell”: The second parameter of this function is a pointer to the contentOffset the scrollView will have once the sliding will come to an end (parameter targetContentOffset).
The velocity may be different then zero if the user lift the finger with a swing movement. This function will gives us the velocity of the scrollView in the moment the user lift the finger and stopped the dragging gesture. Remember: collectionView is a UIScrollView and UICollectionViewDelegate inherits from UIScrollViewDelegate. Now all is left is for our viewController to conform to UICollectionViewDelegate and to implement the following function: func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer) We will achieve zero spacing between cells by adding the following line to the function viewDidLoad(): collectionViewLayout.minimumLineSpacing = 0 We can create the illusion of spacing between cells by encapsulating the inner elements of the cells (like labels, images or in our case: buttons) in the center of cell (see Main.storyboard). It will make calculation much easier for us. Next, the spacing between two cells should be zero. This function does some magic calculations - don’t worry about it, these calculations are very specific for this example. The code snippet below creates a FlowLayout object and the components it manages. Another constructor of the FlowLayout class specifies how much vertical or horizontal padding is put around the components. Open the starter project and go to the file ViewController, there I’m setting the cell size and the insets of the collectionView inside the function configureCollectionViewLayoutItemSize() - the inset can be of any size for paging to work, but I wanted the next cell and previous cell to peek from the sides, so calculation for the inset is made in the function calculateSectionInset(). To specify that the row is to aligned either to the left or right, use a FlowLayout constructor that takes an alignment argument. You can download the starter project from Github and you will find a link to the finished project at the bottom of the tutorial. The collection view in the bottom of the screen is missing one thing - paging! SJCenterFlowLayoutSpacingMode.overlap(visibleOffset: CGFloat)Ī fixed part of the side items are visible on the sides of the collection (and therefore the space between items depends on the collection size).So just marking “enable paging” in the interface builder won’t work - we will have to implement paging ourselves!įor this tutorial I already created a starter app that does all the above.Items in the carousel are positioned with a fixed space between them. SJCenterFlowLayoutSpacingMode.fixed(spacing: CGFloat).spacingMode (default is fixed spacing of 40 pts).SJCenterFlowLayoutAnimation.scale(sideItemScale: 0.7, sideItemAlpha: 0.6, sideItemShift: 0.0).animationMode (default is scale with sideItemScale between 0 and 1, default is 0.7, sideItemAlpha: between 0 and 1, default is 0.6, sideItemShift: value in pixels, default is 0).Set the UICollectionView layout class to SJCenterFlowLayout, and set its itemSize and its properties as given below