如何使用约束在interfaceBuilder中调整UIImageView的大小（用于3.5”和4”）

Question

I am trying to put an UIImageView into the UIView of my ViewController, an resize UIImageView automatically when the UIView is either 480px or 568px height. But it seems incredibly complex in IB!

If i put a normal view inside my View controller, it will resize naturally. But with my UIImageView it doesn't. Even if I choose the scaleToFill Mode. Nothing will happen.

So it seems I need to use constrains. But the problem is when I add a simple constraint just to tell the UIImageView to be X height size. IB tell me there are errors, and ask me to add lots of constraints to other component of the view. That's propagating and I am finishing with thousands of constraints. This is confusing, since I just want to make my UIView resize to the Parent container and for IB to tell me I need to add a constraint to other components who never ask nothing.

In code it take only two lines! I don't understand why it's so complex in IB. So could someone please explain me how to make my UIImageView resize according to his parent ?

I have made lot of research in Google, and found nothing that helped me. It is like nobody never has to use full imageView mode.

Note that I have already succeed with constraint for a full UIImageView in another viewController, but this is kind of obscure. But now I don't know why when I do the same things, IB want to add lot of lot of lot of constraints.

Answer 1

I think it would be better if you'd use constraints with distance to the superview (ie the view controller), instead of height/width constraints. Select your image view and add constraints like this:

The image view will automatically fill the screen on both 3,5" and 4" iPhones. Afterwards just play around with the image view's contentMode to get the desired effect.

Answer 2

Using autolayout or the the old autoresizing masks is the way to solve the problem.
Marko has pointed the solution, but is missing something depending on your requirements. With the contentMode you can play around to adapt the image to fit, or fill the bounds of the UIImageView with or without keeping the aspect ratio.
One issue that I had in the past was to load 2 different images one for 3.5 inches and the other for 4 inches screen. Apple say that you can use this naming convention to load the correct image at runtime.

• name~iphone.png
• name@2x~iphone.png
• name~ipad.png
• name@2x~ipad.png
• name-568h@2x~iphone.png (iPhone 5)

It works well for retina and different devices (iphone or ipad), but the iphone5 convention works only for launch images.
Now there is only one opportunity left, check the screen size and load the correct one at runtime, in my opinion this is not an awesome solution.
In Xcode 5 thank to the Images asset functionality is possible to load the right image for a specific screen size. Just add a new image set, convert in the attribute inspector to device specific and just drag the images on their slot.