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:

you have to give fix size and width of your imageview that you set image and make imageview Aspect fill your problem solve. — Himanshu Moradiya, Dec 01 '16 at 07:03
Do you want your `UIImageView` to be fixed sized or variable? — Muhammad Hassan, Dec 01 '16 at 07:03
@MuhammadHassan the image should be fit within the `UIImageView` while maintaining the image’s original aspect ratio. Will that need to have fixed sized `UIImageView` ? — nayem, Dec 01 '16 at 07:39
Set `UIImageView` height by either explicit constraint or by `Stack View`'s `Distribution` property so that it's fixed. — Muhammad Hassan, Dec 01 '16 at 07:46
@HimanshuMoradiya What did you actually mean by _size_ and _width_ ? Do you mean _height_ and _width_ ? — nayem, Dec 01 '16 at 07:49

score 1 · Answer 1 · answered Dec 02 '16 at 15:32

1

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

answered Dec 02 '16 at 15:32

emraz

1,563
20
28

Muhammad Hassan · Answer 2 · 2016-12-01T08:25:40.777

0

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

edited Dec 01 '16 at 08:25

answered Dec 01 '16 at 07:21

Muhammad Hassan

1,037
1
8
22

There is no **Clip To Bounds** in my Attributes Inspector. Edited my question with the options of `Drawing` available to me. – nayem Dec 01 '16 at 07:48
Did you select your `UIImageView`? Please double check or share your Xcode's version. – Muhammad Hassan Dec 01 '16 at 07:49
Yes. I checked that again selecting `UIImageView`. But nothing :( And my Xcode is **Version 7.2 (7C68)** – nayem Dec 01 '16 at 08:00
Let me share a sample with you. – Muhammad Hassan Dec 01 '16 at 08:01
That would be great :) – nayem Dec 01 '16 at 08:08
Thanks for your effort. But I have to check it at a later time with Xcode 8.1. I'll let you know if that works or not for me :) – nayem Dec 01 '16 at 08:31

score 0 · Accepted Answer · answered Dec 07 '16 at 03:10

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.

UIImageView making other Views inconsistent

3 Answers3