UIPageViewController - Detect scrolling halfway into the next view controller (almost working) to change button color?

Question

I have a class that subclasses a UIPageViewController that which contains 4 controllers, I am trying to figure out how I can change color of the button as I scroll halfway to the second view controller

The button color should be different only on the first controller

This code here almost works but the behaviour is not correct only for the third controller which means the solution is not correct.

I Would really appreciate it if someone could help out. Thanks

    public func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let point = scrollView.contentOffset
        let width = scrollView.frame.width
        let percentComplete = abs(point.x - width) / width
        let page = Int(round(percentComplete))

        if percentComplete >= 0.5 {
            if page == 1, currentIndex == 1 {
                nextButton.backgroundColor = .red
            } else {
                nextButton.backgroundColor = .blue
            }
            print ("percentComplete: ", percentComplete,
                   "page: ", page,
                   "currentIndex: ",
                   currentIndex, "point: ", point.x)
        }
    }

score 1 · Accepted Answer · answered Sep 21 '20 at 22:07

Even though you say you want to use UIPageViewController, here is an example implementation using UIScrollView that you may find easier to manage:

class PagedScrollViewController: UIViewController, UIScrollViewDelegate {
    
    let scrollView: UIScrollView = {
        let v = UIScrollView()
        v.isPagingEnabled = true
        v.bounces = false
        return v
    }()
    
    let pageControl: UIPageControl = {
        let v = UIPageControl()
        return v
    }()
    
    let stack: UIStackView = {
        let v = UIStackView()
        v.axis = .horizontal
        v.distribution = .fillEqually
        return v
    }()
    
    var pages: [UIViewController] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        pageControl.translatesAutoresizingMaskIntoConstraints = false
        stack.translatesAutoresizingMaskIntoConstraints = false
        
        scrollView.addSubview(stack)
        view.addSubview(scrollView)
        view.addSubview(pageControl)
        
        let g = view.safeAreaLayoutGuide
        let svCLG = scrollView.contentLayoutGuide
        let svFLG = scrollView.frameLayoutGuide
        
        NSLayoutConstraint.activate([
            
            scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            scrollView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -80.0),
            
            stack.topAnchor.constraint(equalTo: svCLG.topAnchor, constant: 0.0),
            stack.leadingAnchor.constraint(equalTo: svCLG.leadingAnchor, constant: 0.0),
            stack.trailingAnchor.constraint(equalTo: svCLG.trailingAnchor, constant: 0.0),
            stack.bottomAnchor.constraint(equalTo: svCLG.bottomAnchor, constant: 0.0),
            
            stack.heightAnchor.constraint(equalTo: svFLG.heightAnchor, constant: 0.0),
            
            pageControl.topAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 8.0),
            pageControl.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            pageControl.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),

        ])
        
        // if we're loading "page" view controllers from Storyboard
        /*
        if let vc = storyboard?.instantiateViewController(withIdentifier: "psFirst") as? PSFirstViewController {
            pages.append(vc)
        }
        if let vc = storyboard?.instantiateViewController(withIdentifier: "psSecond") as? PSSecondViewController {
            pages.append(vc)
        }
        if let vc = storyboard?.instantiateViewController(withIdentifier: "psThird") as? PSThirdViewController {
            pages.append(vc)
        }
        if let vc = storyboard?.instantiateViewController(withIdentifier: "psFourth") as? PSFourthViewController {
            pages.append(vc)
        }
        pages.forEach { vc in
            self.addChild(vc)
            stack.addArrangedSubview(vc.view)
            vc.view.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor, constant: 0.0).isActive = true
            vc.didMove(toParent: self)
        }
        */

        // for this example,
        //  create 4 view controllers, with background colors
        let colors: [UIColor] = [
            .red, .brown, .blue, .magenta
        ]
        colors.forEach { c in
            let vc = BasePageController()
            vc.view.backgroundColor = c
            self.addChild(vc)
            stack.addArrangedSubview(vc.view)
            vc.view.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor, constant: 0.0).isActive = true
            vc.didMove(toParent: self)
            pages.append(vc)
        }
        
        pageControl.numberOfPages = pages.count
        
        scrollView.delegate = self
        
        pageControl.addTarget(self, action: #selector(self.pgControlChange(_:)), for: .valueChanged)
    }
    
    var pgControlScroll: Bool = false
    
    @objc func pgControlChange(_ sender: UIPageControl) {
        pgControlScroll = true
        let w = scrollView.frame.size.width
        guard w != 0 else { return }
        let x = scrollView.contentOffset.x
        let cp = min(Int(round(x / w)), pages.count - 1)
        let np = sender.currentPage
        var r = CGRect.zero
        if np > cp {
            r = CGRect(x: w * CGFloat(np + 1) - 1.0, y: 0, width: 1, height: 1)
        } else {
            r = CGRect(x: w * CGFloat(np), y: 0, width: 1, height: 1)
        }
        scrollView.scrollRectToVisible(r, animated: true)
    }
    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        pgControlScroll = false
    }
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let w = scrollView.frame.size.width
        guard w != 0 else { return }
        let x = scrollView.contentOffset.x
        let pg = min(Int(round(x / w)), pages.count - 1)
        let v = stack.arrangedSubviews[pg]
        pageControl.backgroundColor = v.backgroundColor
        if pgControlScroll { return }
        pageControl.currentPage = pg
    }

}

