Make collectionView scrolls as AppStore games section - ios

Question

I have a collectionView with horizontal scroll direction and paging enabled, now I want to make it scroll as smoothly as the games section on the AppStore.
To be more specific this is how I want the first cell to be:
EDIT
I actually achieved both of the next images one with the smaller width
of the cell and the next with the .centeredHorizontally in selectItem,
my problem is the non smoothly scrolling.
As you can see a little of the second cell is appearing.
And here is the next cells:
As you can see now the previous and the next cell are appearing.
I managed to do this by setting this part of code but with bouncing no smoothly as AppStore.
This is the code I used:
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
var visibleRect = CGRect()
visibleRect.origin = collectionView.contentOffset
visibleRect.size = collectionView.bounds.size
let visiblePoint = CGPoint(x: visibleRect.midX, y: visibleRect.midY)
let visibleIndexPath: IndexPath = collectionView.indexPathForItem(at: visiblePoint) ?? IndexPath()
let indexPath = IndexPath(item: visibleIndexPath[1], section: 0)
collectionView.selectItem(at: indexPath, animated: true, scrollPosition: .centeredHorizontally )
}
And this is my collectionView code:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let frameSize = collectionView.frame.size
return CGSize(width: frameSize.width - 30, height: frameSize.height - 40)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 0, bottom: 20, right: 0)
}

Answer 1

Example project here
In class property
var itemSize = CGSize(width: 0, height: 0)
#IBOutlet weak var collectionViewHeight: NSLayoutConstraint!
#IBOutlet weak var collectionView: UICollectionView!
fileprivate let sectionInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
In viewDidLoad or awakeFormNib(If in collectionViewCell or tableViewCell)
if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 0
}
collectionView.contentInset = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 8)
collectionView.isPagingEnabled = false
layoutIfNeeded()
let width = collectionView.bounds.size.width-24
let height = width * (3/4)
itemSize = CGSize(width: width, height: height)
layoutIfNeeded()
Implement UICollectionViewDelegateFlowLayout
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAt section: Int) -> UIEdgeInsets {
return sectionInsets
}
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
return itemSize
}
Implement ScrollViewDelegate
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let pageWidth = itemSize.width
targetContentOffset.pointee = scrollView.contentOffset
var factor: CGFloat = 0.5
if velocity.x < 0 {
factor = -factor
print("right")
} else {
print("left")
}
let a:CGFloat = scrollView.contentOffset.x/pageWidth
var index = Int( round(a+factor) )
if index < 0 {
index = 0
}
if index > collectionViewDataList.count-1 {
index = collectionViewDataList.count-1
}
let indexPath = IndexPath(row: index, section: 0)
collectionView?.scrollToItem(at: indexPath, at: .left, animated: true)
}
See example screenshot from my project at Past rides section
I have implemented uicollectionview in collectionViewCell

Answer 2

Set collectionView?.isPagingEnabled = true and remove your scrollViewDidEndDecelerating method