CODEWITHSUNDEEP
iosswiftxcodeuipageviewcontroller
BigMountainStudio.com
BigMountainStudio.com

Reputation: 17570

UIPageViewController - Double Tapping Dots Area Shows Partial Transition (Xcode 8, Swift 3)

Double tapping anywhere at the bottom of a page control area (where the dots are) pauses the transition from one view controller to another.

Double tap area

Example of double tapping:

Example 1 Example 2

I simplified a UIPageViewController project to demonstrate this:

Storyboard Storyboard

PageViewController.swift

import UIKit

class PageViewController: UIPageViewController, UIPageViewControllerDataSource, UIPageViewControllerDelegate {

    var pages: [UIViewController] = [UIViewController]()

    override func viewDidLoad() {
        super.viewDidLoad()

        dataSource = self
        delegate = self

        pages.append(UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Page1"))
        pages.append(UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Page2"))

        setViewControllers([pages.first!], direction: .forward, animated: true, completion: nil)
    }

    // This allows the dots to appear on top of the views
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        for view in self.view.subviews {

            if view is UIScrollView {
                view.frame = UIScreen.main.bounds
            } else if view is UIPageControl {
                view.backgroundColor = UIColor.clear
            }
        }
    }

    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
        let viewControllerIndex = pages.index(of: viewController)

        if viewControllerIndex == 1 {
            return pages[0]
        }

        return nil
    }

    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        let viewControllerIndex = pages.index(of: viewController)

        if viewControllerIndex == 0 {
            return pages[1]
        }

        return nil
    }

    func presentationCount(for pageViewController: UIPageViewController) -> Int {
        return pages.count
    }

    func presentationIndex(for pageViewController: UIPageViewController) -> Int {
        return 0
    }
}

The source of the problem lies in this code:

    // This allows the dots to appear on top of the views
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        for view in self.view.subviews {

            if view is UIScrollView {
                view.frame = UIScreen.main.bounds
            } else if view is UIPageControl {
                view.backgroundColor = UIColor.clear
            }
        }

When this code is removed there is no partial transitions but you will now see a black bar which is also not desired.

blackbar

This is a common solution I have found throughout the web and Stackoverflow to get the Page Control (dots) to show on top of the views instead of within its own bar at the bottom of the screen.

So that's all I'm looking for. A solution that:

Thanks in advance for any help!

Upvotes: 2

Views: 1521

Answers (3)

BigMountainStudio.com
BigMountainStudio.com

Reputation: 17570

Jay, thanks again for helping me on this. I didn't know you could reference the UIPageControl in the UIPageViewController but I did some research and found a way. I changed the viewDidLoad to this and it worked! No hack needed:

override func viewDidLoad() {
    super.viewDidLoad()

    dataSource = self
    delegate = self

    setViewControllers([pages.first!], direction: .forward, animated: true, completion: nil)

    let pageControl = UIPageControl.appearance(whenContainedInInstancesOf: [PageViewController.self])
    pageControl.isUserInteractionEnabled = false
}

Upvotes: 1

BigMountainStudio.com
BigMountainStudio.com

Reputation: 17570

Thanks, Jay.

For me the container view was the simplest solution. What I did was cover up the Page Control at the bottom of the page (dots) with a UIView that had the background color set to clear color. So I'm preventing the user from double tapping in that area. It totally feels like a hack but I honestly didn't want to implement all that custom code in that second link you posted.

enter image description here

Then I went to https://bugreport.apple.com and requested an Xcode Enhancement for the UIPageViewController that gives developers a checkbox to overlay the page control over the view or use the black bar. :D

Upvotes: 1

Jay
Jay

Reputation: 116

There is very nice tutorial How to Use UIPageViewController in Swift which explains how to configure UIPageViewController

Second part of this tutorial How to Move Page Dots in a UIPageViewController which i believe is answer to your question.

You can use Container View to embed UIPageViewController in it and then you can keep any view top of the page view controller which does not scroll with UIPageViewController

I hope this helps.

Upvotes: 1

Related Questions