iosuistoryboarduipageviewcontrollerxcode-storyboard

UIPageViewController and storyboard


I'm trying to configure a UIPageViewController SPECIFICALLY from storyboard:

enter image description here

TutorialPageViewController.h

#import <UIKit/UIKit.h>
@interface TutorialPageViewController : UIPageViewController <UIPageViewControllerDelegate, UIPageViewControllerDataSource>
@end

TutorialPageViewController.m

#import "TutorialPageViewController.h"

@interface TutorialPageViewController ()
@property (assign, nonatomic) NSInteger index;
@end

@implementation TutorialPageViewController
{
    NSArray *myViewControllers;
}

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.delegate = self;
    self.dataSource = self;
    [self didMoveToParentViewController:self];
    UIStoryboard *tutorialStoryboard = [UIStoryboard storyboardWithName:@"TutorialStoryboard" bundle:[NSBundle mainBundle]];
    UIViewController *tuto1 = [tutorialStoryboard instantiateViewControllerWithIdentifier:@"TutorialPageViewController_1"];
    UIViewController *tuto2 = [tutorialStoryboard instantiateViewControllerWithIdentifier:@"TutorialPageViewController_2"];

    myViewControllers = @[tuto1, tuto2, tuto1, tuto2];
    self.index = 0;

    [self setViewControllers:@[tuto1] direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];
}

- (UIViewController *)viewControllerAtIndex:(NSUInteger)index {
    return myViewControllers[index];
}

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController {

    NSUInteger index = self.index;

    if (index == 0) { return nil; }

    // Decrease the index by 1 to return
    index--;
    return [self viewControllerAtIndex:index];
}

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController {

    NSUInteger index = self.index;
    index++;
    if (index > [myViewControllers count]) { return nil; }

    return [self viewControllerAtIndex:index];
}

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController {
    // The number of items reflected in the page indicator.
    return [myViewControllers count];
}

- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController {
    // The selected item reflected in the page indicator.
    return 0;
}

@end

Problem is...


