Content pushed down in a UIPageViewController with UINavigationController

| | August 5, 2015

UPDATE 2

I’ve been running and testing my app in the iOS Simulator using a 4-inch device. If I run using a 3.5-inch device the label doesn’t jump. In my .xib, under Simulated Metrics, I have it set as Retina 4-inch Full Screen. Any idea why I’m only seeing this problem on a 4-inch device?

UPDATE 1

In IB, if I choose “Navigation Bar” in Simulated Metrics, my label still jumps. The only way I can get my label to render correctly on the first screen is to not set a navigation controller as my window’s root view controller.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

My window’s rootViewController is being set to a UINavigationController whose rootViewController has a UIPageViewController embedded.

When my app loads, the initial view is presented with it’s content pushed down a bit, roughly the same size as a navigation bar. When I scroll the pageViewController, the content jumps up to where it was placed in the nib, and all other viewControllers loaded by the pageViewController are fine.

uipageviewcontroller with navigationcontroller

In my appDelegate:

self.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:[ContainerViewController new]];

In ContainerViewController:

- (void)viewDidLoad {

    [super viewDidLoad];

    self.pvc = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll
                                               navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal
                                                             options:nil];
    self.pvc.dataSource = self;
    self.pvc.delegate = self;
    DetailViewController *detail = [DetailViewController new];
    [self.pvc setViewControllers:@[detail]
                       direction:UIPageViewControllerNavigationDirectionForward
                        animated:false
                      completion:nil];

    [self addChildViewController:self.pvc];
    [self.view addSubview:self.pvc.view];
    [self.pvc didMoveToParentViewController:self];
}

10 Responses to “Content pushed down in a UIPageViewController with UINavigationController”

  1. Bartłomiej Semańczyk on November 30, -0001 @ 12:00 AM

    Just uncheck Under Top Bars for both: UIPageViewController and your custom PageContentViewController:

    enter image description here

  2. Try to select PageViewController in storyboard and uncheck “Under Bottom Bars” and “Under Opaque Bars” in Attributes Inspector.

  3. I had a similar problem but none of the solutions here worked. My problem was that whenever I would scroll to the next page, the content would jump down, ending in the correct position, but starting 20 pixels too high (clearly something to do with the status bar). My container VC was not a nav VC. After pulling my hair out for a while, the solution that ended up working for me was just to make sure that none of the constraints in my content VC were connected to the top layout guide. This may or may not be feasible in your case, but in mine it was, and it was the only thing that solved the content jump. Also very curiously, this problem only manifested when the transition style was set to scroll. Just changing it to page curl made the issue disappear. But I needed scroll. Hope this helps someone else.

  4. this is my first time posting on stack overflow, but I have searching for a solution to this problem for over a week now.

    Here is a solution I came up with, I hope this works for anyone else with the same issue.

    I’m not sure how you are initializing your frame for your detail view controller, but I am going to assume you might use: self.view.frame.size.height;

    try using:
    self.view.frame.size.height -= self.navigationController.navigationBar.bounds.size.height;

    Hope this helps

  5. I have the same problem. I solve it by putting setViewControllers for the first page in UIPageViewController’s viewDidLoad instead of setting it when I make a instance of UIPageViewController. Also, I need to set automaticallyAdjustsScrollViewInsets to NO.

  6. As stated by “Bo:”: Putting self.edgesForExtendedLayout = UIRectEdgeNone; in the viewDidLoad of MyPageViewController solved the problem. – Bo

  7. This is definitely being caused by automaticallyAdjustsScrollViewInsets, as other posters (including @djibouti33). However, this property is strange in two ways:

    1. It must be set on a UINavigationController. If you set it on a child controller that’s managed by a UINavigationController, it won’t have any effect. 1
    2. It only applies when a scroll view is at index zero in a controller’s subviews. 2

    These two caveats should explain the intermittent problems experienced by others in the thread.

    TLDR: A workaround that I went with is adding a dummy view to the UIPageViewController at index zero, to avoid the setting applying to the scrollView within the page controller, like this:

    pageViewController.view.insertSubview(UIView(), atIndex: 0) // swift
    
    [pageViewController.view insertSubview: [UIView new] atIndex: 0]; // obj-c
    

    Better would be to set the contentInset on the scroll view yourself, but unfortunately the UIPageViewController doesn’t expose the scroll view.

  8. So I’m adding another answer after further development and I finally think I figured out what’s going on. Seems as though in iOS7, UIPageViewController has its own UIScrollView. Because of this, you have to set automaticallyAdjustsScrollViewInsets to false. Here’s my viewDidLoad now:

    - (void)viewDidLoad
    {
        [super viewDidLoad];
    
        self.automaticallyAdjustsScrollViewInsets = false;
    
        DetailViewController *detail = [[DetailViewController alloc] init];
        [self setViewControllers:@[detail]
                       direction:UIPageViewControllerNavigationDirectionForward
                        animated:false
                      completion:nil];
    }
    

    No need to put anything in viewWillLayoutSubviews (as one of my previous answers suggested).

  9. My original answer solved the problem for the time being, but after a while the same problem came back to bite me.

    Using the following viewController hierarchy:

    -- UINavigationController
      -- MyPageViewController
        -- MyDetailViewController
    

    Here’s what I did to solve it:

    In MyPageViewController.m

    @interface MyPageViewController () <delegates>
      @property (strong) MyDetailViewController *initialViewController;
    @end
    
    - (void)viewDidLoad
    {
        ...
    
        // set this once, because we're going to use it in viewWillLayoutSubviews,
        // which gets called multiple times
        self.initialViewController = [MyDetailViewController new];
    }
    
    // the problem seemed to stem from the fact that a pageViewController couldn't
    // properly lay out it's child view controller initially if it contained a 
    // scroll view. by the time we're in layoutSubviews, pageViewController seems to
    // have gotten it's bearings and everything is laid out just fine.
    - (void)viewWillLayoutSubviews
    {
        [self setViewControllers:@[self.initialViewController]
                       direction:UIPageViewControllerNavigationDirectionForward
                        animated:false
                      completion:nil];
    }
    
  10. Initially my view controller hierarchy looked like this:

    -- UINavigationController
      -- MyContainerViewController
        -- UIPageViewController
          -- MyDetailViewController
    

    I set it up this way so MyContainerViewController could manage a toolbar. I narrowed my problem down to MyContainerViewController, and then it occurred to me that I don’t even need it if I subclass UIPageViewController. Now my hierarchy looks like this:

    -- UINavigationController
      -- MyPageViewController
        -- MyDetailViewController
    

    MyPageViewController manages it’s toolbar, and everything works as expected, both on a 4-inch and 3.5-inch device.

Leave a Reply