Auto Layout View Hierarchy

Question

I need to display the layout I have in the picture in my app.

The view hierarchy is:

• scroll view (scrollEnabled = true)
  • image view
  • label
  • webview (scrollEnabled = false)
  • table view (scrollEnabled = false, max amount of rows = 6)

The web view height is dynamically changed by it's delegate webViewDidFinishLoad.

func webViewDidFinishLoad(webView: UIWebView) {
    webView.sizeToFit()
} 

How can I set up the auto layout to move the table view below the web view?

Answer 1

First of all you need to add containerView in scrollView and then add subViews to containerView.

Below I've displayed the hierarchy you need to follow for displaying content in UIScrollView and the constraints you need to set.

scroll View (constraints :- leading,trailing,top,bottom)

Container View (constraints :- leading,trailing,top,bottom,widthsEqually to View,heightsEqually to View or height = 1000)

NOTE : If all subViews has specific height then there is no need to give height to ContainerView.

UIImageView (constraints :- leading,trailing,top,verticalSpacing,height)

UILabel (constraints :- leading,trailing,top,verticalSpacing,height)

UIWebView (constraints :- leading,trailing,top,verticalSpacing,height>=0)

UITableView (constraints :- leading,trailing,top,Bottom)

NOTE: give height to tableView if required. You will need to make changes in height constraint of UIWebView programmatically at run time based on your requirement.

For more reference please refer links below:

http://spin.atomicobject.com/2014/03/05/uiscrollview-autolayout-ios/ http://blog.surecase.eu/working-with-uiscrollview-in-storyboard-using-autolayout/ http://makeapppie.com/2014/12/11/swift-swift-using-uiscrollview-with-autolayout/