防止刷UIPageViewController时出现的白色间隙 [英] Preventing the white gap that appears on swiping UIPageViewController

问题描述

我已经以这种方式实现了UIPageViewController：

I have implemented the UIPageViewController in this manner:

GalleryViewController ：是PageViewController的容器

GalleryViewController: is the container of the PageViewController

PageViewController ：是pageViewController，我将它作为子视图添加到GalleryViewController。

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

PageContentViewController ：我把它放在UIImageView中作为页面视图控制器的内容。

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.

这是 GalleryViewController ，这是PageViewController的容器：

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?

更新：

发生了一件奇怪的事情，我将pageViewController Transition Style更改为 Page Curl ，问题没有出现。听起来像是关于滚动！

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!

推荐答案

错误的起源是你的UIImageView的约束。

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

开始滚动时，只调用viewWillAppear，尚未计算autolayout，滚动完成后显示视图，视图开始计算autolayout，自动布局完成后发生viewDidAppear 。

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.

您可以通过在中添加以下代码来检查：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)")
  }

因为，imageView的布局参考了顶部布局指南，在计算autolayo之前和之后，顶部布局指南可以具有不同的值你有这个错误。

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.

所以要解决这个问题，你可以改变图像视图的约束并使它们成为父视图的亲戚（因为pageContentViewController就像一个子视图和pagerViewController将管理顶部和底部边距），如下所示：

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 :

有了这个你可以修复这个bug，但要小心你应该为你的pageViewController.view添加一些约束

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

更新

例如，为了支持navigationBar / TabBar，你应该在viewDidLoad中添加一些约束（在 view.addSubview（pageViewController.view）之后）：

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

祝你好运，

这篇关于防止刷UIPageViewController时出现的白色间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！