Preventing the white gap that appears on swiping UIPageViewController

Question

I have implemented the UIPageViewController in this manner:

GalleryViewController

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

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 3

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 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

Set imageView's contentMode to AspectFill ...

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.