Adaptive UI for multiple screen sizes in iOS

In iOS, it is not hard to create complex UIs using AutoLayout or Manual Layout. But making the UI work across screen sizes is not straightforward.

Let’s take a look at an example:

Subscription screen comparison on iPhone 7 Plus and iPhone SE

If you notice there is a lot of useless space around the UI elements in iPhone 7 Plus. But the same dimensions result in a good looking UI on the SE.

It’d be great if I could use the dimensions of different UI elements from the design of a screen at @1x or @2x in my code directly.

In Android, this was a breeze because I could use dp units.

Solution

It was simpler than I initially though. I just created an extension for the CGFloat class:

Yes! I call the variable dp 😁. You can replace 320 with the value you desire based on what resolution the screen is designed in. Here are the values you can replace 320 with, based on the phone:

  1. iPhone 6, 7, 8 Plus — 414
  2. iPhone 6, 7, 8, X — 375

Usage

Since its a CGFloat extension, just put .dp after any float value. Below, you can see a few more usage examples:

Easy? Right! Building UI that works across screen sizes is a breeze 😄