Horizontal stackview label grow with a fixed height element

Question

I have a horizontal stackview with a UIImageView (1:1 Aspect Rati, Height 32) and a label. Since it has a height the stackView cuts off my label on the right not letting me have more than one line.

I want the Horizontal StackView grow in height as the labels need to display its own text or use the UIImageView height if its bigger.

Pathognomy

Show me your view hierarchy and constraints. BTW I dont think it is good to use stack – Brack

updated @Brack – Pathognomy

it seems 2 elements inside the horizontal stackview can't have different heights – Pathognomy

Use Bottom Constraint too For Stackview – Scarabaeid

no, i want the stackview to grow as its content. @SagarShirbhate – Pathognomy

Can you check this project I've prepared just now? dropbox.com/s/dehizstq39oggh4/Deneme.zip?dl=0 – Serotonin

@Serotonin already checked. It doesn't work. If you want your imageView height to 32 as i need to be, the label on the right also collapses. – Pathognomy

@Pathognomy It Will Work As I see an answer Bottom constraint is also added and its simple :) – Scarabaeid

Answer 1

Here is the complete explanation,

If you do not give any height to the Imageview then how it looks like

ImageView grows

If you give height to the Imageview,

Label shrinks to the height of imageview

Solution

Put ImageView Inside a view like below,

Now, give proper constraints to the imageview. Now it works properly.

Output:

Brack

so now you need to give constraints horizontally cause neither the imageview and label have those, isnt? But yeah thats exactly the problem. – Pathognomy

@Pathognomy the label isn't inside the view. Only the image – Ives

you lost the easy setup of the horizontal stack view, in fact theres no need for that since you just put everything inside a uiview, not just the imageiview, also the label – Pathognomy

can you share the project? – Pathognomy

@Pathognomy I didnt prepared any project for this, it is simple, instead of imageview first take UIView and then put a ImageView in it & give constraints. Thats all – Brack

@Pathognomy I've edited to include an image showing the new constraints you'll need for the imageview and the uiview – Ives

@Pathognomy add leading, trailing, top and bottom constraints of the imageView to the view of zero. But be sure to change the bottom constraint to >= relationship – Ives

@SylvanDAsh no need of the bottom >= . – Brack

@SylvanDAsh yeah, the >= was the thing i missed. With this it works – Pathognomy

@Brack the bottom >= is necessary so that the label's height can adjust the overall height of the stackview – Ives

@SylvanDAsh Check my constraints -> i.sstatic.net/yHDna.png – Brack

Answer 2

GitHub Repo: Source Code Check the code inside FirstViewController

Explanation:

Step 1: Change the constraint of StackView, such that height >= minValue value. After that it's height will auto adjust depending on the height of the UILabel.

Step 2: Call sizeToFit method of the UILabel after you set it's text. That will change the frame of the UILabel.

lable.text = "SomeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView."
lable.sizeToFit()

Step 3: Set the Scale Mode of image to Aspect Fit, and set it's height and width constraint.

Step 4: Set the alignment of Stackview as per the requirement, I have set set it to top to make the image and Label to stay at the top.

Final Result:

Constraints:

Bananas

wich constraint? – Pathognomy

heightConstaint on the UIStackView. – Bananas

i added a height constraint to the stackView, to be greater than or equal min height (32) but still doesnt grow. – Pathognomy

@DeepArora But it increases the height of Imageview also. – Brack

@Pathognomy Remove the height of ImageView and If there is any height of StackView then make it >= . Now check – Brack

I dont want to remove the height o the ImageView, otherwise it grows also. – Pathognomy

can you share this project? – Pathognomy

Added the GitHub link, let me know if that still doesn't solve your problem, and if it does, please access my answer. Thanks. – Bananas

Beautifully explained, worked perfectly. Thank you – Measures