How to center each view in the collection with UICollectionViewFlowLayout?

Question

Similar questions are posted here, but the problem relies on my code and I don't know to solve it.

I don't know why, but as I'm scrolling my collectionview, the cells are moving more to the left. See image below:

Here is the code for my UICollectionViewFlowLayout

import UIKit

class PrayerFlowLayout: UICollectionViewFlowLayout {
    //let standardItemAlpha: CGFloat = 0.3
    let standardItemScale: CGFloat = 0.85

    var isSetup = false

    override func prepare() {
        super.prepare()
        if isSetup == false {
            setupCollectionView()
            isSetup = true
        }
    }

    override open func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)
        var attributesCopy = [UICollectionViewLayoutAttributes]()

        for itemAttributes in attributes! {
            let itemAttributesCopy = itemAttributes.copy() as! UICollectionViewLayoutAttributes

            changeLayoutAttributes(itemAttributesCopy)
            attributesCopy.append(itemAttributesCopy)
        }

        return attributesCopy
    }


    // indicates the point on where to stop scrolling each prayer
    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
        // get layout attribute to use to make some calculations
        let layoutAttributes = self.layoutAttributesForElements(in: collectionView!.bounds)

        // get the horizontal center on the collection
        let center = collectionView!.frame.size.width / 2

        // add the center to the proposed content offset
        let proporsedContentOffsetCenterOrigin = proposedContentOffset.x + center

        let closest = layoutAttributes!.sorted {
            abs($0.center.x - proporsedContentOffsetCenterOrigin) < abs($1.center.x - proporsedContentOffsetCenterOrigin)
            }.first ?? UICollectionViewLayoutAttributes()

        let targetContentOffset = CGPoint(x: floor(closest.center.x - center), y: proposedContentOffset.y - center)

        return targetContentOffset
    }

    func changeLayoutAttributes(_ attributes: UICollectionViewLayoutAttributes) {
        let collectionCenter = collectionView!.bounds.width / 2
        let offset = collectionView!.contentOffset.x
        let normalizedCenter = attributes.center.x - offset

        let maxDistance = collectionView!.bounds.size.width + self.minimumLineSpacing
        //collectionView!.frame.width + self.minimumLineSpacing // self.itemSize.width + self.minimumLineSpacing
        let distance = min(abs(collectionCenter - normalizedCenter), maxDistance)

        let ratio = (maxDistance - distance)/maxDistance

        //let alpha = ratio * (1 - self.standardItemAlpha) + self.standardItemAlpha
        let scale = ratio * (1 - self.standardItemScale) + self.standardItemScale

        //attributes.alpha = alpha
        attributes.transform3D = CATransform3DScale(CATransform3DIdentity, scale, scale, 1)
    }


    func setupCollectionView() {
        self.collectionView!.decelerationRate = UIScrollView.DecelerationRate.fast

        let collectionSize = collectionView!.bounds.size
        let yInset = (collectionSize.height - self.itemSize.height) / 3
        let xInset = (collectionSize.width - self.itemSize.width) / 2

        let topPos = (collectionView!.bounds.height - (collectionView!.bounds.height - 75) )

        self.sectionInset = UIEdgeInsets.init(top: topPos, left: xInset, bottom: yInset, right: xInset)
    }

}

Any ideas on how I can have all the cells always centered?

Answer 1

You need to use UICollectionViewDelegateFlowLayout method like this

class CardListViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{

    // UICollectionViewDelegateFlowLayout Delegate method

   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
    {
        let leftAndRightPaddings: CGFloat = 20.0
        let numberOfItemsPerRow: CGFloat = 1.0

        let width = (collectionView.frame.width - leftAndRightPaddings)/numberOfItemsPerRow
        return CGSize(width: width, height: collectionView.frame.width)

    }
}

From the Storyboard Set Section Insets Like this.

Output :