Horizontal StackView issue for multiline label and fixed size icon image

Question

I want to show a an icon image which is fixed size of 20px X 20px ,It is showing good when a label is only one line but not showing accurately when label became in two lines.Screenshot is attached.

Answer 1

Working Constraints.!

1. Set inner Stack view Alignment to Top and Distribution set to Fill Proportionally
2. Set width of icon to fixed of 20px(No Aspect ratio and no Height)
3. Set icon Content Compression Resistance property Horizontal priority to 1000.

Images attached

Answer 2

Make sure that you set the stack view's distribution to fill and alignment to top (or center if you want the icon vertically centered)! If you specify a distribution of fill and don't change the content hugging and content compression priority of the arranged subviews, with the constraints you've set up, the intrinsic sized label should take up most of the space while the icon remains at it's natural size. I would also recommend you to make a 20px width constraint instead of the aspect ratio on the image view, but I don't think that was the problem. This might help.

Here is an example:

• Outer Stack View (vertical): alignment = fill, distribution = fill
• Inner Stack View (horizontal): alignment = top, distribution = fill

Answer 3

What're the attributes for yous vStackView(Container)?

Make sure that your vStackView attributes are:

• Alignment: Fill
• Distribution: Fill

What're the attributes of your hStackView(Each Row)?

Make sure that your hStackView attributes are:

• Alignment: Top/Center/Bottom (Depend of your requirement)
• Distribution: Fill