2

I have a peculiar issue when dealing with my label in Vertical, then horizontal stack view.

The horizontal stack view is supposed to be of a dynamic height based on the label's contents. I've tried other solutions mentioned before, such as embedding the label (and image which is also in the horizontal stack view) in separate UIViews and pinning the labels to the edges.

The issue is, when the label is set to 0 - the label grows beyond what it requires, adding padding above and below the label.

I did verify this wasn't an issue with constraints from where the Stack View begins below the imageView, as the warning label correctly floats upwards when aligning the stackview to "top", but the label still remains centered.

Everything has been done in the storyboards without code.

Take a look at the images, maybe someone can help me out and recognise how I can resolve this issue.

Desired Effect

Desired Effect

What occurs upon running the application

What occurs upon running the application

Verifying that the stack view is correctly pinned to the image view by aligning top Verifying that the stack view is correctly pinned to the image view by aligning top

Constraints involved

Constraints involved

The second stackview in the hierarchy at the bottom is just to fill the empty space during the designing phase. I don't think that would be causing the issue.

Karim
  • 271
  • 2
  • 11

3 Answers3

1

I would guess that actually your second stackView at the bottom is also the part of your problem. If you pinned the vertical stack view to the bottom of the image (TOP constraint) but you also pinned it to the bottom of the screen (BOTTOM constraint), your vertical stack view tries to strech it's content. That's the reason why the label has the extra space.

What you can do: get rid of that bottom constraint (don't give vertical stackView bottom constraint) or maybe better set vertical content hugging priority of warning label to greater value. enter image description here

Ondřej Korol
  • 594
  • 6
  • 19
1

Here, the warning UILabel is occupying the remaining available space, try adding an empty UIView in the second stack view which you kept for the later stage of the development. This will act like a spacer view.

Also, don't forget to call warningLabel.sizeToFit() inside viewDidLoad()

Atul
  • 698
  • 4
  • 13
0

You can achieve this by calling yourLabel.sizeToFit()

Above will dynamically adjust the height of the label based on the amount of space your text occupies.

DevKyle
  • 1,091
  • 6
  • 22
  • Should I call this somewhere specific? I tried in viewDidLoad() but it didn't make a difference :( – Karim May 08 '20 at 15:16
  • Try calling in viewDidLayoutSubviews() – DevKyle May 08 '20 at 17:28
  • 1
    For reference, this article does a good job explaining the viewcontroller lifecycle, including where you should be changing uiviews: https://medium.com/good-morning-swift/ios-view-controller-life-cycle-2a0f02e74ff5 – DevKyle May 08 '20 at 17:36