Programmatic UIScrollview with Autolayout Programmatic UIScrollview with Autolayout ios ios

Programmatic UIScrollview with Autolayout

  1. You don't need to create a faux content view, you can add subviews directly to the scroll view (which I prefer). Apple does not recommend creating one, they only suggest that you can.

  2. Subviews of the scroll view shall not rely on the scroll view to determine their sizes, only their positions.

  3. Your constraints must define the left-most, right-most, top-most, and bottom-most edges in order for auto layout to create the content view for you.

When you create a scroll view, you may give its frame the bounds of the controller's view:

scrollView.translatesAutoresizingMaskIntoConstraints = falseview.addSubview(scrollView)scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = truescrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = truescrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = truescrollView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true

You must then set the boundaries of the content view by anchoring its subviews to the edges of the scroll view. To achieve vertical-only scrolling, your top-most view must be anchored to the top of the scroll view and none of the subviews anchored to the leading and trailing edges must exceed the width of the scroll view.

topMostView.translatesAutoresizingMaskIntoConstraints = falsescrollView.addSubview(topMostView)topMostView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = truetopMostView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = truetopMostView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = truetopMostView.heightAnchor.constraint(equalToConstant: 1000).isActive = true

Notice the topMostView does not rely on the scroll view to determine its size, only its position. The content in your scroll view now has a height of 1000 but it won't scroll because nothing is anchored to the bottom of the scroll view. Therefore, do that in your bottom-most view.

bottomMostView.translatesAutoresizingMaskIntoConstraints = falsescrollView.addSubview(bottomMostView)bottomMostView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = truebottomMostView.topAnchor.constraint(equalTo: topMostView.bottomAnchor).isActive = truebottomMostView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = truebottomMostView.heightAnchor.constraint(equalToConstant: 1000).isActive = truebottomMostView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

The last anchor may seem odd because you're anchoring a view that is 1,000 points tall to an anchor that you just anchored to the bottom of the view which is definitely less than 1,000 points tall. But this is how Apple wants you to do it. By doing this, you do not need to create a content view, auto layout does it for you.

Defining the "edge constraints" (left-most, right-most, top-most, bottom-most) goes beyond scroll views. When you create a custom UITableViewCell, for example, using auto layout, defining the four edge constraints (i.e. where the top-most subview is anchored to the top of the cell topMostView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true, the bottom-most subview to the bottom of the cell bottomMostView.topAnchor.constraint(equalTo: self.bottomAnchor).isActive = true, etc.) is how you create self-sizing cells. Defining the edge constraints is how you create any self-sizing view, really.

When you create a scrollView , apple recommends to put a contentView in it and give that contentView the width of the viewController's view and pin it's top , bottom,leading,trailing constraints to the scrollview , then begin by placing items from top to bottom as you want and pin the bottom most item to the bottom of the scollview's contentView , so the scrollview can render it's height , this bottom constraint can be as you like and according to it scrollview will continue scrolling until finishes it