Auto Scaling vs Auto Layout — iOS

How does the scaling work?

If you want to avoid scaling an app the first thing you should do keep the screen ratio consistent between devices. As you may already know the iPhone 5s has a resolution of 1136×640, which means it’s 16:9 just like a TV; the iPhone 6 is 1334×750, which is also 16:9; and guess which is the resolution of the iPhone 6 Plus? You’ve guessed right, it’s 16:9 with 1920×1080 pixels. This is why apps can automatically scale to higher and larger resolution without the need of starting from scratch.

It is definitely a time-saver but developers still need to adjust the content of each app as it might be blurry. For example an icon or a character designed for a 720 pixel screen can result unclear on a 1080 pixel screen. Horizontal viewing and the ability add more dense content will also require some work.

Since there are more than 1.3 million apps on the App Store developer might just update their apps to take advantage of the extra resolution. Apps that were made for the iPhone 4 will look terrible on the iPhone 6.

Overall the apps for the iPhone 6 Plus resemble a lot those of the iPad and iPad mini.

How does the layout works?

Here is how I would do it with AutoLayout.

  • Setup your view in IB / Storyboard
  • Setup the constraints

Since you want to scale subviews — set their height and width constraints.

So — Width constraint: Do this by

  • ctrl + drag inside the UIView from left to right (Or visa versa)

When you stop dragging a pop up will show with two options: choose Width.

So the same for height — just ctrl + drag from within the UIView you want to scale, top to bottom or bottom to top and when the pop up shows, click height.

Now that your constraints are set — find them in the left panel that shows all your UIView objects for your IB / Storyboard. They will be in the same UIView you made them in.

Now, ctrl + drag them to your view controller — these will create NSLayoutConstraint `IBOutLets

Example:

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *heightConstraint;

Now — when you want to update the height constraint (and width) — in code, do something like this:

self. heightConstraint.constant = 10; // new Size
[self.view layoutSubviews]; //Causes setNeedsDisplay to be called on all subviews in UIView

That’s all there is to it. You could put this code inside a UIView animation and it will animate nicely, too. Just use some simple math to calculate the size to whatever % you want.

If you look in IB / Storyboard — you will see where the constraints in the left side of Xcode are shown, it will give you there current constant value.

Example:

Hope this preview helps