Ios – Scroll Vertically in a UIScrollView with Vertical Paging enabled

iosswiftuiscrollview

Hoping you could give me some direction here. I have a scrollview setup with vertically paging. My problem is the views are larger than the screen (vertically). My desired effect is to have the view scroll to the bottom and then page to the next page. Like my image below is trying to depict.

I have tried setting the size of the scrollview and the content size to the size of the view which does offset the views correctly. I just can't scroll to see the bottom of the view, It just pages to the next view.

Thanks for any advice.

Layout Design

class ViewController: UIViewController {

let scrollView = UIScrollView() // Create the scrollView

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


    //Set up and add scrollView to view
    scrollView.frame = self.view.frame
    self.scrollView.pagingEnabled = true
    self.view.addSubview(scrollView)

    //An array of UIColors to add to the views
    let x : [UIColor] = [UIColor.blueColor(),UIColor.redColor(),UIColor.yellowColor()]

    //For each UIColor add a view that is 100px larger then the height of the scrollView
    for index in 0...x.count-1{
        //
        let subView = UIView(frame: CGRectMake(
            0, //x offset
            (self.scrollView.frame.height + 100) * CGFloat(index), //y offset
            self.scrollView.frame.width, // width
            (self.scrollView.frame.height + 100))) // height
        subView.backgroundColor = x[index] //background Color
        scrollView.addSubview(subView) // Add View

    }

    //
    let c = (self.scrollView.frame.size.height + 100) * CGFloat(x.count)
    self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.width, c)

    //Background Color
    self.view.backgroundColor = UIColor.greenColor()
}

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

Best Answer

The best way I've found to do it is to use a nested scrollview for the content. Here is what my code ended up looking like.

class ViewController: UIViewController, UIScrollViewDelegate {

let scrollView = ScrollView() // Create the scrollView

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


    //Set up and add scrollView to view
    scrollView.frame = self.view.frame
    self.scrollView.pagingEnabled = true
    self.view.addSubview(scrollView)
    self.scrollView.delegate = self

    //An array of UIColors to add to the views
    let x : [UIColor] = [UIColor.blueColor(),UIColor.redColor(),UIColor.yellowColor()]

    //For each UIColor add a view that is 100px larger then the height of the scrollView
    for index in 0...x.count-1{
        //
        let subView = UIScrollView(frame: CGRectMake(
            0, //x offset
            (self.scrollView.frame.height * CGFloat(index)), //y offset
            self.scrollView.frame.width, // width
            (self.scrollView.frame.height))) // height

//Set the size of the content view
        let contentView = UIView(frame: CGRectMake(0, 0, self.view.frame.width, 1000))

        subView.contentSize = CGSizeMake(self.view.frame.width, contentView.frame.height)
        contentView.backgroundColor = x[index]
        subView.addSubview(contentView)
        scrollView.addSubview(subView) // Add View

    }

    //
    let c = (self.scrollView.frame.size.height) * CGFloat(x.count)
    self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.width, c)

    //Background Color
    self.view.backgroundColor = UIColor.greenColor()
}

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