在 UICollectionView 中的小单元格上使用左插入进行分页

Question

I have a UICollectionView filled with dates ranging from one date to another. I have implemented the UICollectionView with IGListKit. I would Like to enable paging on each cell so that each cell will land in the middle of the circle when it scrolls past it. (Like below) I have tried a few ways of paging, but these don't centre directly in the middle of the circle (As seen in the second image). What is happening is, the cells are getting paged to the left-hand side, I would like there to be an inset of 20 so that it fits into the circle

To enable the current date to show on the left-hand side in the circle when the view first loads, I have the semantic set to Force Right-to-Left and I also have edgeInsets which are:

left: screenWidth-62, right: 20)

The width of the cell is 42 and the inset at the side is 20, therefore the first cell will sit in the circle with these insets. So when the view first loads, the collection view looks like this:

I basically want each cell to land inside of this circle when it scrolls past (if the scrolling stops)

This is what I have so far:

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    if scrollView == self.collectionView {
        var currentCellOffset = self.collectionView.contentOffset
        currentCellOffset.x += (self.collectionView.frame.width / 2) + 20
        if let indexPath = self.collectionView.indexPathForItem(at: currentCellOffset) {
            self.collectionView.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
        }
    }
}

and this:

collectionView.decelerationRate = UIScrollView.DecelerationRate.fast

Does anyone know how to solve this?

Thank you

Answer 1

i created a custom collection view layout for paging by cell instead of screen

i also outline a few different ways to customize it with examples in the README

check it out here

let me know if you have any questions about it or need more help