Add a ScrollView to existing View

Viewed 55269

I'm developing a little app in Swift 2.0. I have a View with the following hierarchy:

enter image description here

Now, the elements placed in this view can't be displayed entirely in it, so I would like to use a ScrollView in order to be able to scroll all the content.

How I can embed all the content of my Viewto a new ScrollView? Can I do this programmatically by code?

6 Answers

If you are using Snapkit or creating programmatically.

class ScrollViewController: UIViewController {

lazy var contentViewSize = CGSize(width: self.view.frame.width, height: self.view.frame.height + 320) //Step One

lazy var scrollView : UIScrollView = {
    let view = UIScrollView(frame : .zero)
    view.frame = self.view.bounds
    view.contentInsetAdjustmentBehavior = .never
    view.contentSize = contentViewSize
    view.backgroundColor = .white
    return view
}()

lazy var containerView : UIView = {
    let view = UIView()
    view.frame.size = contentViewSize
    view.backgroundColor = .white
    return view
}()

override func viewDidLoad() {

    self.view.addSubview(scrollView)
    self.scrollView.addSubview(containerView)

    //Now Set Add your Constraints in the container View.

}
}

Above accepted answer explanation is enough to achieve the scroll view but I would prefer to create my complete application programatically and I don't use storyboards in my project. This code is for the folks who don't prefer to use storyboards.

Explanation

Step One: Determine your content Size. Here I am taking Exact width and adding 320 more to the height of the screen.

Step Two: Create a scroll view and add desire behaviour of the scroll view. Now, the contentSize of the scroll view should be same as the contentSize you've created above at step one.

By Following Step one and Step Two. You Will be able to set a scroll view on the top of the view. But If you want to add a stretching behaviour then You should follow Step Three

Step Three: Create a container view of the same size of the contentView which you've calculated in step one and set it to the frame of the containerView. By doing this you'll be able to achieve stretching header and footer behaviour in your screen.

Please read make sure to add constraints in the same order as it is set.

Answer Edits are welcome.

I had the same issue. I needed to add scrollview to the existing view.But my main container view has a lots of view inside it. And they were connected to each other. So i was afraid. Finally i did it. the process given below.

  1. Duplicate your View (root View). For this first select the root view then press Command + D

  2. Now delete all the child view view inside the root view

  3. Now add a scroll view to the root view and set constraint to 0,0,0,0

  4. Now add the duplicate(That you duplicated) view to the scroll view and set constraints to 0,0,0,,0 also set the height that you want.

  5. Set width of the duplicate view by equal width with the root view.

  6. Now select the viewController, go the size inspector, select free form size. Then set the height that you entered with duplicate view.

  7. You have almost done. Now you have to connect the child view with outlet or action that you gave in the viewController class.

Thats all.

It's simple. Command A and Command X to specific view controller in StoryBoard. After that take scroll view. On scroll view, just take one view with view controller view height and width equal to scroll View width. Again do Command V and rearrange the constraints. Your problem will be solved.

Related