Search code examples
iosswiftuipageviewcontroller

How to use UIPageViewController to also display a part of the previous and next views

I used this amazing tutorial How to Use UIPageViewController in Swift to understand and implement an UIPageViewController in my app.

I have successfully completed the integration, but I need to modify a little bit the behavior now.

Instead of viewing only one colored view at a time, I would like to view 25% of the previous view and 25% of the next one.

enter image description here

I think I have to use this method passing the 3 viewcontrollers:

func setViewControllers(_ viewControllers: [UIViewController]?, 
          direction: UIPageViewControllerNavigationDirection, 
           animated: Bool, 
         completion: ((Bool) -> Void)? = nil)

...but I don't know how to do

Solution

  • It's easily achievable, when you created UIPageviewcontroller with scrollview. Yes, you can use UIScrollView to show it like pageviewcontroller. Now the display rect (in your case current screen + 25% of the second screen) is in your hands.

    Below is the code for that.

        import UIKit

class ViewController: UIViewController,UIScrollViewDelegate {

    let scrollView = UIScrollView(frame: CGRectMake(0, 0, 320, 300))
    var colors:[UIColor] = [UIColor.redColor(), UIColor.blueColor(), UIColor.greenColor(), UIColor.yellowColor()]
    var frame: CGRect = CGRectMake(0, 0, 0, 0)
    var pageControl : UIPageControl = UIPageControl(frame: CGRectMake(50, 300, 200, 50))


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
         configurePageControl()

        scrollView.delegate = self
        self.view.addSubview(scrollView)
        for index in 0..<4 {

            frame.origin.x = self.scrollView.frame.size.width * CGFloat(index)
            frame.size = self.scrollView.frame.size
            self.scrollView.pagingEnabled = true

            var subView = UIView(frame: frame)
            subView.backgroundColor = colors[index]
            self.scrollView .addSubview(subView)
        }

        self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * 4, self.scrollView.frame.size.height)
        pageControl.addTarget(self, action: Selector("changePage:"), forControlEvents: UIControlEvents.ValueChanged)

           }

    func configurePageControl() {
        // The total number of pages that are available is based on how many available colors we have.
        self.pageControl.numberOfPages = colors.count
        self.pageControl.currentPage = 0
        self.pageControl.tintColor = UIColor.redColor()
        self.pageControl.pageIndicatorTintColor = UIColor.blackColor()
        self.pageControl.currentPageIndicatorTintColor = UIColor.greenColor()     
        self.view.addSubview(pageControl)

         }

    // MARK : TO CHANGE WHILE CLICKING ON PAGE CONTROL
    func changePage(sender: AnyObject) -> () {
        let x = CGFloat(pageControl.currentPage) * scrollView.frame.size.width
        scrollView.setContentOffset(CGPointMake(x, 0), animated: true)
    }

    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {

        let pageNumber = round(scrollView.contentOffset.x / scrollView.frame.size.width)
        pageControl.currentPage = Int(pageNumber)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}