MBH MBH - 7 months ago 145
Swift Question

Preventing the white gap that appears on swiping UIPageViewController

I have implemented the UIPageViewController in this manner:

Screenshot1

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.

white gap

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

full screen

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

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 :

enter image description here

enter image description hereenter image description here

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,

Comments