Preventing the white gap that appears on swiping UIPageViewController

Question

I have implemented the UIPageViewController in this manner:

GalleryViewController: is the container of the PageViewController

PageViewController: is the pageViewController which I added it to GalleryViewController as a subview.

PageContentViewController: I put in it UIImageView to be the content of the page view controller.

Everything is going well, but when I swipe between images, weird things happen. There is white gap appears upside.

The weird thing is when I finish scrolling it stretches automatically.

This is the code of GalleryViewController, which is the container of the PageViewController:

import UIKit

class PageViewController: UIViewController, UIPageViewControllerDataSource, UIPageViewControllerDelegate {

var startIndex:Int = 0

var pageViewController : UIPageViewController!

override func viewDidLoad() {
    self.navigationController?.hidesBarsOnTap = true;
    reset()
}

func reset() {
    /* Getting the page View controller */
    pageViewController = self.storyboard?.instantiateViewControllerWithIdentifier("PageViewController") as UIPageViewController
    self.pageViewController.dataSource = self

    let pageContentViewController = self.viewControllerAtIndex(0)
    self.pageViewController.setViewControllers([pageContentViewController!], direction: UIPageViewControllerNavigationDirection.Forward, animated: true, completion: nil)

    self.pageViewController.view.frame = CGRectMake(0, 0, self.view.frame.width, self.view.frame.height)
    self.addChildViewController(pageViewController)
    self.view.addSubview(pageViewController.view)
    self.pageViewController.didMoveToParentViewController(self)
    println("\(startIndex) start index")
}


override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {

    var index = (viewController as PageContentViewController).pageIndex!
    index++
    if(index >= Constants.Statics.images.count){
        return nil
    }
    return self.viewControllerAtIndex(index)

}

func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {

    var index = (viewController as PageContentViewController).pageIndex!
    if(index <= 0){
        return nil
    }
    index--
    return self.viewControllerAtIndex(index)

}

func viewControllerAtIndex(index : Int) -> UIViewController? {
    if((Constants.Statics.images.count == 0) || (index >= Constants.Statics.images.count)) {
        return nil
    }
    let pageContentViewController = self.storyboard?.instantiateViewControllerWithIdentifier("PageContentViewController") as PageContentViewController
    pageContentViewController.pageIndex = index
    return pageContentViewController
}

}

What can I do to prevent that stretching and the white gap on swiping?

UPDATED:

A strange thing has happened, I changed the pageViewController Transition Style to Page Curl, the problem did not appear. Sounds like it is about scrolling!

Answer 1

The origin of the bug is the constraints of your UIImageView.

When you begin scroll, only viewWillAppear is called, and autolayout is not yet calculated, when the scroll is finished, and view is shown, the view start calculate autolayout, and viewDidAppear happens after autolayout is completed.

you can check that by adding the code below in PageContentViewController

  override func viewDidLoad() {
    super.viewDidLoad()

    imageView.image = UIImage(named: "UpcomingGamesBg")
    println("viewDidLoad imageView Frame : \(imageView.frame) pageIndex : \(pageIndex)")
  }

  override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)

    println("viewWillAppear imageView Frame : \(imageView.frame) pageIndex : \(pageIndex)")
  }

  override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)

    println("viewDidAppear imageView Frame : \(imageView.frame) pageIndex : \(pageIndex)")
  }

And because, the layout of your imageView refer to top layout guide, and top layout guide can have different value before and after calculating autolayout, you have this bug.

So to resolve that, you can change the constraints of your image view and make them relatives to the parent view (because the pageContentViewController is like a subview and the the pagerViewController will manage the top and the bottom margin), like that :

With that you can fix this bug, but be careful you should add some contraints to your pageViewController.view

Update

For example to support navigationBar / TabBar, you should add some constraints in viewDidLoad (after view.addSubview(pageViewController.view) ):

      pageViewController.view.setTranslatesAutoresizingMaskIntoConstraints(false)

    let topConstraint = NSLayoutConstraint(item: pageViewController.view, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: topLayoutGuide, attribute: NSLayoutAttribute.Bottom, multiplier: 1.0, constant: 0)
    let bottomConstaint = NSLayoutConstraint(item: pageViewController.view, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: bottomLayoutGuide, attribute: NSLayoutAttribute.Top, multiplier: 1.0, constant: 0)
    let leadingConstraint = NSLayoutConstraint(item: pageViewController.view, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Leading, multiplier: 1.0, constant: 0)
    let trailingConstraint = NSLayoutConstraint(item: pageViewController.view, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Trailing, multiplier: 1.0, constant: 0)

    view.addConstraints([topConstraint, bottomConstaint, leadingConstraint, trailingConstraint])

Best regards,

Answer 2

Check definitely example here: https://github.com/dimpiax/UIPageViewControllerScrolling

But if you want to remove empty blank on swipe, you can remove bounce, for example:

for value in view.subviews {
    if let scrollView = value as? UIScrollView {
        scrollView.bounces = false
    }
}

Answer 3

The auto stretching is because the ImageView instances are not constrained to aspect fit. In your PageContentViewController, specify contentMode value for your images to fix the issue. For example:

self.imageView.contentMode = UIViewContentModeScaleAspectFit

Answer 4

So it appears that the view's frame is not correct before the animation takes place. Try setting up the frame before it starts to come on screen. Something like:

func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {

    var index = (viewController as PageContentViewController).pageIndex!
    if(index <= 0){
        return nil
    }
    index--

    // Setting up the new view's frame
    var newVC = self.viewControllerAtIndex(index)
    newVC.view.frame = self.pageViewController.view.bounds
    return newVC
}

Answer 5

Have you tried those? You should select your content view controller first. Note: click on the controller, not the view

1. uncheck Adjust Scroll View Insets
2. uncheck Under Top Bars
3. uncheck Under Bottom Bars

Answer 6

Look like a layout issue.

Since UIPageViewController with .Scroll type use a UIScrollView to make it,

try to add self.automaticallyAdjustsScrollViewInsets = false to your viewDidLoad

If it doesn't work, try to remove self.navigationController?.hidesBarsOnTap = true

And if it doesn't work again, please provide a demo project, so I can figure out what is wrong.

Answer 7

Set imageView's contentMode to AspectFill ...