Autolayout aspect ratio for UIImageView / UIView

Question

How to set autolayout for UIImageView /UIView so that the image view width and height increases a bit for iphone 6 and 6 plus. I have tried adding the constraint Aspect ratio but the increased height and width are very big. Is there anyway to set the constraint height and width of image view can be set manually for iphone 6 and 6 plus. Take a look at the screenshot the image view in iphone 6 and 6 plus should be little smaller than it is showing now.

Answer 1

Sometimes playing with aspect ratio constraint doesn't help. In such a condition use equal width and equal height constraint with a formula I will explain as below with an example.

Say i have a UIView taking whole of the width of iPhone 5 i.e. 320 points. (remember 1 point = 2 pixel for retina display) and a height of 46 points. I want a button (Width = 30 point, height = 60 points) inside this UIView which would resize as per different phones with the same aspect ratio. I will do Control drag from the button to the UIView and select equal width first time and then will do the same thing again with Equal heights. Following this I will select the constraint and will make sure that the first item is the button and second item is the UIView. I will use this formula to calculate the multiplier then:

To calculate width multiplier: 60 (width of the button) / 320 (width of the UIView) * 100 = 18.75%

To calculate height multiplier: 30 (height of the button) / 46 (height of the UIView) * 100 = 65.217%

Now enter this multiplier (remember to use %age sign as well just like above) and this should resize the button for different sizes of iPhone screen.

Answer 2

As I understood your problem is that you want to control how much the image will be increased in each different screen size. You can control everything. What you need to do is to assign an equals width constraint on your image. Preferable on image's width. The relation will be with the superview and then you can change the relation by adding your own Multiplier.

What you need to do exactly:

1) Select your image view.

2) Hold down the control key. While you are holding it, drag your mouse from the image view to the outer view.

3) Select 'Equals width'.

4) Double click on your constraint in the 'Constraints' tab.

5) Ensure that the image view is presented as the first item, if not click on the first item and select 'Reverse first and second item'.

6) Play with the multiplier until you are satisfied with the result on the preview screen.