Problem rendering ScrollView content with a nested vertical StackView with Alignment(Fill) and Distribution(Fill Proportionally)

Question

I am trying to nest a stackView inside ScrollView to avoid constraint setting for individual views(3 labels and a ImageView). Without the StackView, things work well as individual views with constraints set to each of them inside a ScrollView.

Is it Ok to use a Vertical Stack inside a ScrollView? why is Distribution = 'Fill Proportionally' not rendering as intended?

The screenshot shows my constraints setting for ScrollView and StackView along with Attributes Inspector setting with Simulator output.

Screenshot of constraint settings in IB

Answer 1

Your comment: "I want ImageView to match the image's original proportions ideally with both scrolls(Vertical and horizontal) enabled." doesn't really make sense.

I'm guessing you pulled the data (in your screen capture) from https://apod.nasa.gov/apod/ap200116.html ... the image on that page is 4096 x 4088 pixels. If you want to show that with Vertical and Horizontal scrolling enabled, the entire screen will be covered by only a small portion of the image, and the user would need to scroll, scroll, scroll, scroll just to see the description.

More likely, what you probably want, is to choose an aspect ratio for your image view -- 16:10 is a common, reasonable ratio -- and set the imageView to Aspect Fit . It will look something like this:

So, here is how you'd want to layout your view controller in Storyboard:

When you have longer text, the description label will continue to expand vertically, and with enough text you'll get vertical scrolling.

You probably also want to embed the labels in views, so you can add some leading and trailing "padding" space for a better appearance.

The other option for your image view would be to give it a height constraint connected to an @IBOutlet . When you've downloaded the image, change the .constant for that constraint to match the aspect ratio of the new image. That would need to be done via code though - you can't do that directly in Storyboard (unless you'll always be getting the exact same size / aspect ratio images).

---

Edit

Here is one way to dynamically size the image view to match the aspect ratio of the downloaded image...

With the same Storyboard constraint settings, change the Priority on the aspect = 16:10 constraint to High (750) .

When the view loads, the image view will match itself to the 16:10 aspect ratio.

Assuming you are using an async image download process, when the image has finished downloading:

// set the image
imageView.image = img
    
// get the aspect ratio
let m = img.size.height / img.size.width
    
// add new aspect ratio constraint to the image view
//  because this constraint will have (by default) a Priority of Required (1000),
//  it will "override" the Storyboard 16:10 constraint that has Priority: 750
self.imageView.heightAnchor.constraint(equalTo: self.imageView.widthAnchor, multiplier: m).isActive = true

// animate the size change
UIView.animate(withDuration: 0.3, animations: { [weak self] in
    guard let self = self else { return }
    self.view.layoutIfNeeded()
})

I put a working example here so you can try it out and inspect the layout and code: https://github.com/DonMag/UshaSample