UIImageView making other Views inconsistent

Question

I've designed a ViewController with an ImageView, 3 Label-TextField combination, one single Label and one Toolbar at the bottom of the view. All of these view elements are inside a Stack View. The design is like below:

The contentMode property of the ImageView is set to Aspect Fit in the Attributes Inspector.

Now when I run the app and select different size of photos, the ImageView seems to be inconsistent different times. Like:

The teal color background the ImageView is set to distinguish the difference between the ImageView and the original Background.

This is okay. But when I choose a large size photo it seems to be inconsistent as the ImageView is overlapping the Toolbar below and this time the Camera button is no more clickable. Here is the image:

And the design gets more broken when I choose another photo. The view is showing up differently in different times. Screenshots are: and

Now what to do? I haven't done any of these design from the code side, all from the Interface Builder.

Any help will be appreciable.

I have these options in the Drawing section of Attributes Inspector:

And this is my Stack View's attributes:

Answer 1

By searching a lot of ways around, I finally was able to sort out the issue. Setting the content hugging priority(don't want to grow) and content compression resistance priority(don't want to shrink) helps a lot. Basically I needed to adjust the elements vertically. So tuning the vertical priorities for each element solved my problem. As I have to keep the size of the ImageView to be changed from time to time I've made it's vertical hugging and compression to lower than the other elements of the Stack View. Other priorities are kept as they were by default.

To visualise the situation, here is attached images. Color combinations are used here to distinguish among the elements of the Stack View.

Hope this helps.

Answer 2

Well it seems everything is fine. Just add height constraint in your Toolbar. The problem will be fixed.

Answer 3

First, make sure you've checked Clip To Bounds property of UIImageView in Attributes Inspector.

Second, set your constraints and / or Stack View's Distribution property in such way that all your views fits within available height.

Here's a sample: https://www.dropbox.com/s/5a7r0oz1v8vclgz/AspectFitImageView.zip?dl=0