如何在Xcode的Interface Builder中使用约束/自动布局来正确缩放图像和字体？

Question

I'm trying to make a user interface in Xcode's Interface Builder such that:

1. It scales views based on the width of the device changing (aspect scaling)
2. Images are scaled by aspect ratio (no stretched or squashed images)
3. Fonts are scaled linearly
4. If something is centered horizontally in one design, it should be centered in all designs

Simple goals, I think… I have accomplished all of this programmatically using custom code previously, but I'd rather do it the "right way" and design this properly in Interface Builder and let it handle all of the layout for me.

Let's say I have designed in Interface Builder a screen for a small form-factor iPhone like this:

Now say this look and feel I'm happy with for iPhone 4s devices and would just like to scale everything up proportionally to the width for newer, larger iPhone form factors.

If I were to use the older "springs and struts" method, this almost gives me what I want on a larger form factor... except that everything stretches height-wise (not simply based on aspect ratio of original design's width to height.) You can notice particularly the "logo image" is stretched too tall. And the fonts aren't being scaled up on labels or buttons either.

I've also tried using "constraints", particularly just tackling the issue of image scaling proportionally, basing it on the aspect ratio of the container, and am not having any luck whatsoever.

Here I reset the springs and struts to their defaults, and add constraint to the original design's logo image:

Looking at the larger form factor, nothing has in fact changed:

(And yes, despite the fact there's layout errors reported, "fixing" them in any way has no net effect on the scaling / lack of scaling in the image.)

So just to restate-- how do I do the following with Xcode / Interface Builder constraints?

1. It scales views based on the width of the device changing (aspect scaling)
2. Images are scaled by aspect ratio (no stretched or squashed images)
3. Fonts are scaled linearly
4. If something is centered horizontally in one design, it should be centered in all designs

Thanks in advance.

Answer 1

1. It scales views based on the width of the device changing (aspect scaling)
2. Images are scaled by aspect ratio (no stretched or squashed images)

What you can do is to make width and height using aspect ratio.

I have added a multiplier respect to superview

3. Fonts are scaled linearly

I have set a label like this.

And From attribute inspector i set like this:

4. If something is centered horizontally in one design, it should be centered in all designs

All views are center aligned.