2

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.

enter image description here

Gurpreet Singh
  • 803
  • 9
  • 16
  • 2
    Instead of giving aspect ratio give it a fix width. – Aqeel Ahmad Jan 07 '20 at 11:08
  • Are you having any conflicts? What are your other settings? Probably the most important one is that in the inner stack view you need to set Alignment property to Center. This will allow the icon to follow the center of your text. Otherwise you can always add another plain `UIView` on which you add the image and add some constraints to that view. – Matic Oblak Jan 07 '20 at 11:21
  • @AqeelAhmad I gave only width to it and also set Alignment to TOP and Distribution to Fill Propositionally but not still the same output, I have only a width to 20px but it takes 38px when I set these settings..! – Gurpreet Singh Jan 08 '20 at 04:09
  • @MaticOblak..No conflicts are there, I think It would be easy to use UIView but I think due to SwiftUI we should find that answer..! – Gurpreet Singh Jan 08 '20 at 04:12
  • @GurpreetSingh don't set any Alignment inside of stack view. just give its width 20 pixel and go to attribute inspector -> set distribution to the fill proportionally – Aqeel Ahmad Jan 08 '20 at 10:11

3 Answers3

3

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

enter image description here

enter image description here

Gurpreet Singh
  • 803
  • 9
  • 16
1

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

enter image description here

Kolos
  • 51
  • 5
1

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
Ly Boung
  • 185
  • 9