Wednesday, January 3, 2018

UIScrollView ContentView dynamic height constraints

Leave a Comment

I am facing issue with contentView height constraints. All labels have dynamic height i.e no fixed height. I have read somewhere to set height equal to scrollview height.

The height of ViewController is currently 870px, scrollview height is 757px. I have no idea how can i set height in AutoLayout , as I am unable to scroll after a certain point.

Appearing in Simulation ViewController in main.Storyboard

I have set UIScrollView first then I added UIView as the child of the UIScrollView then I added 2 UIImageView and few UILabels, the size of UILabel is dependant on the content and content is not fixed. Since the height of UIView is static, when the content of UILabel is quite big, then I am unable to scroll after a certain point.

2 Answers

Answers 1

If what you mean is that you want the scroll view to be the same height/width as the container view:

  1. Go to the storyboard and locate the view
  2. Press "ctrl" and drag from the scroll view to one of the edges of the parent container
  3. Do the same step for all 4 edges (top,left,down,right edges of the scroll view)
  4. You might need to set the constraint to "0" (number of margin pixels from the parent)

Try to follow this picture (make sure all of the lines are bold (turned on) and set the value in the text box to "0":

enter image description here

Answers 2

Do it this way:

  1. Add the scroll view to your view controller and do not set any constraints to it.
  2. Start adding your subviews (images, labels etc) in your scroll view and set the desired constraints. For labels, you don't need to set the height, as they will auto-resize their height depending on content. For other subviews, also set the height or other constraints that will later determine the height (i.e. aspect ratio). If your scroll view gets too small for all the subviews you want to add, drag from its bottom to increase its height. It's important to keep all the subviews inside the scroll view and chain them one to another.
  3. For the last label in the scroll view, add a bottom constraint to the scroll view.
  4. Add margin constraints from your scroll view to the main view (top, leading, bottom and trailing).

Since all subviews are chained and pinned to top and bottom inside the scroll view and the scroll view is pinned to the storyboard's view, this will work.

Do not set the height of the scroll view. Setting it to 757 px is wrong because it renders your scroll view below the screen on devices with a height lower than 757px.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment