Dynamic Height UILabel inside a UIScrollView

1
votes

I have been trying to achieve this design for like 3 days but everything I tried failed. enter image description here

Here's how my layout is.

  • The blue part is a UIScrollView with 0 0 0 0 constraints to the main view.
  • Nested inside the UIScrollView is a UIView that has all my content, also with 0 0 0 0 constraints to the UIScrollView. I also made the UIView's width equal to the UIScrollView's width.
  • I then added elements from top to down. The image was simple, 10 to the top margin of the content view and fixed width and height and centered horizontally in container.
  • The profile name label same as the image but with fixed height only.
  • The UIView that contains the 3 labels and 2 dynamic height labels. I gave that UIView top, left and right constraints and left the bottom so that the dynamic height labels would be able to push the view's height when needed. The UILabels have 0 lines set.
  • 2nd UIView, 0 0 0 0 and 5 5 5 5 constraints for each label inside
  • UITableView inside a UIView, the view has a fixed height and the table is 0 0 0 0 as well.
  • The button 5 top, 5 left, 5 right. I then made the container UIView (which contains all those items) to have an alignment with the button's bottom edge as seen in this post's top answer: UIView with dynamic height multiple UILabel.

I also used this video as a reference on how to implement a UIScrollView since this was my first time ever. https://www.youtube.com/watch?v=VE6DQGy4iS8

I'm not allowed to use UIStackView bec we're targeting iOS 8.

The 2 obvious issues I have right now are:

  1. When I run the app, scrolling does nothing.
  2. The only warning I get in my storyboard is this: enter image description here
1
iosuiscrollviewuistoryboardnslayoutconstraint
I would make sure that all of your uiview's are properly constrained with either top and bottom pins or one or the other along with a fixed height. Specifically you should be able to pin the bottom of the UIView containing the dynamic labels to the top of the next UIView to have a fixed spacing between the two while still allowing dynamic height. – zfetters
I have those views pinned as you said. What exactly determines the scroll view's height? – Tarek
So you have you first UIView directly beneath your scroll view which is pinned 0,0,0,0. Inside that is all of your content, so once you have added all the proper constraints to make sure everything has its width/height accounted for your parent UIView will actually expand in size if the content inside of it grows (by way of your dynamic height labels) which in turn will increase the contentView size of your UIScrollView. The biggest thing is that you get the constraints on your content correct and you should be good to go. – zfetters

1 Answers

4
votes

Okay I managed to do it at the end.

What I did is I pinned the UIView that has the dynamic UILabels to the top, right and left. For its height, I control dragged from it onto the last item inside itself, which is the 2nd dynamic height UILabel in the photo. I control dragged and set the UIView and chose "Bottom Spacing to Container" with the UILabel that has a dynamic height. That way the UILabel controls the UIView's final height which was needed by the UIScrollView to figure out its own height.

Of coarse each UILabel element was pinned top right left only which allows them to be all dynamic.

What you do with the following UIViews (whether you want to give them a static height or dynamic) is your choice.

As for the UIButton at the bottom, I did the same thing with it. I control dragged from the containing UIView (which is nested inside the UIScrollView and contains everything here), to the UIButton and I chose "Bottom Spacing to Container" and set it to 5. This will allow the containing view to adjust its height depending on where the UIButton is located which depends on how much distance it moves when the dynamic labels push their view's height and in turn push the UIButton if that makes any sense.

In short, in a typical scenario you usually pin the last element in the view to the containing view's bottom left and right. However to allow for dynamic changes, you reverse the constraint's 2 items.

I hope this was useful.