Search code examples
iosswiftuiimageviewautolayoutuipageviewcontroller

Weird UIPageViewController sliding behavior with Aspect Fill image mode


I just created a UIPageViewController with page content view controller that consists of single ImageView and a Button. It works almost flawlessly, but it has a major issue when I try to slide through the views in vertical view only, with Aspect Fill mode set for my ImageView (which is pretty much basically setup for this).

You can see this behavior right here: https://youtu.be/2yl6UXbUGQg

I am using autolayout, Button constraints are aligned to ImageView (full size), ImageView constraints are set to Superview...

Code:

1) UIPageViewController:

class ViewController: UIPageViewController, UIPageViewControllerDataSource {

    var arrPageTitle: NSArray = NSArray()
    var arrPagePhoto: NSArray = NSArray()

    override func viewDidLoad() {
        super.viewDidLoad()

        arrPageTitle = ["page 1", "page 2", "page 3"]
        arrPagePhoto = ["slider-1.jpg", "slider-2.jpg", "slider-3.jpeg"]

        self.dataSource = self
        self.setViewControllers([getViewControllerAtIndex(0)] as [UIViewController],
                                direction: .Forward,
                                animated: false,
                                completion: nil)
    }

    func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {
        let pageContent: PageContentViewController = viewController as! PageContentViewController
        var index = pageContent.pageIndex
        if ((index==0) || (index == NSNotFound)) {
            return nil
        }
        index -= 1
        return getViewControllerAtIndex(index)
    }

    func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {
        let pageContent: PageContentViewController = viewController as! PageContentViewController
        var index = pageContent.pageIndex
        if index == NSNotFound {
            return nil
        }
        index += 1
        if index == arrPageTitle.count {
            return nil
        }
        return getViewControllerAtIndex(index)
    }

    func getViewControllerAtIndex(index: NSInteger) -> PageContentViewController {
        let pageContentViewController = self.storyboard?.instantiateViewControllerWithIdentifier("PageContentViewController") as! PageContentViewController
        pageContentViewController.strTitle = "\(arrPageTitle[index])"
        pageContentViewController.strPhotoName = "\(arrPagePhoto[index])"
        pageContentViewController.pageIndex = index
        return pageContentViewController
    }
}

2) Content view controller, UIViewController:

class PageContentViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var labelTitle: UIButton!

    var pageIndex: Int = 0
    var strTitle: String!
    var strPhotoName: String!


    override func viewDidLoad() {
        super.viewDidLoad()

        self.imageView.image = UIImage(named: self.strPhotoName)
        self.labelTitle.setTitle(self.strTitle, forState: .Normal)
    }
}

Solution

  • Your image views from one view controller are spilling over to other view controllers because you need to set clipsToBounds to true on your image views. This will prevent the contents of the image view from going beyond the image view's bounds.