class BasePageController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // add a label at each corner
        for (i, s) in ["top-left", "top-right", "bot-left", "bot-right"].enumerated() {
            let v = UILabel()
            v.backgroundColor = UIColor(white: 0.8, alpha: 1.0)
            v.translatesAutoresizingMaskIntoConstraints = false
            v.text = s
            view.addSubview(v)
            let g = view.safeAreaLayoutGuide
            switch i {
            case 1:
                v.topAnchor.constraint(equalTo: g.topAnchor, constant: 4.0).isActive = true
                v.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -4.0).isActive = true
            case 2:
                v.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -4.0).isActive = true
                v.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 4.0).isActive = true
            case 3:
                v.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -4.0).isActive = true
                v.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -4.0).isActive = true
            default:
                v.topAnchor.constraint(equalTo: g.topAnchor, constant: 4.0).isActive = true
                v.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 4.0).isActive = true
            }
        }
    }
    
}

The code adds a scroll view that takes up most of the screen (with some padding so the frame of the scroll view is obvious), with a UIPageControl underneath.

We add 4 view controllers as child view controllers, and add their views to a UIStackView in the scroll view.

When you scroll from "page-to-page" the page control will update and change background color as you get half-way to the next / previous page.

Yes even though I was after a solution with UIPageViewController, I did already implement it using the ScrollView + StackView as you guys suggested, I choose your answer because I appreciated the effort and it is a very nice simple solution to do exactly what I was after in the bigger picture. Thank you very much. — Wael, Sep 22 '20 at 02:53
Hi DonMag, I was hoping if you could help please by modifying the answer specifically just the scrollViewDidScroll method to allow for infinite scrolling so when you reach the fourth / last item as you swipe right it will smoothly transition to the first page and likewise if you keep swiping back to the left as you reach the first and swipe left again the last item will be displayed, if you know what I mean, I tried doing it but was playing up a bit. Thank you. — Wael, Sep 27 '20 at 10:21
@Wael - you should probably post this as a separate question, as you were first asking about also disabling bouncing on first and last "page". If you do, I can give you a solution. — DonMag, Sep 27 '20 at 16:45
Thank you @DonMag I posted the question here as requested, https://stackoverflow.com/questions/64093925/swift-infinite-scrolling-for-uiscrollview-with-an-embedded-uistackview — Wael, Sep 27 '20 at 22:33

score 0 · Answer 2 · answered Sep 15 '20 at 14:07

0

A UIPageViewController doesn't have any mechanism I'm aware of for tracking partial scrolling. It's based on the assumption that the page view controllers already exist, and you don't get notified until the user has completed a "page flip".

It also supports both page curl style page flipping and side-scrolling, which would make it more complex/fragile to try to hack a solution.

answered Sep 15 '20 at 14:07

Duncan C

128,072
22
173
272

Thanks, I understand and it seems that way however :) I have updated the code once again and it almost works except for the third controller. Hopefully there is a way to get this fixed! – Wael Sep 19 '20 at 23:37
If I find a solution for the UIPageViewController it will save a lot of work since I wouldn't need to convert all the work to a UIScrollView with a StackView embedded in it. Its best to figure out if there is a hack / workaround until Apple considers making this easy if the future if they pay attention to these things. – Wael Sep 19 '20 at 23:40

UIPageViewController - Detect scrolling halfway into the next view controller (almost working) to change button color?

2 Answers2

Linked