UIButton across all pages of UIPageViewController

Question

I am working on an iPhone app, and created a UIPageViewController (lets call it the container), which contains a number of UIViewController pages (lets call them the subpages). The subpages transition style is scroll.

Now, what I like to do is create a button on the top right corner of the container and NOT in the subpages. The idea is, the button will stay on screen when the subpages scroll from one page to the other. If I create the button in one of the subpages, then each subpage will have its own button, and the button will scroll with the subpages. I want to keep the button without moving in the container, while the subpages scroll.

I tried to add the button using the storyboard to the container, but it is now allowed in. I cannot drop it there, and I suspect the reason is because container is of type UIPageViewController.

How can I do that using the storyboard?

Thanks.

Answer 1

1. In your storyboard, create a standard Viewcontroller scene.
2. To this scene add your fixed buttons and a container view.
3. Adding the container view will automatically add an embedded view controller. Select this and delete it.
4. Drag a Page view controller into the storyboard.
5. Select the container view and drag from the "viewDidLoad" item in its "triggered segues" list to the page view controller. Select "Embed" as the segue type.

Answer 2

Here is a solution using storyboard. You have to do some code, but it's minimal

1. Add a View to your Page View Controller View Hierarchy in your attributes inspector
2. Create a UIView Subclass that allows touches to pass through the view if the user is not interacting with a subview (otherwise the user will not be able to swipe between pages). Thanks to @john Stephen for his answer to this question.

class TouchThroughView: UIView {
        override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
            for subview in subviews {
                if !subview.isHidden && subview.isUserInteractionEnabled && subview.point(inside: convert(point, to: subview), with: event) {
                    return true
                }
            }
            return false
        }
    }

3. Create an outlet to this view in your PageViewController instance.
4. set translateAutoresizingMaskINtoConstraints= false
5. add the outlet as a subview to your PageViewController's root view
6. Add constraints positioning the outlet in the root view
7. Set the background of the view you added to the page view controller to clear (In interface builder).
8. You are done! Add your subviews and constraints to the view you added to your page view controller in storyboard.

Your PageViewControllerWill look like this:

class MyPageViewController: UIPageViewController {
    // step 3
    @IBOutlet var touchThroughView: UIView!  

    override func viewDidLoad() {
        super.viewDidLoad()

        // your regular page View Controller implementation

       // step 4
       stationaryView.translatesAutoresizingMaskIntoConstraints = false 
        // step 5
        self.view.addSubview(touchThroughView) 

        // Step 6
        touchThroughView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        touchThroughView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        touchThroughView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        touchThroughView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    }
}

Your Story board will look like this:

Answer 3

Drag and drop a button to your controller (UIPageViewController) (make sure it is the good controller). And add some constraint to block it at the top corner.

Answer 4

In code, add the button to the uipageviewcontroller