Loading UIViewController inside an UIScrollView Swift3

Question

I have 2 UIViewController s. One UIViewController has a view with many buttons and is +2000 points high. Another UIViewController has a UIScrollView .

This is my code:

import UIKit

 class ViewController: UIViewController {

@IBOutlet weak var scrollView: UIScrollView!


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


    scrollView.contentSize = CGSize(width: 375, height: 2884)

    DispatchQueue.main.async {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let thumb_vc = storyboard.instantiateViewController(withIdentifier: "thumb") as! ThumbsViewController
        //self.present(vc, animated: true, completion: nil)

    self.addChildViewController(thumb_vc)
    self.scrollView.addSubview(thumb_vc.view)
   }
 } 

and although the thumbs UIViewController get loaded to UIScrollView , the size is wrong and does not scroll.

Any help appreciated

Answer 1

You are running into an issue with the Views being resized when loaded at run-time. Couple options...

// NOT USING constraints / auto-layout
func setupA() -> Void {

    scrollView.contentSize = CGSize(width: 375, height: 2884)

    let storyboard = UIStoryboard(name: "Main", bundle: nil)

    if let vc = storyboard.instantiateViewController(withIdentifier: "thumb") as? ThumbsViewController {

        // add the child VC
        self.addChildViewController(vc)

        // don't let "thumbs" view auto-resize
        vc.view.autoresizingMask = []

        // set "thumbs" view frame size to scroll view content size
        vc.view.frame = CGRect(origin: CGPoint.zero, size: scrollView.contentSize)

        // add "thumbs" view to the scroll view
        self.scrollView.addSubview(vc.view)

        // finish child VC process
        vc.didMove(toParentViewController: self)
    }

}

// USING constraints / auto-layout, with hard-coded sizing
func setupB() -> Void {

    let storyboard = UIStoryboard(name: "Main", bundle: nil)

    if let vc = storyboard.instantiateViewController(withIdentifier: "thumb") as? ThumbsViewController {

        // add the child VC
        self.addChildViewController(vc)

        // add "thumbs" view to the scroll view
        self.scrollView.addSubview(vc.view)

        // disable auto-resizing mask
        vc.view.translatesAutoresizingMaskIntoConstraints = false

        // set constraints to both control the size of the "thumbs" view
        // as well as the contentSize of the scroll view

        // set width and height constraints for the "thumbs" view
        vc.view.widthAnchor.constraint(equalToConstant: 375).isActive = true
        vc.view.heightAnchor.constraint(equalToConstant: 2884).isActive = true

        // set leading, top, trailing, and bottom constraints to the scroll view
        vc.view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
        vc.view.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        vc.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
        vc.view.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

        // finish child VC process
        vc.didMove(toParentViewController: self)
    }

}

// USING constraints / auto-layout, with sizing controlled by constraints set in IB for the "thumbs" view
func setupC() -> Void {

    let storyboard = UIStoryboard(name: "Main", bundle: nil)

    if let vc = storyboard.instantiateViewController(withIdentifier: "althumb") as? ALThumbsViewController {

        // add the child VC
        self.addChildViewController(vc)

        // add "thumbs" view to the scroll view
        self.scrollView.addSubview(vc.view)

        // disable auto-resizing mask
        vc.view.translatesAutoresizingMaskIntoConstraints = false

        // the constraints set in Interface Builder for the elements in the "thumbs" view
        // will control its size

        // setting the "edge" constraints relative to the scroll view will control the contentSize

        // set leading, top, trailing, and bottom constraints to the scroll view
        vc.view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
        vc.view.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        vc.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
        vc.view.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

        // finish child VC process
        vc.didMove(toParentViewController: self)
    }

}

I'd recommend the method in setupC() It uses auto-layout constraints with no hard-coded size values. Makes it much easier to plan for different device sizes (and future use in other views / apps / jobs / etc).

Answer 2

Why are you giving static height to ScrollView when you can easily embed View in scroll view using Autolayout. You can refer this link, https://www.natashatherobot.com/ios-autolayout-scrollview/

Answer 3

You must specify your child's frame too. Also there is no need to dispatch your UI changes to main queue in the viewDidLoad method. And you must call your child view controller's didMove(toParentViewController:) method after adding it's view as your subview. You can read more about container view controllers and their children here .