Solution

  • Updated for 2024 ...

    Nowadays it is dead easy to do this simply using Storyboard.

    These sort of "swiping full-screen intros" were popular as app intros for awhile, so I called the class below IntroPages.

    Step 1, make a container view that is a UIPageViewController.

    If new to iOS, here is a container view tutorial.

    ( Note: if you don't know how to "change" the container view to a UIPageViewController, scroll down to the section "How to change..." on that tutorial!

    enter image description here )

    You can make the container any shape you want. As with any container view, it can be full-screen or a small part of the screen - whatever you want.

    Step 2,

    Make four straightforward, ordinary, view controllers which can be anything you want - images, text, tables, anything at all. (Purple in the example.)

    four controllers

    Note that they simply sit there on your storyboard, do not link them to anything.

    Step 3, you must Set the IDs of those four pages. "id1", "id2", "id3", "id4" is fine.

    set the IDs

    Step 4, copy and paste! Here's the class IntroPages,

    Updated for 2024 ...

    import UIKit
    class IntroPages: UIPageViewController, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
    
        // (see note below about ".scroll" mode, you almost always need this line of code:)
       required init?(coder: NSCoder) {
           super.init(transitionStyle: .scroll, navigationOrientation: .horizontal, options: nil)
       }
    
        var pages = [UIViewController]()
    
        override func viewDidLoad() {
            super.viewDidLoad()
            self.delegate = self
            self.dataSource = self
    
            let p1: UIViewController! = storyboard?.instantiateViewController(withIdentifier: "id1")
            let p2: UIViewController! = storyboard?.instantiateViewController(withIdentifier: "id2")
            let p3: UIViewController! = storyboard?.instantiateViewController(withIdentifier: "id3")
    
            // etc ...
    
            pages.append(p1)
            pages.append(p2)
            pages.append(p3)
    
            // etc ...
    
            setViewControllers([p1], direction: .forward, animated: false, completion: nil)
        }
    
        func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController)-> UIViewController? {
           
            guard let cur = pages.firstIndex(of: viewController) else { return nil }
    
            // if you prefer to NOT scroll circularly, simply add here:
            // if cur == 0 { return nil }
    
            var prev = (cur - 1) % pages.count
            if prev < 0 {
                prev = pages.count - 1
            }
            return pages[prev]
        }
    
        func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController)-> UIViewController? {
    
            guard let cur = pages.firstIndex(of: viewController) else { return nil }
    
            // if you prefer to NOT scroll circularly, simply add here:
            // if cur == (pages.count - 1) { return nil }
    
            let nxt = abs((cur + 1) % pages.count)
            return pages[nxt]
        }
    
        func presentationIndex(for pageViewController: UIPageViewController)-> Int {
            return pages.count
        }
    }
    

    (Look at the comments - there is code for either looping or linear paging as you prefer.)

    On the storyboard look at the UIPageViewController. Set the class to be IntroPages.

    That's all there is to it - you're done.

    You simply set the transition style on the storyboard,

    enter image description here

    it is very likely you want "Scroll", not the other one.


    Important NOTE on using the normal, usual, ".scroll" mode ...

    Incredibly bizarrely, Apple have removed the normal ".scroll" option from the drop-down in IB in Xcode storyboard.

    (On storyboard, they only allow you to choose the bizarre options like "curl", which nobody ever uses.)

    You now have to do this in code, which is simple. This line takes care of the problem:

    class IntroPages: UIPageViewController, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
    
       required init?(coder: NSCoder) {
           super.init(transitionStyle: .scroll, navigationOrientation: .horizontal, options: nil)
       }
    

    It's silly, but that's how it is. (More info.)


    Surprisingly, you're done!

    It's a bit confusing, because there's nothing else to do.

    Hit run and it will now work.

    You can go to lunch, there's nothing else to do.

    Looking at the first large image above, the "pink" controllers "aa", "bb", "cc" etc ... simply make those any way you wish, as any normal view controller layout in iOS.

    And now the hard part ...


    Introduction to adding UIPageControl ...

    You add the UIPageControl in the highest-level wrapper class, "Intro" in the above image example.

    (So, surprisingly not in the page view controller, not in "IntroPages".)

    Thus, on the storyboard, very simply drag a UIPageControl on to "Intro".

    Note! Bizarrely, in storyboards, you cannot move a UIPageControl. When you drag a page control on to a view controller, it sits in a fixed place which cannot be changed in any way. This is bizarre, but that's how it is. To position as you wish, just have a holder (an empty plain UIView). Put the holder where you wish. Sit the page control in side that holder.

    From Intro, you will need to access the page view controller (IntroPages) in the usual way:

    class Intro: UIViewController {
    
        @IBOutlet var pageControl: UIPageControl!
        var pageViewController: IntroPages!
        
        override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
            if segue.identifier == "segueIntroPages" {
                // if new to container views, identifier explained here:
                // https://stackoverflow.com/a/23403979/294884
                pageViewController = (segue.destination as! IntroPages)
            }
        }
        
        override func viewDidLoad() {
            super.viewDidLoad()
            pageControl.currentPage = 0
        }
    

    (NOTE. In older iOS you had to: view.bringSubviewToFront(pageControl) in viewDidLoad due to a UIKit bug. From about iOS 15 this seems to be resolved.)

    Add this function

    @IBAction func userDidChangePageControl(_ sender: UIPageControl) {}
    

    and then in storyboard click on the page control and drag valueChanged to that function.

    The simplest outline version of the function is ...

    @IBAction func userDidChangePageControl(_ sender: UIPageControl) {
        let newIndex = sender.currentPage
        pageViewController.setViewControllers(
            [pageViewController.pages[newIndex]],
            direction: (pageViewController.currentIndex < newIndex)
                         ? .forward : .reverse,
            animated: true, completion: nil)
    }
    

    (If you prefer, put that function in IntroPages, and, from the IBAction in Intro, just call down to it.)

    Next, in IntroPages you must add the property:

    var currentIndex: Int {
        if let visibleViewController = viewControllers?.first,
           let ci = pages.firstIndex(of: visibleViewController) {
            return ci
        }
        else {
            return 0
        }
    }
    

    Next, in IntroPages you must add the following:

    func pageViewController(_ pageViewController: UIPageViewController, 
           didFinishAnimating finished: Bool,
           previousViewControllers: [UIViewController], 
           transitionCompleted completed: Bool) {
        (parent as? Intro)?.pageControl.currentPage = currentIndex
    }
    

    That will do it.

    But here are two points:

    1. See https://stackoverflow.com/questions/66545624 regarding the exquisite details of the Apple page controller UX.

    2. Traditionally you had to add the following code in viewDidLayoutSubviews to counter a UIKit bug. However as of about iOS 15 the issue seems to be resolved.

      override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() let subViews = view.subviews var scrollView: UIScrollView? = nil var pageControl: UIPageControl? = nil

       // maintain this code order...
       for view in subViews {
           if view.isKind(of: UIScrollView.self) {
               scrollView = view as? UIScrollView
           }
           else if view.isKind(of: UIPageControl.self) {
               pageControl = view as? UIPageControl
           }
       }
      
       // maintain this code order...
       if (scrollView != nil && pageControl != nil) {
           scrollView?.frame = view.bounds
           if let pageControl = pageControl {
                       view.bringSubviewToFront(pageControl) }
       }
      

      }