How to fit different screen sizes in ios

Question

I know this question seems to be a old-school one, but I can't find a nice answer to it, there is the thing:

The logical screen resolutions for iPhone5, iPhone6 and iPhone6+:

iPhone5   320 x 568
iPhone6   375 x 667
iPhone6+  414 x 736

Assume that I have a square UI element at the center of the screen, and there is three ways to constrain its width(&height) over different devices:

1. width is constant
2. width/screen.width is constant
3. screen.width - width is constant

these three different ways of constraining result in three different appearances:

Picture 1: 3 different appearances

I think the 2nd way of constraining (i.e. middle column in the Picture 1) is most natural from designer's point of view but it's least natural from programmer's point of view. I need to check device type and calculate dimensions and use different images for different devices(autolayout can't help in this circumstance)

1st way seems very natural to implement, but it sucks in practice, especially when dealing with text font sizes.

3rd one also need to judge which image to use programmatically, because three UI elements in three different devices do not match the simple @x2 @x3 scale factors.

Is there any work around to easily implement 2nd way of constraining?

Answer 1

If you are using storyboard you can easily calculate the 2nd way you want. You can give proportional width with the superview. As you can see in the image you can give multiplier to your views. Or you can create a width constraint in your code such as:

@IBOutlet weak var widthConstraint: NSLayoutConstraint!

and you can update your constraint in your code.