CODEWITHSUNDEEP
iosswiftuicollectionviewuipagecontrol
kbunarjo
kbunarjo

Reputation: 1375

How to connect UIPageControl to UICollectionView (Swift)

I'm currently using a UICollectionView to display 3 images (each image spans the entire cell). I also have a UIPageControl that I placed on top of the UICollectionView. What I want to happen is to have the UIPageControl show the number of images (which in this case is 3), and also which image the user is currently viewing. The effect I am trying to go for is that of the Instagram app.

The way that I am currently using to achieve this effect is by placing the updating of the UIPageControl within the UICollectionView's willDisplay function, like so:

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    pictureDots.currentPage = indexPath.item
}

This manages to correctly hook up the paging effect between the collection view and page control. However, the problem that I have is that the UIPageControl starts off saying the user is on the third image, even though it is displaying the first image.

Does anyone know why this is happening and how to fix this problem?

Upvotes: 20

Views: 23009

Answers (5)

Saurabh Sharma
Saurabh Sharma

Reputation: 1966

//For every iPhone screen, it is working(Swift 5)...

func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
    let offSet = scrollView.contentOffset.x
    let width = scrollView.frame.width
    let horizontalCenter = width / 2

    _pageControl.currentPage = Int(offSet + horizontalCenter) / Int(width)        
}

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

Upvotes: 0

SPatel
SPatel

Reputation: 4956

With help of Combine, we can easily connect UIPageControl with any ScrollView.

var collectionView: UICollectionView
var bin: Set<AnyCancellable> = []
var pageControl: UIPageControl

// setup observer
collectionView
    .publisher(for: \.contentOffset)
    .map { [unowned self] offset in
        Int(round(offset.x / max(1, self.collectionView.bounds.width)))
    }
    .removeDuplicates()
    .assign(to: \.currentPage, on: pageControl) // may cause memory leak use sink
    .store(in: &bin)

Upvotes: 3

Pathak Ayush
Pathak Ayush

Reputation: 756

Use this for smooth functioning.

 func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let witdh = scrollView.frame.width - (scrollView.contentInset.left*2)
    let index = scrollView.contentOffset.x / witdh
    let roundedIndex = round(index)
    self.pageControl.currentPage = Int(roundedIndex)
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

    pageControl.currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
}

func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {

    pageControl.currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
}

Upvotes: 4

Ariel Antonio Fundora
Ariel Antonio Fundora

Reputation: 1488

Step 1 Create the variables for Collection View and Page Control

@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet var pageControl:UIPageControl!

Step 2 Set the number of pages of Page Control

override func viewDidLoad() {
    super.viewDidLoad()         
    self.pageControl.numberOfPages = procedures.count
    //Set the delegate
    self.collectionView.delegate = self
}

*Step 3 In the scrollViewDidScroll function calculate the width of collection cell and the index for the current page.

    extension YourCollectionVC: UICollectionViewDataSource, UICollectionViewDelegate {
            override func scrollViewDidScroll(_ scrollView: UIScrollView) {
                let witdh = scrollView.frame.width - (scrollView.contentInset.left*2)
                let index = scrollView.contentOffset.x / witdh
                let roundedIndex = round(index)
                self.pageControl?.currentPage = Int(roundedIndex)
            }
}

Note: This is for collection view displayed horizontally, for vertical direccion change the method.

Tested in swift 4.

Upvotes: 21

Callam
Callam

Reputation: 11539

Firstly add your UIPageControl into your storyboard with your UICollectionView, then connect them as outlets to your view controller.

@IBOutlet var pageControl: UIPageControl!
@IBOutlet var collectionView: UICollectionView!

Adjust your numberOfItemsInSection method in UICollectionViewDataSource to set the count of the page control to always be equal to the number of cells in the collection view.

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

    let count = ...

    pageControl.numberOfPages = count
    pageControl.isHidden = !(count > 1)

    return count
}

Lastly, using the UIScrollViewDelegate, we can tell which cell the UICollectionView stops on. If you are not using a UICollectionViewController, you may have to add the delegate protocol.

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

    pageControl?.currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
}

func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {

    pageControl?.currentPage = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
}

This is possible because a UICollectionView is in fact a UIScrollView under the hood.

Upvotes: 40

Related Questions