How to add PageControl inside UICollectionView Image Scrolling How to add PageControl inside UICollectionView Image Scrolling ios ios

How to add PageControl inside UICollectionView Image Scrolling


I'm not a fan of the accepted answer. From time to time, willDisplay cell will return the wrong page for the page control depending on users interaction.

What I use:

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {    pageControl.currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)}

This will update the page after the user has finished scrolling thus making the currentPage of the pageControl more accurate.


Here you have a complete class with Page Control pagination in a horizontal collection view.This is working on one of my applications, right now, and is working correctly. If you cannot get it work, do feel free to ask me and I'll help you.

First, in the Storyboard you have to set up your CollectionView with:

Layout: Flow
Scroll Direction: Horizontal
Scrolling enabled
Paging enabled

@IBOutlet weak var collectionView: UICollectionView! //img: 77@IBOutlet weak var pageControl: UIPageControl!var thisWidth:CGFloat = 0override func awakeFromNib() {    super.awakeFromNib()    thisWidth = CGFloat(self.frame.width)    collectionView.delegate = self    collectionView.dataSource = self    pageControl.hidesForSinglePage = true}func numberOfSections(in collectionView: UICollectionView) -> Int {    return 10}func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {    return 1}func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCell", for: indexPath)    return cell}func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {    self.pageControl.currentPage = indexPath.section}func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {    thisWidth = CGFloat(self.frame.width)    return CGSize(width: thisWidth, height: self.frame.height)}


For a more responsive UIPageControl, I prefer to use scrollViewDidScroll and calculating the offset with regards to the horizontal center of the scrollView.

func scrollViewDidScroll(_ scrollView: UIScrollView) {    let offSet = scrollView.contentOffset.x    let width = scrollView.frame.width    let horizontalCenter = width / 2    pageControl.currentPage = Int(offSet + horizontalCenter) / Int(width)}