防止在滑动 UIPageViewController 时出现白色间隙

Preventing the white gap that appears on swiping UIPageViewController(防止在滑动 UIPageViewController 时出现白色间隙)

问题描述

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!

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,

这篇关于防止在滑动 UIPageViewController 时出现白色间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！