3

I have an image that i would like to place in the top part of the screen. I've set its mode to aspect fit, because i want to preserve original ratio. I've also set left, top and right constraints to 0:

enter image description here

Despite the fact that the top constraint is set to 0, there is a lot of empty space between the image and top of the screen which is definitely not what i want:

enter image description here

Only when i set top constraint to about "-100" i get something similar to what i would like to achieve:

enter image description here

Could you please explain me such non intuitive behaviour and tell me what should i do to place the image on the top of the screen without any gaps - like on the image above.

Stefano De La Burczymuchito
  • 133
  • 10

4 Answers4

2

This is worth a try, if you are still having this issue.

Tap on your ViewController and then uncheck the below properties. See if that fixes the problem.

enter image description here

Travis M.
  • 10,930
  • 1
  • 56
  • 72
  • Worth a try, I wasn't sure if maybe you had the images in a tableView or some other object that is affected by these settings. I guess it must be auto-layout related. ;( – Travis M. Mar 18 '15 at 17:47
1

As I can see from your screenshot your image frame is much bigger than the image content. In case you want to have that frame consider setting Aspect Fill to image mode. Otherwise you should set following constraints: enter image description here

Hope this will help.

Nikita Arkhipov
  • 1,208
  • 4
  • 11
  • 28
1

After some trials an errors i come up with something that is 99% of what i originally wanted. Left, top and right constraint has to be set to 0, aspect ratio constraint also has to be enabled. On top of that "Scale to fill" mode. This works quite well besides that fact that you have to calculate the correct image ratio on your own.

Stefano De La Burczymuchito
  • 133
  • 10
  • Have you tried this on the different phone resultions? Esp iPhone 4 (3:2 ration) versus iPhone 5/6/6+ (16:9 ration) versus iPad (4:3 ratio) which have different aspect ratios. With scale to fill, you might find that you end up stretching or pinching the image on some devices unless you code for the different aspect ratios. You may be ok with it stretching/shrinking though slightly. You can overcome some of this on iPhone versus iPad by using size classes and setting the aspect ratio constraint to be different for Compact width versus Regular width. This leaves the issue of iPhone 4 v 5/6/6+. – Rory McKinnel Mar 18 '15 at 20:42
  • Thanks Rory, i took that into account. – Stefano De La Burczymuchito Mar 19 '15 at 19:31
0

It would seem this is not that easy to solve: How do I autoresize an image, but at the top of the ImageView (programmatically in Xcode)?

Problem is you really want aspect fill and top at the same time.

My suggestion would be to take your UIImageView and add a cosnstraint for the aspect ratio as well as what you already have. Then Ctrl-drag from this constraint into the .h file of your view controller and create an IBOutlet.

This gives you an IBOutlet you can use in your code to adjust the aspect ratio of the UIImageView.

When you load your image in the code, inspect the image and calculate its aspect ratio. Set the constraint IBOutlet constant to match. This should then force the UIImageView to align itself aspect ration wise with the image and the constrains should then pull it all into place.

Community
  • 1
  • 1
Rory McKinnel
  • 7,936
  • 2
  • 17
  • 28
  • Thanks but it seems a little bit overcomplicated for me. Honestly speaking i haven't checked if it works yet. I still belive there is a more straighforward solution. Otherwise i would be very dissapointed with ios autolayout feature. I think that the problem i described is pretty common... – Stefano De La Burczymuchito Mar 18 '15 at 17:20
  • Auto layout works great. Your problem is you are wanting layout of a scaled images position inside a view which is bigger than your scaled image. There seems to be no settings saying to put a scaled image at the top, left, bottom, right of the view containing it etc... Hence I think you need to adjust the image views aspect ratio to match your image and then it will all layout fine. – Rory McKinnel Mar 18 '15 at 17:25
  • You are right, it seems complicated and somebody may have a better way. – Rory McKinnel Mar 18 '15 at 17:26