How to change UIPageControl dot not only when scrollView did end decelerating?

Question

I have created a User Onboarding as a Collection View with 2 items.

The Collection View has a UIPageControl which shows an active page user currently on.

The problem is I can change the state of active UIPageControl dot only when the transition is ended, after user swiped to the next\previous screen.

This is how it looks now: GIF

I want the behaviour so when you start to swipe UIPageControl should already change its active dot onto the next\previous one without me necessarily ending the swipe (lift the finger).

You can check what I want on the gif: GIF

Here is how I change the UIPageControl dot now:

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

How my code should be modified, which method to use to achieve the behaviour? I couldn't find any similar questions on StackOverflow.

Answer 1

Based on your question...

• you have only TWO cells (pages)
• you want the page control to reflect which page is most visible

Instead of scrollViewDidEndDecelerating, implement:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let fw = scrollView.frame.width
    // get the percentage scrolled
    let pct = scrollView.contentOffset.x / fw
    // if it's less-than 50%, we're at page 0
    // else, we're at page 1
    pageControl.currentPage = pct < 0.5 ? 0 : 1
}