CODEWITHSUNDEEP
iosautolayoutnslayoutconstraintios-autolayout
Andrei Herford
Andrei Herford

Reputation: 18729

NSLayoutContraints: How to position a bottom view below the higher of two labels?

I am working on an iOS 11+ app and would like to create a view like in this picture:

View

The two labels are positioned to work as columns of different height depending on the label content. The content of both labels is variable due to custom text entered by the user. Thus I cannot be sure which of the the two labels is higher at runtime and there is also no limit to the height.

How can I position the BottomView to have a margin 20px to the higher of the two columns / labels?

Both labels should only use the min. height necessary to show all their text. Thus giving both labels an equal height is no solution.

I tried to use vertical spacing greater than 20px to both labels but this leads (of course) to an Inequality Constraint Ambiguity.

Is it possible to solve this simple task with Autolayout only or do I have to check / set the sizes and margins manually in code?

Upvotes: 0

Views: 496

Answers (3)

matt
matt

Reputation: 535345

The answer given as https://stackoverflow.com/a/57571805/341994 does work, but it is not very educational. "Use a stack view." Yes, but what is a stack view? It is a view that makes constraints for you. It is not magic. What the stack view does, you can do. An ordinary view surrounding the two labels and sizing itself to the longer of them would do fine. The stack view, as a stack view, is not doing anything special here. You can build the same thing just using constraints yourself.

(Actually, the surrounding view is not really needed either, but it probably makes things a bit more encapsulated, so let's go with that.)

Here's a version of your project running on my machine:

enter image description here

And with the other label made longer:

enter image description here

So how is that done? It's just ordinary constraints. Here's the storyboard:

enter image description here

Both labels have a greater-than-or-equal constraint (which happens to have a constant of 20) from their bottom to the bottom of the superview. All their other constraints are obvious and I won't describe them here.

Okay, but that is not quite enough. There remains an ambiguity, and Xcode will tell you so. Inequalities need to be resolved somehow. We need something on the far side of the inequality to aim at. The solution is one more constraint: the superview itself has a height constraint of 1 with a priority of 749. That is a low enough priority to permit the compression resistance of the labels to operate.

So the labels get their full height, and the superview tries to collapse as short as possible to 1, but it is prevented by the two inequalities: its bottom must be more than 20 points below the bottom of both labels. And so we get the desired result: the bottom of the superview ends up exactly 20 points below the bottom of the longest label.

Upvotes: 1

Abdul Rehman
Abdul Rehman

Reputation: 2456

One way to do this is to assign equal height constraint to both label. By doing this height of label will always be equal to large label (Label with more content).

You can do this by selecting both labels and adding equal height constraint as mentioned in screen short.

enter image description here

Result would be some think like below

enter image description here

Upvotes: 1

Konstantin Shendenkov
Konstantin Shendenkov

Reputation: 64

enter image description here You can add labels to stackView

Upvotes: 3

Related Questions