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:
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:
- iPhone 6, 7, 8 Plus — 414
- 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 😄
